Tạo trang xem Demo và Download cho Blogger/Blogspot

Với những bạn thường xuyên tải template blogspot từ các trang chia sẻ template thì chắc hẳn đã nhiều lần thấy trang xem trước template của web họ. Trang đó hiện ra khi bạn nhấn vào nút Demo để xem template, thường thì trên cùng của trang sẽ có thanh menu chứa nút Download, Remove và bên dưới sẽ hiển thị template Demo mà bạn muốn xem. Việc tạo một trang xem trước như vậy cũng không quá khó, nếu bạn muốn, bài viết này sẽ hướng dẫn bạn làm điều đó.

Tạo trang xem Demo và Download cho Blogger/Blogspot

Bước 1: Đăng nhập Blogger ~> Vào Trang ~> Nhấn Trang mới
Đặt tiêu đề trang là Demo và nhấn Xuất bản.
(Không cần điền nội dung gì vào trang này, chủ yếu chỉ quan tâm đến địa chỉ trang thôi)
Tạo xong bạn hãy ghi nhớ đường link trang, như của mình thì link trang như này:

http://demo-chubangaiti.blogspot.com//p/demo.html

Bước 2: Vào Mẫu ~> Chỉnh sửa HTML
Chèn thẻ điều kiện này vào bên dưới thẻ <body>

<b:if cond='data:blog.url != "http://chubangaiti.blogspot.com/p/demo.html"'>

Thay http://chubangaiti.blogspot.com/p/demo.html bằng đường link trang của bạn

Tiếp theo, chèn đoạn mã sau vào bên trên thẻ </body>

<b:else/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet' />
<style type='text/css'>
    body {
        background: #fff
    }
    
    #view {
        padding: 0;
        margin: 0;
        border: 0;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 93%;
        transition: all .4s ease-out
    }
    
    #tab-demo {
        width: 100%;
        height: 60px;
        top: 0;
        left: 0;
        background: #34495e;
        color: #fff;
        z-index: 99999;
        position: fixed;
        -webkit-transform: translateZ(0)
    }
    
    .closebutton {
        background: #2ecc71;
        text-align: center;
        height: 60px;
        padding: 0 20px 0 57px;
        position: fixed;
        top: 0;
        right: 0;
        line-height: 60px;
        cursor: pointer;
        color: #fff;
        right: 20px;
        transition: all .3s
    }
    
    .closebutton:before {
        content: '\f00d';
        position: absolute;
        left: 0;
        font-family: fontawesome;
        padding: 0 20px;
        font-weight: normal;
        font-size: 22px;
        transition: all .6s;
    }
    
    a.closebutton {
        color: #fff;
        text-decoration: none;
    }
    
    .closebutton:hover {
        background: #27ba66
    }
    
    .closebutton:hover:before {
        transform: rotate(360deg);
    }
    
    .dlbutton,
    a.dlbutton {
        background: #3f5870;
        text-align: center;
        height: 60px;
        padding: 0 20px 0 57px;
        position: fixed;
        top: 0;
        right: 146px;
        line-height: 60px;
        cursor: pointer;
        color: #fff;
        text-decoration: none;
        transition: all .3s
    }
    
    .dlbutton:before {
        content: '\f019';
        position: absolute;
        left: 0;
        font-family: fontawesome;
        padding: 0 20px;
        font-weight: normal;
        font-size: 22px;
        transition: all .6s;
    }
    
    .dlbutton:hover {
        background: #2c3e50
    }
    
    .dlbutton:hover:before {
        transform: rotate(360deg);
        content: '\f00c';
    }
    
    .demologo,
    a.demologo {
        padding-left: 75px;
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 60px;
        left: 20px;
        position: fixed;
        color: #fff;
        letter-spacing: .5px;
        text-decoration: none
    }
    
    .demologo:before {
        content: '\f108';
        position: absolute;
        left: 0;
        background: #2ecc71;
        font-family: fontawesome;
        padding: 0 20px;
        font-weight: normal;
        font-size: 22px;
    }
    
    .demologo:after {
        content: '- Chia Sẻ Không Giới Hạn';
        text-transform: capitalize;
        opacity: 0;
        visibility: hidden;
        padding-left: 5px;
        transform: scale(0.9) translate(-34px, 0);
        transition: all.3s;
    }
    
    .demologo:hover:after {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0) translate(0, 0);
    }
</style>
<script type='text/javascript'>
    //<![CDATA[ // Demo Page document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only function getQueryVariable(e){for(var r=window.location.search.substring(1),t=r.split("&"),n=0;n<t.length;n++){var a=t[n].split("=");if(a[0]==e)return a[1]}return!1}window.onload=function(){var e=getQueryVariable("url"),r=getQueryVariable("download");document.getElementById("view").src=e,document.getElementById("dl").href=r}; //]]>
</script>
<div id='tab-demo'> <a class='demologo' href='http://chubangaiti.blogspot.com/'>Chu Bằng AiTi</a> <a class='dlbutton' href='' id='dl'>Download</a> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a> </div>

Sửa lại tên và địa chỉ cho phù hợp với trang của bạn

Nếu blog của bạn đã có link Font Awesome rồi thì bạn có thể xóa bỏ

Cuối cùng Lưu Mẫu lại.

Demo Click here

Bước 3: Sử dụng trang xem trước khi viết bài
Ví dụ khi bạn viết bài về template, tại nút Demo thì các bạn chèn đường dẫn dạng sau

http://http://chubangaiti.blogspot.com/p/demo.html?url=Địa_chỉ_link_demo&download=Địa_chỉ_link_download

Thay Địa_chỉ_link_demo bằng địa chỉ của trang demo
Thay Địa_chỉ_link_download bằng đường dẫn để tải về

Lời kết

Vậy là bạn đã có cho mình một trang xem trước vừa tiện dụng lại vừa đẹp, bắt mắt. Hy vọng là bạn sẽ hài lòng với nó.
Có gì không hểu hãy để lại nhận xét phía dưới, mình sẽ hỗ trợ bạn1

Chúc các bạn thành công !

Blogs Chu Bằng Ai Ti

Tạo trang xem Demo và Download cho Blogger/Blogspot

1 comment