Lengkapi Blog Anda dengan Membuat Halaman Demo di Blogger

Berawal dari blogging sana blogging sini, akhirnya saya terhenti pada pada salah satu blog yang menamakan dirinya sebagai Kang Ismet. Saya tertarik dengan artikelnya dengan judul Membuat Halaman Demo dengan Toolbar di Blogger yang mana dalam artikel tersebut menjelaskan bahwa cara tersebut cocok bagi anda yang suka atau sering memberikan template.

Setelah berfikir-fikir, saya putuskan bahwa blog ini juga akhirnya menggunakan atau memiliki halaman yang dimaksud. Namun demikian bukan berarti saya juga memberikan template-template blog responsive, silahkan cari pada artikel saya disini dan disini. Ini terlebih kedepan saya akan lebih banyak lagi membuat artikel-artikel mengenai berbagi tips-tips blogging, yang mana menurut saya untuk mendukung semuanya "Halaman Demo" ini sangat cocok digunakan.

Membuat Halaman Demo di Blogger

Seperti kebanyakan orang yang akan menggunakan cara ini sering kali mengalami kendala dalam penerapan dimasing-masing blog mereka. Lihat saja pada kotak komentar di blog Kang Ismet masih ada saja yang mengalami kendala. Begitu pun dengan saya awalnya mengalami masalah juga yaitu halaman yang akan di redirect selalu yang muncul ke halaman statisnya saja.

Namun setelah saya amati dengan seksama, akhirnya blog ini sukses dengan menggunakan halaman demo.

Silahkan lihat disini Live Demo


Baiklah, untuk penerapannya saya langsung saja.

#Langkah 1, anda harus membuat halaman statis. Dalam hal ini kita samakan saja judul halamannya yaitu : "Halaman Demo" pada isi halaman bisa di kosongkan saja.

Saya asumsikan link halaman demonya seperti dibawah ini :

http://hanyapedia.com/p/halaman-demo.html

#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/AVvXsEgV51wQI6rISZdFSA59Si1LYd5Jo4zdxYRfP70V_6DyKWOn4KzJYSUufhHTblcyOvoPHlmFcldbJuPq0zfdl7yQUH24x82BQPeEfa2IKQm82R5U6t-zqb9IH1OihfSK70_smOhuWn19dSs/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/AVvXsEhccPiWJI3W9UB6ub1oRMV7XAZciP0xSg5YqGVzQRHeJPt1HQv_temVkEEC1Rxm0tz6hNBCeTwkVk6SiyD4jVQxqkClqcvP4BTXX3SKpgmEmmJS6Kb5P_-Sy1iNtDrgJk2Vub9eSs_5S1A/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/AVvXsEhccPiWJI3W9UB6ub1oRMV7XAZciP0xSg5YqGVzQRHeJPt1HQv_temVkEEC1Rxm0tz6hNBCeTwkVk6SiyD4jVQxqkClqcvP4BTXX3SKpgmEmmJS6Kb5P_-Sy1iNtDrgJk2Vub9eSs_5S1A/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tc791UBC267LH30oM2ovft4HlzfkblOVrPjNu9IQ93jr15NCbtOtdKL5_bWhthc8d4OelWUZFZYT61xN9FTWYBXO4ti4fUQAyD34as2L6AKolgS3Gs9wUMNmVMy-D24R8PjYKyKukgs/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tc791UBC267LH30oM2ovft4HlzfkblOVrPjNu9IQ93jr15NCbtOtdKL5_bWhthc8d4OelWUZFZYT61xN9FTWYBXO4ti4fUQAyD34as2L6AKolgS3Gs9wUMNmVMy-D24R8PjYKyKukgs/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/AVvXsEipmWqeGBSv2CNtO3Jj9UXCZDFAUy8xJJaqRjkj7ABYfydLOKnMvvTlpY2DexX_dfdWLquDWCIJaTS-3lzp59aKtJ0830heBFy-bp_-U_AI0B3yiJU-OcIjCL1w6lWvscLLABcIRmQte2A/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 != &quot;http://www.hanyapedia.com/p/halaman-demo.html&quot;'>

Langkah 4 : Lalu letakan kode dibawah ini tepat diatas </body>

</b:if> 

<b:if cond='data:blog.url == &quot;http://www.hanyapedia.com/p/halaman-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://hanyapedia.com'> Halaman 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>

Langkah 5 : Silahkan Save Template anda.

PENERAPAN :
Untuk penerapannya gunakan link seperti dibawah ini :

http://www.hanyapedia.com/p/halaman-demo.html?url=URL Halaman Demo disini&download=URL Halaman Download di sini

Catatan : Ganti URL yang disorot warna kuning dengan URL blog dan atau halaman blog anda.

Tips!
Bila anda mengalami kendala dimana halaman demo tidak ter redirect, anda harus menambahkan WWW pada alamat domain ada pada langkah 3 dan langkah 4. Ini di khususkan bagi anda yang menggunakan Top Domain yang di hosting di blogspot, sebagai contoh dari http://hanyapedia.com menjadi http://www.hanyapedia.com.

Silahkan lihat kembali disini Live Demo

SUMBER :
http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html