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 đó.
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 !
Nguồn : Aron - http://aron21vn.blogspot.com
Tạo trang xem trước Demo và Download cho Blogger
Reviewed by Kyo TVHon
22:45:00
Rating:
Reviewed by Kyo TVHon
22:45:00
Rating:
Công ty dịch thuật miền trung - MIDtrans có Giấy phép kinh doanh số 3101023866 cấp ngày 9/12/2016 là đơn vị chuyên cung cấp dịch vụ dịch thuật, phiên dịch dành các cá nhân, hệ thống thương hiệu Dịch thuật sài gòn 247 Dịch thuật chuyên nghiệp MIDtrans Vietnamese translation dịch thuật, phiên dịch sài gòn Dịch thuật Đà Nẵng Pro . Dịch thuật MIDtrans tự hào với đội ngũ lãnh đạo với niềm đam mê, khát khao vươn tầm cao trong lĩnh vực dịch thuật, đội ngũ nhân sự cống hiến và luôn sẵn sàng cháy hết mình. Chúng tôi phục vụ từ sự tậm tâm và cố gắng từ trái tim những người dịch giả. Hotline: 0947688883. Rất hân hạnh được phục vụ quý khách
Trả lờiXóa
Trả lờiXóaLALALOOOO…This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information... antares autotune crack