Banyak saya temukan tutorial pembuatan halaman demo ini, namun saya bagikan sesuatu yang beda, diantaranya :
1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.
Silahkan sobat simak cara pembuatannya :
Langkah 1 : Buat Halaman Statis dengan judul Demo atau Demo Template dll.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.
Langkah 2 : Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau </style>
#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/AVvXsEiCh0SxGuTCCuFbuLRopuEXa1OKXidzQWAZF_B9RXCz8LaaVaZnDd9yadR6ckiB-mVgje4yOvpWFNqfv2xua9xo1-zsq3XqlNXo7SAfFykOtcxhM1bi_c564wSXnTXrprRGU5zH92ca2D8/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/AVvXsEjD09jog_MF3BoQA-qzZuR8sbUchuKZ4x1jB04qE0-wVgmH2sl_wdwSh472OFpkjFnqV_sX9JmTRjbXwv4ffZ8wln3LpMilppogpIAhK0bQm-_aBu52TyrcQwjXd-kDRgEAcm6XkZ2Diyk/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/AVvXsEjD09jog_MF3BoQA-qzZuR8sbUchuKZ4x1jB04qE0-wVgmH2sl_wdwSh472OFpkjFnqV_sX9JmTRjbXwv4ffZ8wln3LpMilppogpIAhK0bQm-_aBu52TyrcQwjXd-kDRgEAcm6XkZ2Diyk/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip6htKslOh3baEB_I43h6uFLV5BwfcctMJIH9SVNpJSU9zC2f1HAW-ooHqU7Z-1b09rZ6SL-Gpkw42lmCndo4ZGIIhq9NKsDRbjej6tD2tIfCP643RGUKISmk8gaQtTPqnu6Bxy9r4Dd0/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip6htKslOh3baEB_I43h6uFLV5BwfcctMJIH9SVNpJSU9zC2f1HAW-ooHqU7Z-1b09rZ6SL-Gpkw42lmCndo4ZGIIhq9NKsDRbjej6tD2tIfCP643RGUKISmk8gaQtTPqnu6Bxy9r4Dd0/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/AVvXsEg1MsmQ1bTBg1T_f1tQcD0Llr6dUtudiNM1GqGpyq6MazYF4nFbguqeO5wod2OkWDNlDZ_1710JpJVUK-9XwnNl7dEc86mAsDVlfiSGKE431L9JUv3yBVOZ076LrODXvcNcezTm6SX_RNQ/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;
}
Langkah 3 : Simpan kode ini tepat di bawah <body>
<b:if cond='data:blog.url != "http://blog.kangismet.net/p/template-demo.html"'>
Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti : http://namablogsobat.blogspot.com/p/demo.html
Langkah 4 : Simpan kode ini tepat di atas </body>
</b:if>
<b:if cond='data:blog.url == "http://blog.kangismet.net/p/template-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://blog.kangismet.net'>KI Template Demo</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>
Ganti lagi kode yang ditandai dengan URL halaman blog demo sobat.
Format Penulisan
Untuk pemanggilan URL template dan link download, gunakan format seperti ini :
http://blogsobat.blogspot.com/p/demo.htm?url=URL_Demo_disini&download=URL_Download_di_sini
Selamat berkreasi
Source: kangismet