Membuat Halaman Demo Dengan Toolbar di Blogger - Halaman
demo ini cocok bagi sahabat yang sering membagikan template. bagi sobat
yang belum faham, mungkin apabila sobat mengunjungi penyedia template
blogger sering mendapatkan halaman demo dengan menggunakan toolbar
seperti di BTemplates, ZoomTemplates, ThemeForest, dll.
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.
Langkah Pertama : 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 Kedua : 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/AVvXsEg5wDYljdya5UdHlYCLqyDV5uMJDt2q8GkbqFftMfNJjpWOC2-x2_XyPmr3-QaxnK8eGaooid-fly_SlGjBM2Kk5M48bfJPnsKud_yChdEdLQ4jZQMBUyVCpyNvDbwEFh5QY9c5F7avWxI/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/AVvXsEi5Lv6J6RZDoQKy54CPTy3xOzJg-c0im5fygYfuKe69wstMEdYbFlbJ_Qv-a4DDPcCFApOVaHUt1IY1br897Bcq56cdER7YwoB58biC8hLtnI2avDiMOJCju80B4aYJV5EjwWvd19eTeE4/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/AVvXsEi5Lv6J6RZDoQKy54CPTy3xOzJg-c0im5fygYfuKe69wstMEdYbFlbJ_Qv-a4DDPcCFApOVaHUt1IY1br897Bcq56cdER7YwoB58biC8hLtnI2avDiMOJCju80B4aYJV5EjwWvd19eTeE4/s1600/close.png)no-repeat
15px 50%}
.dlbutton:hover
{background:#579c26
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYw4MLDfF2XrVjrxFnuKXzq9CYS4t4JKMTjkEPDf7R7obJ9fBkw6HgW1F2gBLJ3IQB5edysnMLo4CeHL1be4NslruPIgoj4Vq1Kup3Q5tWj2qq6ndWWUDJJBpnbmhNmU42RHy10HMmXKk/s1600/download.png)no-repeat
15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYw4MLDfF2XrVjrxFnuKXzq9CYS4t4JKMTjkEPDf7R7obJ9fBkw6HgW1F2gBLJ3IQB5edysnMLo4CeHL1be4NslruPIgoj4Vq1Kup3Q5tWj2qq6ndWWUDJJBpnbmhNmU42RHy10HMmXKk/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/AVvXsEgDaQ3OKUQTdKWuzqEUzcpnlezf9MbbAae-fKIe4bMRL5e9QM8LEArl_AQsFKG4BOZIemnzjlGB0JnpOcBqHq9OCxF9b9oQbR3-2lh8dSAGA7z5CD07QPdTVDB3-DpJ7DMm5qMlZPMCtQM/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 Ketiga : 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 Keempat : 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.
Posting Komentar