Cách tạo trang xem trước và tải về cho Blogspot

Cách tạo trang xem trước và tải về cho Blogspot

Hôm nay mình sẽ chia sẻ đến các bạn một thủ thuật Blogspot rất hay và hữu ích cho những ai làm trang download template hoặc theme đó là tạo trang xem trước demo và tải về chuyên nghiệp, đẹp mắt.

Cụ thể là khi bạn nhấn vào nút demo để chuyển sang một trang mới thì bạn sẽ được chuyển sang một trang trung gian của mình tại blog của mình chứa phần hiển thị của trang khác, vậy nên hôm nay mình sẽ viết bài hướng dẫn cách tạo trang xem trước và tải về cho Blogspot mà mình đã đọc được tại blog KslZone một cách chi tiết và dễ hiểu nhất.

[button-green url=”http://chamnhe.blogspot.com/p/xem-truoc.html?url=https://chamnhe.com&download=https://chamnhe.com” target=”_blank” rel=”nofollow” position=”center”] DEMO ONLINE[/button-green]

Cách tạo trang xem trước và tải về cho Blogspot

Bước đầu tiên là bạn cần tạo một trang mới và đặt cái tên tùy ý, ví dụ như “Xem Trước” và nó có đường link như sau:

https://chamnhe.com/p/xem-truoc.html

Sau khi tạo xong thì bạn không cần điền hoặc thêm bất cứ code nào vào trang này nhé, chỉ cần tạo một trang cho có thôi mà.

Tiếp theo là đến phần chèn CSS lên trên thẻ ]]></b:skin> trong phần code của template đang dùng.

#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(https://lh4.googleusercontent.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(https://lh4.googleusercontent.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(https://lh4.googleusercontent.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://lh4.googleusercontent.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://lh4.googleusercontent.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://lh4.googleusercontent.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}

Đây là đoạn CSS mặc định của bên blog kslzone mình lấy về, nếu bạn có kiến thức về CSS thì có thể edit lại theo ý mình.

Bước tiếp theo bạn tìm đến thẻ <body> và chèn đoạn mã này xuống dưới

<b:if cond='data:blog.url != &quot;https://chamnhe.com/p/xem-truoc.html&quot;'>

Do ở trên địa chỉ trang xem trước của mình lúc đầu tạo là như vậy, bạn cần thay đúng với địa chỉ blog của bạn nhé!

Tới đây bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên

<b:else/>
<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
window.onload = function() {
var url  = getQueryVariable("url");
var download  = getQueryVariable("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>

<div id='tab-demo'>
<a class='demologo' href='https://chamnhe.com'>Xem Trước Và Tải Về</a>
<a class='dlbutton' href='' id='dl'>Tải về</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Loại bỏ khung</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

Ở phần trên thì bạn thay mọi thông tin cũng như địa chỉ blog của bạn vào nhé!

Cách sử dụng trang xem trước và tải về thế nào?
Khi viết bài bạn chỉ cần đặt địa chỉ để người dùng chuyển đến

https://chamnhe.com/p/xem-truoc.html?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download

 

Tổng kết

Như vậy là bạn đã tạo trang xem trước và tải về cho Blogspot thành công rồi, nhanh và đơn giản đúng không? Nếu ai có thắc mắc gì có thể để lại comment mình sẽ giúp đỡ hết sức có thể trong giới hạn của mình 😀

Recommended For You

About the Author: Nguyễn Đức Anh

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!

1 Comment

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *