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 các bài viết về chia sẻ teamplate Blogspot, mình sẽ giới thiệu cho các bạn trang demo và download đẹp cho Blogger giống 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 giống 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://www.tinhocvietnam.net/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://www.kslzone.net/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://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>
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://www.tinhocvietnam.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.

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

Chia sẻ trang demo và download đẹp cho Blogger


2 comments:

All the comments on the website Vietnam Informatics will be moderated before being published on the blog. Note: If you leave backlink to your website, as long as accompanied by comments of Management commented that it will be accepted. If you want to display HTML code, you need to convert before using the tool below.


- You are free to comment with your own words if that is your personality
- All your comments are not controlled and will be posted immediately.
- Post by the blog's author wrote this yourself, you are free to copy without due acknowledgment; blog posts by the collector, you specify the source as blogs were recorded.
- We are not responsible for your comment ...

Everyone commented on Vietnam Informatics website will be moderated before being published on the blog. Note: If you leave a backlink to your website, as long as accompanied by appropriate comments, the comments will still be accepted. If you want to display HTML code, you need to convert before using the tool below.

 
Top