Chia sẻ trang demo và download đẹp cho Blogger giống KslZone.NET

Hôm nọ có ghé qua blogger KslZone.NET, mình thấy có bài viết tạo trang demo có link down khá đẹp. Cách mà nó vận hành như sau: 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 chứa phần hiển thị của trang mẫu giao diện đó và có thêm một thanh trên top có chưa nút "Tải về" 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 như hình mẫu sau.

Cũng theo lời của KslZone thì một số trang web có hướng dẫn làm kiểu demo này khá khoai, và mình thấy khá đúng, vì mình có thử rồi, nó bị lỗi hiện đè lên demo còn có lỗi xuất hiện thêm nhiều thanh download sau mỗi lần refresh lại trang.

CÁCH LÀM:

Bước 1:  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ó. ví dụ: http://www.demo.vienduongtech.com/p/demo.html

Bước 2:  chèn đoạn css dưới đâ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/AVvXsEgVLXb8LyM3xQbywc0M8dvH2om9EA6YOZFz7OvL5NDRgL8_YCc6Af2j7lPUUZUg26r34VTmShweRjbFtKJLH6zcXA4RBIOZ4i2Osyiy-qDaUXUGNQgWajQ0SIMuFKOvuF46fzj8Alhu-Bc/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/AVvXsEjkcF8cLTtchVb9Ph8pj9FLmYbG9Sc0FM71dZ_nJUsysoMzMreq1qRov9tHolblyDVBXJY-uVXMticjTtXdQHmoKhwYRjqeU_DZ4E34l0oZpXC4Gr2X-ks8G88m-m_agwGQdhPmgiz7yTA/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/AVvXsEjkcF8cLTtchVb9Ph8pj9FLmYbG9Sc0FM71dZ_nJUsysoMzMreq1qRov9tHolblyDVBXJY-uVXMticjTtXdQHmoKhwYRjqeU_DZ4E34l0oZpXC4Gr2X-ks8G88m-m_agwGQdhPmgiz7yTA/s1600/close.png)no-repeat 15px 50%} .dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvli8ahoZeUOe1_GPRh36tzfUp7OtaJ1AGNmp7sNqx1l8wIhfK_SKVyri9eoD9AT5fNxhKVfdgUfX8N2IhrJyigOvnHd2XwhQeZBA0cuxNCuGXr6J60nltGHMbvr-cYDiFrJ8IltUzuc/s1600/download.png)no-repeat 15px 50%} .dlbutton, a.dlbutton { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcvli8ahoZeUOe1_GPRh36tzfUp7OtaJ1AGNmp7sNqx1l8wIhfK_SKVyri9eoD9AT5fNxhKVfdgUfX8N2IhrJyigOvnHd2XwhQeZBA0cuxNCuGXr6J60nltGHMbvr-cYDiFrJ8IltUzuc/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/AVvXsEjhuQMXmpwMZmlN3VTDlA4uATzyO-avWYa50HYZiITYKvYfUfHTL7tAdrIWgxflzCl74Q32cHaESJb_8FwyDjgmr7NQcNFUMcjzFcUE2Ub2qNid1pjOnLEuHqI0ynh-tewW0ykjBgL8kdE/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; }

 Bước 3: bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên
 trong đoạn mã phía dưới bạn thay KslZone Demo cũng như địa chỉ trang website thành của bạn vào và lưu lại.

<b:if cond='data:blog.url != &quot;http://www.kslzone.net/p/xem-truoc.html&quot;'><b:else/>
<script>

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://www.kslzone.net'>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>

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.

CÁCH DÙNG:
Để 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://www.kslzone.net/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.

Nguồn bài viết kslzone.net