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.

Chia sẻ trang demo và download đẹp cho Blogger
Trang demo và download của KslZone
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ự.

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.html
bạ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(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/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(http://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/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;
}
đây là đoạn css căn chỉnh cho trang demo/download của chúng ta, bạn có thể tự mình làm lại theo ý bạn sau nếu như bạn không thích.

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 != &quot;http://kslzone.blogspot.com/p/xem-truoc.html&quot;'>
tại đây thì trang xem trước của mình có địa chỉ là thế, còn bạn thay lại cho đúng với địa chỉ trang của bạn nhé.

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(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Loại bỏ khung</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>
trong đoạn mã trên phía dưới bạn thay KslZone Demo cũng như địa chỉ trang website của mình thành của bạn vào và lưu lại.

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 đến
http://kslzone.blogspot.com/p/xem-truoc.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download
trong đâ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ời kết

Đơn giản như vậy là bạn đã có một trang demo và download đẹp tương tự như KslZone.NET. Vừa tiện cho người dùng, và chúng ta lại kiếm thêm được một ít lượt view cho website của mỗi người. Hiện tại thì mình cũng tương đối hơi thiếu ý tưởng về thủ thuật Blogger nên nếu bạn nào có ý tưởng gì mới hãy để lại cho mình biết nhé.

21 bình luận

  1. avatar says

    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 @@

  2. avatar says

    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 ^^

  3. avatar says

    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.

  4. avatar says

    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

  5. avatar says

    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

  6. avatar says

    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é.

  7. avatar says

    lúc 23:54 22 tháng 10, 2014

    Đây là địa chỉ blog của em http://vnzed.blogspot.com/

  8. avatar says

    lúc 08:00 23 tháng 10, 2014

    Anh thấy nó hiện bình thường mà :D

  9. avatar says

    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é!

  10. avatar says

    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

  11. avatar says

    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

  12. avatar says

    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

  13. avatar says

    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é!

  14. avatar says

    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 :)

  15. avatar Nặc danh says

    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 ý

  16. avatar says

    lúc 21:19 22 tháng 5, 2016

    demo đẹp :D

  17. avatar says

    lúc 13:05 10 tháng 6, 2016

    Muốn ẩn ở đâu hiện ở đâu thì dùng thẻ điều kiện :)

  18. avatar says

    lúc 22:06 28 tháng 8, 2016

    sao màn hình mình bé xíu vậy

  19. avatar says

    lúc 22:28 28 tháng 8, 2016

    sao màn hình mình bé xíu vậy

  20. avatar says

    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 ??

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.