Tạo trang Demo và Download với thanh công cụ cho Blogger

All Free Vn 8/01/2017

Hôm nay, mình sẽ hướng dẫn các bạn tạo 1 thanh công cụ dùng để cho khách xem trang Demo hoặc Download. Tùy theo mục đích của bạn sử dụng là gì mà bạn có thể áp dụng trang này, nó rất hữu ích cho bạn khi làm một trang tải giao diện, hoặc có thể cho người khác xem bất kỳ một trang web nào đó nhưng vẫn có thông tin của trang mình, để khi cần thì người xem có thể quay lại trang chủ của mình.

Cách làm rất đơn giản, hãy theo những hướng dẫn bên dưới là có ngay 1 trang Demo và Download tuyệt vời thôi. Bạn có thể truy cập vào đường dẫn bên dưới để xem thử:

Bước 1: Đầu tiên, các bạn tạo một trang trống, bằng cách vào Trang ➔ Trang mới. Ví dụ, mình tạo 1 trang có đường dẫn sau:
http://demo.allfreevn.com/p/demo.html
Bước 2: Thêm link này sau thẻ <head> vào giao diện của trang web bạn
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Lưu ý: Nếu trong giao diện của bạn có rồi thì không cần thêm vào.

Bước 3: Thêm đoạn CSS này vào trước thẻ ]] </b:skin>
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(https://lh6.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:#0379c4 url(https://lh6.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:#11b75b url(https://lh6.googleusercontent.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#11b75b url(https://lh6.googleusercontent.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://lh6.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://lh6.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: Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}
Bước 4: Thêm đoạn code sau vào trước thẻ </body>
</b:if>
<b:if cond='data:blog.url == "http://demo.allfreevn.com/p/demo.html"'>
<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='http://www.allfreevn.com'>AllFreeVn Templates</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 Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>
Lưu ý: Nhớ sửa tên và địa chỉ phù hợp với trang web của bạn.

Bước 5: Chạy thử code:
http://demo.allfreevn.com/p/demo.html?url=duong_dan_trang_web&download=duong_dan_file_download
Ví dụ:
http://demo.allfreevn.com/p/demo.html?url=http://www.ohvn.info&download=http://www.allfreevn.com
Tags

Đăng nhận xét

6 Nhận xét

  1. Nam Ka08:33, 23/12/2017

    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

    Trả lờiXóa
    Trả lời
    1. Jack Owen22:44, 23/12/2017

      Hj bạn
      Mình có kiểm tra code của bạn và không thấy đoạn Js trước thẻ đóng body đâu hết.
      Bạn vui lòng kiểm tra lại giúp mình nha

      Xóa
  2. Hùng Coder14:05, 16/02/2018

    Sao m` thêm đoạn code script vào /body thì nó lại báo lỗi nhĩ @@

    Trả lờiXóa
  3. Cường Nguyễn21:56, 23/02/2018

    Mình đã làm thành công, hơi delay tí tầm 1.5s nhưng cũng thanks bạn vì bài viết :D

    Trả lờiXóa
    Trả lời
    1. All Free Vn11:47, 26/02/2018

      Không có gì nhé. cảm ơn bạn đã ghé thăm

      Xóa

» Sử dụng tài khoản Google của bạn để bình luận.
» Không spam link, nếu spam sẽ bị chặn và nhận xét của bạn sẽ không được hiển thị.
» Khi đăng nhập xong, bạn nhấn vào chữ Thông báo cho tôi để nhận phản hồi.

Mặt cười
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)