Tạo trang demo và download giống Công DEV

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 congdev 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.

Blogger Demo Generator for Template Developers

Tạo hiệu ứng di chuyển nền chữ theo trỏ chuột đẹp mắt

Tạo trang demo và download giống congdev

Demo

Mục lục

Các bước thực hiện

Bước 1: Truy cập Blogger.com > Trang > Trang mới - đặt tiêu đề trang là "demo" rồi bấm "xuất bản" (Vậy là ta đã tạo được một trang với đường dẫn

http://ten_mien_cua_ban/p/demo.html

)
Bước 2: Tiếp theo ta chọn xuống phần Chủ đề > Chỉnh sửa HTML Chèn đoạn CSS dưới đây 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpXKPidKFrQV6JQ1SSOplaOBeeoy9GU9ZAhVwJ1qkaRHk6GPbxQgoz-HQMMhdeKjUZX9FhtSY2CmyFzBRw9N4tRygDycx9kbFiYf76yaRFU-UHCnuHO7Hi3OTh4wdE6ncXIRh0qnkFYQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3zpFOP_XvHOVtuoRmsaey0I76sorI2H2u_f4X-7IXP3Mz1zcx0Jym1t0crpYhgM4lqX75rxuJGeAAxILbfc0lFKNA4V17uWMQPPffHYf9CjDDLhbsPIYWt9BDGnjEsAAFdYtofJQedc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3zpFOP_XvHOVtuoRmsaey0I76sorI2H2u_f4X-7IXP3Mz1zcx0Jym1t0crpYhgM4lqX75rxuJGeAAxILbfc0lFKNA4V17uWMQPPffHYf9CjDDLhbsPIYWt9BDGnjEsAAFdYtofJQedc/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7hfSe8FDkvLWvqYNQa2Tpp52SxcLwuEZmw-EjOZBN42-chm8etgmQ1mu2bLW6ot-uFDlnCboO8bM4mLEENgKKjKEWRX82eIGrBX_II7pba2d3bgu8x8xQN3vfmGWafIHn5_ZAxiSwXTk/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7hfSe8FDkvLWvqYNQa2Tpp52SxcLwuEZmw-EjOZBN42-chm8etgmQ1mu2bLW6ot-uFDlnCboO8bM4mLEENgKKjKEWRX82eIGrBX_II7pba2d3bgu8x8xQN3vfmGWafIHn5_ZAxiSwXTk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFdLENTMzrHbh9Z-xnyAvLOFnRCy0INOxT87jywREcfOtGBimhSII8u1wepVDQ6Mg8nPueleHvVt_Jub1JN3xiJX_fBICn-OBFiglFqoK2rO-va5yiBM4Tnnafwx2_VwTepyrR2KVwnE/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;
body {
background:white;
}
}

đâ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.

Bước 3: Chèn đoạn Jquery này trước thẻ

</body>


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

Bước 4: Chèn đoạn code này vào trong trang ta tạo ở bước 1 hoặc có thể chèn nối tiếp phần Jquery trên thẻ

</body>

(Bạn nhớ thay lại cho đúng với địa chỉ trang của bạn nhé!)


<b:if cond='data:blog.url == &quot;http://congdev.blogspot.com/demo.html&quot;'>
<div id='tab-demo'>
<a class='demologo' href='http://congdev.blogspot.com'>KHUNG THỬ 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'></iframe>
</b:if>

Hướng dẫn sử dụng

Để 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. Trong đoạn mã trên phía dưới bạn thay Địa_chỉ_url_demo và Địa_chỉ_url_demo thành của bạn vào và lưu lại.

http://tên_miền_web_của_bạn/p/demo.html?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download

Ví dụ:

https://congdev.blogspot.com/p/demo.html?url=https://blanterswift.blogspot.com&download=https://drive.google.com/open?id=16o-EvpJ_G8wd0Sdx1s9i_NEjaJWORAkW

Kết quả

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ư Congdev. 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é.

Tags: #blogspot, #demo, #template

7/13/2018 Dlee191 bình luận