Những Plugin tối ưu hóa hình ảnh cho WordPress tốt nhất
Cách Sử Dụng Google Analytics - Công Cụ Không Thể Thiếu Đối Với Website
Hướng Dẫn Làm Trang Tìm Kiếm Tích Hợp Google Search Cho Blogspot
Hướng Dẫn Chèn Nút Chia Sẻ Trên Thumbnail Cho Bài Viết Blogger - Blogspot
Nhận làm logo wap/web cho toàn thể anh chị em!
 |
| Tạo trang xem Demo và Download cho Blogger/Blogspot |
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>1<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ỏ
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 !
Nhận Xét:
0 comments: