Membuat halaman Demo dengan Toolbar di Blogger ~ blog sepot

Apa kabar sahabat BIE,.?? kali ini saya akan memposting tutorial blogger dari blog nya +Kang Ismet, sengaja saya tulis ulang di blog saya karena ada sahabat blogger yang menanyakan ke saya lewat chat facebook :) tentang bagaimana cara 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.

DEMO Klik disini !!!

Simak langkah² nya dibawah ini:

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 » 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/AVvXsEgy3lFTglAl6LYKSfuJNLDh2_yCoR3lr_64RppCDeQmVxXFvLMEG3CE72fJZ37w21eI0g7KdjgRvqUF7txKygyuXYzMvLJ7uFrOxRFoHOR29aIKE_-onBb2IHjR7X5k3MkoIcyaiufbMYo/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/AVvXsEgy3lFTglAl6LYKSfuJNLDh2_yCoR3lr_64RppCDeQmVxXFvLMEG3CE72fJZ37w21eI0g7KdjgRvqUF7txKygyuXYzMvLJ7uFrOxRFoHOR29aIKE_-onBb2IHjR7X5k3MkoIcyaiufbMYo/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbD7l-Q5FrOrX6_faDh47Rk6z20AFg-I2oDVdzNo83HOqvEMhFIDNl7o6t_tZ7fx6yb7G5RtBSA1NSFCihLCX_vpvIt2PDi6iqPxP9-ItUJUJyaMo_KrUQrHUhCpXJdZqohxvLdED2tKQ/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbD7l-Q5FrOrX6_faDh47Rk6z20AFg-I2oDVdzNo83HOqvEMhFIDNl7o6t_tZ7fx6yb7G5RtBSA1NSFCihLCX_vpvIt2PDi6iqPxP9-ItUJUJyaMo_KrUQrHUhCpXJdZqohxvLdED2tKQ/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/AVvXsEg1AwD3xyfqlmeBJUkgGVGwiU6am_R3I1m0ZMIAtY-SxcqUrqaZDYIVClInh4oNtyK2E1L-9fi0Ap7sc8w_O-yt9CsnKgP06_IiTUVuSQSdF9zfZJZwwhgt4E26DdSMqwMWCtR9ZJvC3GA/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 != &quot;http://irvan-efendy.blogspot.com/p/demo.html&quot;'>

Ganti kode yang ditandai dengan URL halaman blog demo sobat

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

</b:if> 
<b:if cond='data:blog.url == &quot;http://irvan-efendy.blogspot.com/p/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://irvan-efendy.blogspot.com'>BIE - 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 sobat.

Format Penulisan

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

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

Silahkan sobat diskusikan apabila masih ada permasalahan yang ingin ditanyakan. Semoga bermanfaat....

Sumber : Kang Ismet

Terima kasih telah membaca artikel tentang Membuat halaman Demo dengan Toolbar di Blogger di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.