 |
| 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.htmlBướ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('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>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ỏ
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.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://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ề
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 !