Membuat Demo Toolbar di Blogger

Imajinasi Asha

Halo, perrkenalkan aku Faycha Anastasya. Mau lebih tau tentangku? klik menu about.

Berbagi kebaikan walau hanya sebuah tulisan, mudah-mudahan menjadi ladang amal yang terus didapatkan.

Soundcloud

Ini post ketiga saya hari ini, ya mumpung ada ide dan ngotak-ngatik template blog saya jadi sekalian bikin tutor. Jika blog kalian adalah penyedia template atau membuat tutorial dengan live demo, pasti tidak asing dengan "Demo Toolbar". Yup, bagi kalian yang suka mencari template dan melihat live demo pasti tidak asing dengan toolbar tersebut. Nah bagi kalian yang belum tau, simak terus ya biar jadi tau :).

Untuk mengobati rasa penasaran kalian, bisa dilihat hasil demo toolbarnya dengan klik tombol dibawah ini.

Demo
Sudah dilihat hasilnya? ya kurang lebih seperti itu hasilnya. Keren? bukan saya kok yang buat, pembuatnya adalah +Kang Ismet di artikel "Membuat halaman demo di blogspot blogger". Saya hanya mengubah warna-warnanya saja :).
Oke, jika kalian mau membuat demo toolbar seperti ini cukup ikuti langkah dibawah ini.

Buatlah halaman demo di menu Page (Halaman Statis), isinya kosong atau bebas mau diisi apa :p.

Jika sudah membuat New Page, klik menu Template → edit HTML → copy and paste script dibawah ini tepat diatas kode ]]></b:skin>

/* IMAJINASI ASHA DEMO TOOLBAR */
#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:#104E5B;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#BB7E36 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUueeZEFkRCgzF227bFof_Y8g2hWifnDLt5tw02ezHINH4hyu6rMzMkqoeso4lrG19HSd7wrqYpjTB4pKVAUXDwL-pgMsABC1MGuhpoMdl7p1vBEhLgq6Jv0vzEyS2osinmP79zkFJeBA/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:#A66955 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUueeZEFkRCgzF227bFof_Y8g2hWifnDLt5tw02ezHINH4hyu6rMzMkqoeso4lrG19HSd7wrqYpjTB4pKVAUXDwL-pgMsABC1MGuhpoMdl7p1vBEhLgq6Jv0vzEyS2osinmP79zkFJeBA/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#A66955 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXiz-YDPnaBXOTKHuDgsohpXkuCfpuU9t9Ipl1Y8m9zqFMJzPoG1cTECxCoG4TGG5rKpIh9U9GuXqELRfIycD95l9LZJmhTJbwvUCPfQE4Z8KUe1JhPZu2waBhb0Pl7zGilcuw0fGIlA/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXiz-YDPnaBXOTKHuDgsohpXkuCfpuU9t9Ipl1Y8m9zqFMJzPoG1cTECxCoG4TGG5rKpIh9U9GuXqELRfIycD95l9LZJmhTJbwvUCPfQE4Z8KUe1JhPZu2waBhb0Pl7zGilcuw0fGIlA/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/AVvXsEivKeU1W-OCCTy5oPYtwe0OeYOiBJ41dNU43qnayNuX9WaS9mgMFpHngwzdmdReyRLpBIvwBI-7DYvpensV4fcO8iHBhWsbmUBq8am_cGQda448mVvqp0m5EvAUHAmLZ0KusKWhjZK49QY/s1600/logo-demo-template-imajinasi-asha.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;
}

Kemudian tambahkan script dibawah ini dibawah kode <body>
```
<b:if cond='data:blog.url != &quot;http://www.imajinasiasha.web.id/p/demo.html&quot;'>
```
Ubah alamat blog yang di mark biru dengan alamat demo blog kalian.

Tambahkan script Javascript dibawah ini diatas kode </body>

<b:if cond='data:blog.url == &quot;http://www.imajinasiasha.web.id/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://www.imajinasiasha.web.id'>Imajinasi Asha - 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>

Jangan lupa untuk mengubah alamat blog yang di mark biru dengan nama blog kalian.

Save Template.
Untuk menampilkan demo toolbar ini, kalian cukup copy and paste script dibawah ini di link artikel kalian. Jangan lupa untuk mengubah nama blog dari saya. Untuk cara tes dengan cepat, kalian bisa langsung coba pada address bar browser kalian :)
```
http://www.imajinasiasha.web.id/p/demo.html?url=URL Demo disini&download=URL Download di sini
```
Jangan lupa untuk mengganti alamat blog saya dengan nama blog kalian ya