Membuat halaman Demo dengan Toolbar di Blogger ~ Blog Alvin Warasi

Halaman demo ini cocok bagi Anda yang sering membagikan template. Bagi Anda yang masih belum faham, mungkin apabila Anda mengunjungi penyedia template blogger sering mendapatkan halaman demo dengan menggunakan toolbar seperti di BTemplates, Zoom Templates, ThemeForest, dan lain-lain.

Banyak saya temukan tutorial pembuatan halaman demo ini, namun saya share sesuatu yang beda, diantaranya:
1. Dibuat dihalaman statis.
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahkan link download otomatis.

DEMO Klik disini !!!

Simak langkah² nya di bawah ini:

Langkah 1 : Buat halaman statis dengan judul Demo atau Demo Template dan lain-lain.
Pada bagian isi, terserah tulis apa saja, atau Anda kosongkan juga tidak apa-apa Lalu publish.

Langkah 2 : Masuk ke Template Edit HTML Tambahkan kode CSS dibawah ini tepat di atas kode ]]></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(http://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#3A841A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGyLHmQS7uU2G-Ea6WTgQvXnvX5TEy6I7qRNflindORKInMPvKbn2ZmrspTe1PBphuRz_OI1pAMmtrVoaCddu_Uu91D45Od9Uky56bWzkm0Hns3JJuA5X2LBNxOUZjyANek30lddtbXY/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:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGyLHmQS7uU2G-Ea6WTgQvXnvX5TEy6I7qRNflindORKInMPvKbn2ZmrspTe1PBphuRz_OI1pAMmtrVoaCddu_Uu91D45Od9Uky56bWzkm0Hns3JJuA5X2LBNxOUZjyANek30lddtbXY/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXhoSu0fkQa300H_fSOjmz7L0RUza2tsYxIpvWxTb3Zx8NX8SMusgF7CQgUMxUTB3dRJDLrmUdxHGRelaIoRIe-Cg39OJVanex6o4Q10eQ0VL0nTO08q4lS08ELzAM5QOUyRrrFfBGTI/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXhoSu0fkQa300H_fSOjmz7L0RUza2tsYxIpvWxTb3Zx8NX8SMusgF7CQgUMxUTB3dRJDLrmUdxHGRelaIoRIe-Cg39OJVanex6o4Q10eQ0VL0nTO08q4lS08ELzAM5QOUyRrrFfBGTI/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/AVvXsEjOME1jhBNQYz-st2tODEU4vCGRsgoL54psysRTLyDPVFZBsGN67sv1fJWnCAwVJQPdj7a8Vkb6IUpE7GjeC4HgnQQaTvV1eq_BEQ6Iv6mpumde1Mf6rr6gSkKWUsETFf3VxbfEBk6FfBE/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 : Tambahkan kode ini tepat di bawah kode <body>

<b:if cond='data:blog.url != "http://the-warasi.blogspot.com/p/template-demo.html"'>

Ganti kode yang ditandai dengan URL halaman blog demo Anda.

Langkah 4 : Kemudian tambahkan lagi kode berikut tepat di atas kode </body>

</b:if> 
<b:if cond='data:blog.url == &quot;http://the-warasi.blogspot.com/p/template-demo.html&quot;'>
<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://the-warasi.blogspot.com'>Blog Alvin Warasi Template Demo</a>
<a class='dlbutton' href='' id='dl'>Download</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;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white; }
</style>
</b:if>

Ganti lagi kode yang ditandai dengan URL halaman blog demo Anda.

Format Penulisan

Untuk pemanggilan URL template dan link download, gunakan format seperti berikut :

http://blogsobat.blogspot.com/p/demo.html?url=URL Demo disini&download=URL Download di sini

Untuk lebih jelasnya silahkan perhatikan kembali demonya.

DEMO Klik disini !!!

Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

0 Comments

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar

Simak langkah2 nya di bawah ini:

Simak langkah² nya di bawah ini: