Chia sẻ trang demo và download đẹp cho Blogger

Nếu bạn là một trong những độc giả thường xuyên theo dõi blog KslZone.NET, thì chắc rằng có một vài lần các bạn sẽ thấy tại website mình, trong một số các bài viết chia sẻ và giới thiệu về template cùng một vài thủ thuật hướng dẫn, ví dụ như bài này "Zett - A Responsive Blogger Template", khi bạn nhắp 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.

Chia sẻ trang demo và download đẹp cho Blogger
Trang demo và download của KslZone
Tại trang này bạn có thể thấy, ngoài nội dung của trang demo ra thì trên cùng là thanh menu trong đó có chứa nút "Tải về" (là nút download) cho người dùng có thể tải trực tiếp ngay khi đang xem và nút "Loại bỏ khung" để khách truy cập có thể ẩn thanh này đi nếu không thích. Thì bài viết này mình sẽ chia sẻ & hướng dẫn các bạn làm ra một trang tương tự.

Tạo trang demo và download giống KslZone.NET

Theo mình được biết thì cũng có nhiều bài viết hướng dẫn thực hiện một trang như thế này nhưng cái nhược điểm hầu hết bọn nó khá khoai, vì nó load đủ hết mọi thành phần của trang website, cái phần demo chỉ là hiện đè lên website của bạn thôi, do đó việc tải trang chậm đi đôi chút. Ngoài ra thì trang đó được bố trí bằng CSS và nó tùy thuộc vào mỗi template để chỉnh cho đúng, do đó nếu bạn thay đổi template thì khá là mất công chỉnh sửa.

Thế trang này của KslZone có gì hot? Đối với trang mà mình chia sẻ sau đây, nó tương tự với thủ thuật "trang 404 hiển thị đầy đủ cho Blogger" mà trước đây mình đã chia sẻ. Mình sẽ ẩn đi toàn bộ những thứ có trong cặp thẻ body để khi tải trang nó chỉ tải những thứ cần thiết mà mình làm ở trang này thôi. Thôi chúng ta bắt tay vào việc nào.

Công việc đầu tiên để cho đẹp thì các bạn tạo một trang mới và đặt một tên mà bạn thích, ví dụ như tên là demo chẳng hạn và xuất bản trang này, sau đó ghi nhớ link của nó. Như trang hiện tại của mình thì mình đặt tên là "Xem Trước" và nó có đường link như sau
http://www.kslzone.net/p/xem-truoc.html
bạn không cần điền bất cứ nội dung gì vào trang này, nói chung chỉ cần tạo một trang cho có link để làm thôi.

Tiếp tục bạn chèn đoạn css này lên trên thẻ ]]></b:skin> trong phần code của template của bạn
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://2.bp.blogspot.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(http://2.bp.blogspot.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(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(http://3.bp.blogspot.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(http://2.bp.blogspot.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 căn chỉnh cho trang demo/download của chúng ta, bạn có thể tự mình làm lại theo ý bạn sau nếu như bạn không thích.

Tiếp tục ý tưởng như sau, chúng ta sẽ tạo một trang demo và download khi người dùng truy cập vào cái địa chỉ trang lúc nãy mà chúng ta đã tạo. Như khúc trên mình cũng nói là mình sẽ loại bỏ đi toàn bộ những thứ khác trong thẻ cặp thẻ body và chỉ có đoạn mã dùng để tạo trang demo và download này thôi, thế chúng ta làm sao? Đơn giản chỉ cần sử dụng thẻ b:if trong Blogger mọi thứ sẽ được giải quyết.

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;http://www.kslzone.net/p/xem-truoc.html&quot;'>
tại đây thì trang xem trước của mình có địa chỉ là thế, còn bạn thay lại cho đúng với địa chỉ trang 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='http://www.kslzone.net'>KslZone Demo</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>
trong đoạn mã trên phía dưới bạn thay KslZone Demo cũng như địa chỉ trang website của mình thành của bạn vào và lưu lại.

Cả 2 đoạn mã này sau khi bạn chèn xong chắc cũng hiểu cách thức mình tạo ra trang đó như thế nào, không tính phần Javascript nhé. Ở đây mình tạo ra thẻ điều kiện nếu là gặp địa chỉ trang demo thì trang đó mới có, và ngược lại nếu không phải trang demo thì blog sẽ hoạt động bình thường.

Sử dụng trang demo và download như thế nào?

Để sử dụng rất đơn giản khi tạo bài viết các bạn đặt địa chỉ sau cho người dùng chuyển đến
http://www.kslzone.net/p/xem-truoc.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download
trong đây nhớ thay Địa_chỉ_url_demo và Địa_chỉ_url_demo là 2 địa chỉ cần thiết của bạn.

Lời kết

Đơn giản như vậy là bạn đã có một trang demo và download đẹp tương tự như KslZone.NET. Vừa tiện cho người dùng, và chúng ta lại kiếm thêm được một ít lượt view cho website của mỗi người. Hiện tại thì mình cũng tương đối hơi thiếu ý tưởng về thủ thuật Blogger nên nếu bạn nào có ý tưởng gì mới hãy để lại cho mình biết nhé.

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   
Phụ trách thiết kế : Mr.Mika 
Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 
Phụ trách kỹ thuật và kinh doanh : Mr. Sơn
Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com