Chia sẻ trang demo và download đẹp cho Blogger
Nếu bạn là một trong những độc giả thường xuyên theo dõi blog KslZone.NET, thì chắc rằng có một vài lần các bạn sẽ thấy tại website mình, trong một số các bài viết chia sẻ và giới thiệu về template cùng một vài thủ thuật hướng dẫn, ví dụ như bài này "Zett - A Responsive Blogger Template", khi bạn nhắp vào nút demo để chuyển sang một trang mới thì bạn sẽ được chuyển sang một trang trung gian của mình tại blog của mình chứa phần hiển thị của trang khác.
Tại trang này bạn có thể thấy, ngoài nội dung của trang demo ra thì trên cùng là thanh menu trong đó có chứa nút "Tải về" (là nút download) cho người dùng có thể tải trực tiếp ngay khi đang xem và nút "Loại bỏ khung" để khách truy cập có thể ẩn thanh này đi nếu không thích. Thì bài viết này mình sẽ chia sẻ & hướng dẫn các bạn làm ra một trang tương tự.
Thế trang này của KslZone có gì hot? Đối với trang mà mình chia sẻ sau đây, nó tương tự với thủ thuật "trang 404 hiển thị đầy đủ cho Blogger" mà trước đây mình đã chia sẻ. Mình sẽ ẩn đi toàn bộ những thứ có trong cặp thẻ body để khi tải trang nó chỉ tải những thứ cần thiết mà mình làm ở trang này thôi. Thôi chúng ta bắt tay vào việc nào.
Công việc đầu tiên để cho đẹp thì các bạn tạo một trang mới và đặt một tên mà bạn thích, ví dụ như tên là demo chẳng hạn và xuất bản trang này, sau đó ghi nhớ link của nó. Như trang hiện tại của mình thì mình đặt tên là "Xem Trước" và nó có đường link như sau
Tiếp tục bạn chèn đoạn css này lên trên thẻ ]]></b:skin> trong phần code của template của bạn
Tiếp tục ý tưởng như sau, chúng ta sẽ tạo một trang demo và download khi người dùng truy cập vào cái địa chỉ trang lúc nãy mà chúng ta đã tạo. Như khúc trên mình cũng nói là mình sẽ loại bỏ đi toàn bộ những thứ khác trong thẻ cặp thẻ body và chỉ có đoạn mã dùng để tạo trang demo và download này thôi, thế chúng ta làm sao? Đơn giản chỉ cần sử dụng thẻ b:if trong Blogger mọi thứ sẽ được giải quyết.
Bạn tìm đến thẻ <body> và chèn đoạn mã này xuống dưới
Tới đây bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên
Cả 2 đoạn mã này sau khi bạn chèn xong chắc cũng hiểu cách thức mình tạo ra trang đó như thế nào, không tính phần Javascript nhé. Ở đây mình tạo ra thẻ điều kiện nếu là gặp địa chỉ trang demo thì trang đó mới có, và ngược lại nếu không phải trang demo thì blog sẽ hoạt động bình thường.
 |
| Trang demo và download của KslZone |
Tạo trang demo và download giống KslZone.NET
Theo mình được biết thì cũng có nhiều bài viết hướng dẫn thực hiện một trang như thế này nhưng cái nhược điểm hầu hết bọn nó khá khoai, vì nó load đủ hết mọi thành phần của trang website, cái phần demo chỉ là hiện đè lên website của bạn thôi, do đó việc tải trang chậm đi đôi chút. Ngoài ra thì trang đó được bố trí bằng CSS và nó tùy thuộc vào mỗi template để chỉnh cho đúng, do đó nếu bạn thay đổi template thì khá là mất công chỉnh sửa.Thế trang này của KslZone có gì hot? Đối với trang mà mình chia sẻ sau đây, nó tương tự với thủ thuật "trang 404 hiển thị đầy đủ cho Blogger" mà trước đây mình đã chia sẻ. Mình sẽ ẩn đi toàn bộ những thứ có trong cặp thẻ body để khi tải trang nó chỉ tải những thứ cần thiết mà mình làm ở trang này thôi. Thôi chúng ta bắt tay vào việc nào.
Công việc đầu tiên để cho đẹp thì các bạn tạo một trang mới và đặt một tên mà bạn thích, ví dụ như tên là demo chẳng hạn và xuất bản trang này, sau đó ghi nhớ link của nó. Như trang hiện tại của mình thì mình đặt tên là "Xem Trước" và nó có đường link như sau
http://kslzone.blogspot.com/p/xem-truoc.htmlbạn không cần điền bất cứ nội dung gì vào trang này, nói chung chỉ cần tạo một trang cho có link để làm thôi.
Tiếp tục bạn chèn đoạn css này lên trên thẻ ]]></b:skin> trong phần code của template của bạn
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiTb6g7D8I_It8fbzZaBc2xs3Atx7BFhE0HeyR2lYUljwTX7Q-VDCOShMw1qnqBGcCCSTf7KzjJ7NZIk-ziD9ez_FeyS5PW9GIMyxs2-MTfrYGATcj7cWSD6CiaWCIp_yoU69udJWRx0/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1nnWCtU-YxDNpvUtOIan3X1vTaa2QAmRe3bV-kRD1VXZlYa4ZML5ZEIn034HiVwnDNCmIuGQcZGXaEKU7P9gqnbfT8DMV2wuv7AoEMOW1PKUFsTBDidlp5ZBbfK0qZN7fkcdYQMRqfk/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1nnWCtU-YxDNpvUtOIan3X1vTaa2QAmRe3bV-kRD1VXZlYa4ZML5ZEIn034HiVwnDNCmIuGQcZGXaEKU7P9gqnbfT8DMV2wuv7AoEMOW1PKUFsTBDidlp5ZBbfK0qZN7fkcdYQMRqfk/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPXzzirHFRqhAKKZRmlTFtHH8NWOTbMGdfQSTMOgLMQ9CtcucRVdW-jiLo3P4BcMC_PaGwbYXp3PHHNqHfacTf7g4FEkgitF2n261dirAxpM2N1huVKg4JxnAHcAw4sqdpmSwov4TMx4/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPXzzirHFRqhAKKZRmlTFtHH8NWOTbMGdfQSTMOgLMQ9CtcucRVdW-jiLo3P4BcMC_PaGwbYXp3PHHNqHfacTf7g4FEkgitF2n261dirAxpM2N1huVKg4JxnAHcAw4sqdpmSwov4TMx4/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOaBLCpD5MMQ41i67NfHSlfc4wmaslR74BhQtcIPM3G1wJ_6YMnc2NaFi3F9FEjcMsM4JxBbInJcN9U1cx-Lszq9Zwnnruk2WzBBn29IRTsqf6ISrdITF3E_vXIB_zA_1QPEVX7bK1VTc/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}Tiếp tục ý tưởng như sau, chúng ta sẽ tạo một trang demo và download khi người dùng truy cập vào cái địa chỉ trang lúc nãy mà chúng ta đã tạo. Như khúc trên mình cũng nói là mình sẽ loại bỏ đi toàn bộ những thứ khác trong thẻ cặp thẻ body và chỉ có đoạn mã dùng để tạo trang demo và download này thôi, thế chúng ta làm sao? Đơn giản chỉ cần sử dụng thẻ b:if trong Blogger mọi thứ sẽ được giải quyết.
Bạn tìm đến thẻ <body> và chèn đoạn mã này xuống dưới
<b:if cond='data:blog.url != "http://kslzone.blogspot.com/p/xem-truoc.html"'>Tới đây bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên
<b:else/>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var url = getQueryVariable("url");
var download = getQueryVariable("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='http://kslzone.blogspot.com'>KslZone Demo</a>
<a class='dlbutton' href='' id='dl'>Tải về</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Loại bỏ khung</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>Cả 2 đoạn mã này sau khi bạn chèn xong chắc cũng hiểu cách thức mình tạo ra trang đó như thế nào, không tính phần Javascript nhé. Ở đây mình tạo ra thẻ điều kiện nếu là gặp địa chỉ trang demo thì trang đó mới có, và ngược lại nếu không phải trang demo thì blog sẽ hoạt động bình thường.
Sử dụng trang demo và download như thế nào?
Để sử dụng rất đơn giản khi tạo bài viết các bạn đặt địa chỉ sau cho người dùng chuyển đếnhttp://kslzone.blogspot.com/p/xem-truoc.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_downloadtrong đây nhớ thay Địa_chỉ_url_demo và Địa_chỉ_url_demo là 2 địa chỉ cần thiết của bạn.
lúc 02:28 22 tháng 10, 2014
ý tưởng thì em ko thiếu . CHo anh mấy cái ý tưởng Nek :
- Em chả biết nói sao ví dụ cho dễ hiểu : 1 template mình dow về giao diện phù hợp với tất cả mọi màn hình, như là điện thoại chỉ có menu cột bài viết liên quan và bình luân .nhưng khi mình thêm tiện ích vào blog thì cái tiện ích đó củng xuất hiện ở điện thoại. mình muốn ẩn nó đi ở giao diện điên thoại thi làm sao. Dù em đã đọc cái bài về cái gì @sreem .. gì gì đó nhưng chả nói tới ẩn tiện ích ở chế độ màn hình khác .
-Gì nữa ta : À bài viết các công cụ không thể thiếu , các thẻ meta không thể thiếu . Ui cha anh viết cái đó cả tháng củng không xong . Tiện ích thì mấy trang khác có rết nhiều . Nhưng ko có khoa học . Tiện ích đâu phải thích là để vào đâu . Phải chuẩn html 5 phải peed tốt chuẩn seo... ví dụ viết về cái những tiện ích không thể thiếu nek . viết về google webmaster toot này , google anlytic , meta bing........ nhiều lắm . Em có làm 1 bài tổng hợp về cái này nhưng sợ thiếu với sợ gà bị chém gió mệt lắm . Anh cố gắng viết em sẽ điều hướng bài viết của em qua anh cho lẹ .... Cuối cùng cho em hỏi cách làm cái hãy theo dõi tôi Google + đó làm sao thế anh . Em cố găng mãi ăn trông cái tiện ích đó mà không được . Đành hỏi vậy @@
lúc 02:34 22 tháng 10, 2014
Đọc cái bài viết của anh về chông copy sao chép em đã áp dụng vào blog .Em mới thử làm cái blog . Chủ yếu em định chia sẽ template . Toàn đi tìm của mấy thằng indo . Khó ăn lắm anh nó bắt down tùm lum . Down về chia sẽ với anh em Vn. Nhưng bài viết là em tự viết . Như vậy có gọi là vi phạm bản quyền và chơi xâu ko anh .@@
http://vnzed.blogspot.com/ hy vọng anh cho ý kiến để em hoàn thiện hơn . Em đã chuẩn html 5 hết oy ^^
lúc 08:12 22 tháng 10, 2014
Ok cảm ơn đã đóng góp nhé. Mình có thời gian sẽ giải đáp toàn bộ trong thời gian ngắn thôi.
lúc 08:22 22 tháng 10, 2014
Không có đâu bạn nhé, khởi đầu như vậy là rất tốt, mình chia sẻ với dân mình những kiến thức mà kiếm được theo cách hiểu của mình không coi là vi phạm bản quyền đâu. Nhưng mình vẫn nên ghi nguồn code tham khảo ở đâu, vì đây không phải là do mình sáng tạo :D
lúc 08:44 22 tháng 10, 2014
có bài viết này em đọc và làm theo . Bực cái làm làm mấy ko được quyết sáng ni nghĩ hoc tức quá . Em thấy anh có cái này hy vọng anh giúp đỡ hic
http://arlinadesign.blogspot.com/2014/10/memasang-responsive-recent-post-slider.html
lúc 22:05 22 tháng 10, 2014
Hình như là em chèn đoạn mã cuối cùng vào chỗ nào bạn muốn hiện là được thôi mà, địa chỉ blog của em đâu em để lại anh xem cho dễ. Nhớ thay cái "URL-BLOG-ANDA" bằng địa chỉ blog của em nhé.
lúc 23:54 22 tháng 10, 2014
Đây là địa chỉ blog của em http://vnzed.blogspot.com/
lúc 08:00 23 tháng 10, 2014
Anh thấy nó hiện bình thường mà :D
lúc 14:22 14 tháng 10, 2015
Ad cho mình hỏi: Có thể thêm các thẻ css vào phần <iframe id='view'/> hay không? Cụ thể mình muốn căn chỉnh nội dung nhúng vào. Vd: Nhúng video ở trang phim bằng chính player của trang đó. Mong bạn hướng dẫn hộ mình nhé!
lúc 19:56 15 tháng 10, 2015
được chứ bạn, nếu không biết thì cứ mạnh dạn thử thôi, có mất gì đâu.
bạn có thể tham khảo thêm tại đây: http://hocwebchuan.com/reference/tag/tag_iframe.php
lúc 20:36 15 tháng 10, 2015
Theo mình hiểu là bạn muốn dùng iframe nhúng chính xác vị trí của cái player trên trang phim. Nếu như vậy thì hiện tại theo mình biết thì không thể bạn nhé :D
lúc 13:59 16 tháng 10, 2015
ừm, mình xin chỉnh lại là không nhé!, nhưng bạn có thể tạo một thẻ div với class nào đó bao quanh iframe của bạn, còn iframe thì bạn cứ thêm width và height là 100% là được
lúc 19:55 7 tháng 11, 2015
Cụ thể mình có 2 blog với nội dung khác nhau, mình muốn nhúng blog2 (che phần header) vào blog1 giữ nguyên phần header của blog1. Vậy cụ thể mình thêm thẻ div thế nào. Bạn giúp hộ mình nhé!
lúc 18:00 4 tháng 4, 2016
bài viết rất hay a à (y) , mong a sẽ có thêm nhiều bài hay như vậy nữa :)
lúc 17:30 5 tháng 5, 2016
Hình như code này chưa chính xác, mình thử lại nhiều lần mà ko đc. tiếc vãi, thẻ đóng mở style bạn cho thừa hay sao ý
lúc 21:19 22 tháng 5, 2016
demo đẹp :D
lúc 13:05 10 tháng 6, 2016
Muốn ẩn ở đâu hiện ở đâu thì dùng thẻ điều kiện :)
lúc 15:12 26 tháng 6, 2016
không đc á
lúc 22:06 28 tháng 8, 2016
sao màn hình mình bé xíu vậy
lúc 22:28 28 tháng 8, 2016
sao màn hình mình bé xíu vậy
lúc 22:10 14 tháng 11, 2016
Mình làm theo bài viết HD nhưng hình như code bị lỗi bạn có thể xem lại giúp mình ??