Tạo trang xem trước cho Link Demo và Download trong Blogger

bởiDXOan -
9
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 đó.

Tạo trang xem trước cho link demo và download trong blogger
Tạo trang xem trước cho Link Demo và Download trong Blogger

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.dxoan.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.dxoan.com/p/demo.html"'>

Thay http://www.dxoan.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='//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: '- DXOan 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.dxoan.com'>Blog DX</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>

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='//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.dxoan.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ề

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 !
Tags

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

You may like these posts

9 Comments

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. Nam Ka12/25/17, 8:32 AM

    Mình tạo theo cách bạn hướng dẫn nhưng sao nó ra trang trắng vậy bạn ?
    http://homechiase.blogspot.com/2017/11/teamplate-blogger-minima-colored-3-mag-style.html

    ReplyDelete
  2. Đạt Nguyễn12/17/18, 4:01 PM

    Bạn có thể tham khảo 1 vài thông tin liên quan tới đây:
    đệm vạn thành cao su thiên nhiên demvanthanh.com
    đệm cao su liên á hà nội lienahanoi.vn
    gối cao su massage liên á lienahanoi.vn

    ReplyDelete
  3. vigreen3/30/20, 10:29 AM

    Thông tin bài viết rất hay, bạn có thể xem qua 1 số thông tin liên quan dưới đây:
    tranh dán tường hà nội
    hướng dẫn dán giấy dán tường
    giấy dán tường 3d giá bao nhiêu

    ReplyDelete
  4. Mohammed Gulam Rabbi4/11/21, 11:45 AM

    This is a very helpful website. We can find our needy post or tips from this site . I think it is essential for us.

    ReplyDelete
  5. Md Mijanur Rahaman (MR)7/9/21, 3:38 PM

    Hey Visitor !!
    Read Our Letest Article !!
    High search volume - low competition keyword
    How to do Affiliate marketing on Amazon, A to Z guide 2021  
    6 Ways to Make Money with SEO

    What is cpa online marketing

    The best way to earn Money from online for a student


    Love from mrlaboratory.info n

    ReplyDelete
  6. Md Mijanur Rahaman (MR)7/13/21, 4:46 PM

    Best Article !!
    Love from mrlaboratory.info ❤❤

    Read     Our Article !!    aat

    ReplyDelete
  7. https://www.gladwingroup.com/interactive-led-flat-panel-display-supreme-9-series.php interactive-flat-12/21/21, 12:24 PM


    interactive-flat-panel

    Adopt full aluminium alloy panel structure, anodized surface process, ultra-narrow frame, rounded corner design, fashion and beautiful appearance
    4mm tempered glass with anti glare 3.Advanced IR 20 touching technology.
    The OPS host module adopts plug structure design, internal Inter standard 80pin interface, without any external power line and signal line, which is convenient for
    inspection, maintenance and upgrade, and achieves the aesthetic effect of the machine

    ReplyDelete
  8. Mohammed Gulam Rabbi5/30/22, 4:41 PM

    I think it is essential for us.

    ReplyDelete
  9. Mohammed Gulam Rabbi6/6/22, 2:03 PM

    I think it is essential Blog for us.

    ReplyDelete
Previous Post Next Post

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !