TẠO TRANG XEM TRƯỚC CHO LINK DEMO VÀ DOWLOAD

Yoloooo! 500 anh em :v Hôm nay mình vừa phát hiện ra một thủ thuật khá hay nên lập tức viết bài hướng dẫn cho các bạn ngay :3 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 đó.



HƯỚNG DẪN THỰC HIỆN


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:

https://www.quocbaoblog.xyz/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 != "https://www.quocbaoblog.xyz/p/demo.html"'>
Thay https://www.quocbaoblog.xyz/p/demo.html bằng đường link của trang bạn.
Tiếp theo, 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: '- Quốc Bảo Blog 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='https://ww.quocbaoblog.xyz'>Quốc Bảo Blog</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&#39;tab-demo&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;view&#39;).style.top=&#39;0&#39;;document.getElementById(&#39;view&#39;).style.height=&#39;100%&#39;'>Remove</a>
</div>
<iframe id='view'></iframe>
</b:if>
Rồi lưu mẫu lại và vậy là xong!!

Cách sử dụng:
https://quocbaoblog.xyz/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ề 


LỜI KẾT

Vậy là mình đã chia sẻ xong rồi :3 các bạn hãy thử và bình luận bên dưới cho mình biết ý kiến nhá!! Chúc các bạn thành công.

26 Comments:

Post a Comment

  1. Replies
    1. temp tự edit nó vậy :) chứ chả như temp ăn trộm của m

      Delete
    2. a ăn trộm cái gì cơ ? K hiểu con người em luôn đấy =)

      Delete
    3. thì cũng có ai hiểu con người anh đâu chàng trai 2k4 =)

      Delete
  2. may thay temp này dễ nhìn hơn nhiều :3

    ReplyDelete
  3. Đó, xài temp gọn như này có phải hơn không :)) temp cũ bắt mắt quá

    ReplyDelete
  4. Replies
    1. Để a thử áp dụng cho blog a xem đc ko :)

      Delete
    2. Đã thành công :)

      https://www.hungcoder.com/p/link.html?url=https://www.hungcoder.com/2018/07/thay-doi-dinh-dang-permalink-cua-blogspot-giong-wordpress.html

      Delete