Tạo trang xem trước Demo và Download cho Blogger
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 trước cho Link Demo và Download trong Blogger
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://www.domain.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://www.domain.com/p/demo.html"'>
Thay http://www.domain.com/p/demo.html bằng đường link trang của bạn
</body><b:else/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.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: '- Demo Page';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://www.domain.com'>My Blog</a>
<a class='dlbutton' href='' id='dl'>Download</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%''>Remove</a>
</div>
<iframe id='view'></iframe>
</b:if>
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ỏ
Nếu blog của bạn đã có link Font Awesome rồi thì bạn có thể xóa bỏ
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Cuối cùng Lưu Mẫu lại.
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://www.domain.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ề
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ó. Chúc các bạn thành công !
Nhận Xét