Blog
Android
iOS
WP OS
- Lúc: 18:49
Với những người thường xuyên tải template blogspot từ các trang chia sẻ template khác nhau thì chắc đã nhiều lần thấy trang xem trước demo template của blog 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 bạn cần tạo một tramg như vậy không hề khó. bạn chỉ cần làm theo bài huosng dẫn sao.
Bước 1: Đăng nhập Blogger => Vào Trang => Nhấn Trang mới
Bạn Đặt tiêu đề trang là Demo và nhấn Xuất bản.
(Không cần điền nội dung gì trong trang này, chủ yếu hãy quan tâm đến địa chỉ trang)
Tạo xong bạn hãy ghi nhớ đường link trang, như của mình thì link trang như này:
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ẻ
Tiếp tục, chèn đoạn mã sau vào bên trên thẻ
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
Lời kết
Vậy là bạn đã có cho mình một trang xem trước thật tiện lợi. chuẩn đẹp :v. . Chúc các bạn thành công với bài hướng dẫn.
Bước 1: Đăng nhập Blogger => Vào Trang => Nhấn Trang mới
Bạn Đặt tiêu đề trang là Demo và nhấn Xuất bản.
(Không cần điền nội dung gì trong trang này, chủ yếu hãy quan tâm đến địa chỉ trang)
Tạo xong bạn hãy ghi nhớ đường link trang, như của mình thì link trang như này:
http://kenhtai2.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://kenhtai2.blogsot.com/p/demo.html"'>
Thay http://kenhtai2.blogsot.com/p/demo.html bằng đường link trang của bạn
Tiếp tục, chèn đoạn mã sau vào bên trên thẻ
</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: '- Kenhtai2 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://kenhtai2.blogsot.com'>Blog KT2</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 blogspot của bạn có link Font Awesome rồi thì có thể xóa bỏ:
Nếu blogspot của bạn có link Font Awesome rồi thì 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://kenhtai2.blogsot.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 thật tiện lợi. chuẩn đẹp :v. . Chúc các bạn thành công với bài hướng dẫn.
0 nhận xét