Membuat Halaman Demo Di Blog/Blogger

Membuat Halaman Demo Di Blog/Blogger - Sehubung kemarin ada yang tanya ( Bagaimana Cara Membuat Halaman Demo Di Blog ) dan kali ini Firman Blog akan membagikan Tutorial Blogger Membuat Halaman Demo Dengan Toolbar Di Blog.

Halaman Demo ini sebenarnya udah banyak di temukan di berbagai website seperti di BTemplate, ZoomTemplate, ThemeForest, dll..

Cara Pembuatannya :
1. Buat Halaman Statis dengan judul Demo atau Demo Template.

2. Masuk Ke Template > Edit HTML, Simpan Kode CSS 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/AVvXsEhZinvDyGhmoQsUdySqqJRsmmKARS49StgsQtknO94qSdaKL15gm_f0OO-TKr5r4WBiHVw_rp29AT2EWTMK4ypFwPlMHcHVlUWmDt8q-NywN55IG-WHZ9mNbBVhC3w11PTSQvQgbY__ARU/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/AVvXsEi9xF2iBAWe0ouvz_SX1FokwVhNLpyOsluyB4GEiqtLcO7-J0PRhu9-AQr4I_V3QuhOX6nCT7iB-gzpjNPwk1ECBJCdICvo1LNYN80ZZfKHqXDwGhKZ2uqKK1yZwrk8fhdLzoXFcofJH28/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/AVvXsEi9xF2iBAWe0ouvz_SX1FokwVhNLpyOsluyB4GEiqtLcO7-J0PRhu9-AQr4I_V3QuhOX6nCT7iB-gzpjNPwk1ECBJCdICvo1LNYN80ZZfKHqXDwGhKZ2uqKK1yZwrk8fhdLzoXFcofJH28/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQer2KXFA8a2EwU76W1rj6wWxdxFyVbJmBqZh95Ahq5o9aRJ2LObIeaVT9UYs1tAJh-X2UO2aE62hcL58XimlbUkLLh2Qvpsv-xhY62lg9tyLJ0a7M0qHsiUe7OReYyM_mksYbhvwOgHk/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQer2KXFA8a2EwU76W1rj6wWxdxFyVbJmBqZh95Ahq5o9aRJ2LObIeaVT9UYs1tAJh-X2UO2aE62hcL58XimlbUkLLh2Qvpsv-xhY62lg9tyLJ0a7M0qHsiUe7OReYyM_mksYbhvwOgHk/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/AVvXsEhhlXPrsKYTc-wW_B9PIn6q4VlIAZq9-ARGqnv2-PpkGnsqeQyI70t3fYLWaJxiZ2AXLCVGN9AEEMTRtTLX-e7VcM3x_cBjskEpaPqz3Haf5Y_clFQR_pUZVk0b7LJbNGItuXxanlfT8ZA/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;
}

3. Simpan kode ini tepat dibawah <body>

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

Ganti http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html dengan url yang udah di buat tadi.

4. Simpan kode ini tepat di atas </body>

</b:if>

<b:if cond='data:blog.url == "http://firmansyahnuralifrohman.blogspot.com/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 http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html dengan url yang sudah di buat tadi.

Format Penulisan :
Untuk pemanggilan URL Template Dan Link Download, Gunakan Format Ini

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

Untuk Lebih jelasnya silakan lihat demonya :
Demo

7 blogger-facebook

Adetya Purwadita

4/04/2014

work gan, thanks tutornya

Unknown

Ya sama - Sama :D

Admin

6/24/2014

Thanks gan tutorialnya

antoncabon

11/16/2014

ada cara lain ga selain caranya kang ismet ini mas?

Anonymous

2/11/2015

mantap ni gan, salam bloger

5/01/2016

Thanks gan, kodenya wok. jadi semangat lagi bikin tutornya nih

SHOLEHUDIN

2/07/2018

berarti template yang ada di halaman demo sama dengan template yang kita terapkan sekarang? kalau misalkan kita mau menampilkan demo template yang belum pernah kita gunakan sebelumnya bagaimana mas? mohon bantuannya mas...

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
Untuk pertanyaan di luar topik artikel silahkan tag [OOT]
menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>
menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Tools Konversi