Membuat Halaman Demo dengan Toolbar di Blogger

Membuat Halaman Demo di Blogger / Blogspot - Apa kabar sahabat? setelah lama ga posting, sehubungan malas ngurusin isu klonengan dan berbagai kesibukan, akhirnya saat ini saya kembali membagikan tutorial Cara Membuat Halaman Demo 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, 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.

Silahkan sobat simak cara pembuatannya :

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. Simpan kode CSS ini di atas ]]></b:skin> atau </style>(biasakan backup dulu template takut terjadi error.)

#view {
	padding: 0;
	margin: 0;
	border: 0;
	position: fixed;
	top: 55px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 93%;
	background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWNhdGehyGDakedK5RBfF4GkTiavwMu1HlNACm6vr1hnXKK8GmQsAcYJU_6JteSmdXrqMektSEpyj2VUzPNUPHA4IKLwX5F6bsFIu6EVAi2TWmR8zBb8BqwNGCgobB0qqbtWqULyNctY/s1600/loader.gif)no-repeat center center;
	transition:all .4s ease-out;
}
#tab-demo {
	width:100%;
	height:55px;
	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/AVvXsEi4hAznCTE85vuSbkbU5179Z8_pnqbYJL9VZTHenj_uiGVHStiwdfXF7H3R18W0Gga9ms0PCzhmCdMYMggLYzDWA_PIAdCOtIfEtpPaxVbmiOAp-pRTDcDAs1V1wNDiHZrBbyKYBHu87c7NDquLO6HF8pJoMD7wu0B0AL8Q3SUG07tjs4hD_jLNOnp5EH9h/s15/close.png)no-repeat 15px 50%;
	text-align:center;
	height:55px;
	padding:0px 20px 0px 50px;
	position:fixed;
	top:0;
	right:0;
	line-height:55px;
	cursor:pointer;
	color:white;
}
a.closebutton {
	color:white;
	text-decoration:none;
}
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hAznCTE85vuSbkbU5179Z8_pnqbYJL9VZTHenj_uiGVHStiwdfXF7H3R18W0Gga9ms0PCzhmCdMYMggLYzDWA_PIAdCOtIfEtpPaxVbmiOAp-pRTDcDAs1V1wNDiHZrBbyKYBHu87c7NDquLO6HF8pJoMD7wu0B0AL8Q3SUG07tjs4hD_jLNOnp5EH9h/s15/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwYHPsfPd9u2BbNZiqrzxZZTb9In-80RkVAd8k2_U1zbVGxNnFaWfEQHxK8rSOfm__sLitp1UMDy2Tl6zc7wYc536BlmP2LwEISaqtzGGQsosiIzVwf3wuJ_tDBe1CHoyvq-bgeqSvgF-VOCkTp_zPJBTrggN5U1VPxLzQNlZ8h3CEXTGc1ihdcq8Ewc6/s20/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
	background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwYHPsfPd9u2BbNZiqrzxZZTb9In-80RkVAd8k2_U1zbVGxNnFaWfEQHxK8rSOfm__sLitp1UMDy2Tl6zc7wYc536BlmP2LwEISaqtzGGQsosiIzVwf3wuJ_tDBe1CHoyvq-bgeqSvgF-VOCkTp_zPJBTrggN5U1VPxLzQNlZ8h3CEXTGc1ihdcq8Ewc6/s20/download.png)no-repeat 15px 50%;
	text-align:center;
	height:55px;
	padding:0px 20px 0px 55px;
	position:fixed;
	top:0;
	right:158px;
	line-height:55px;
	cursor:pointer;
	color:white;
	text-decoration:none;
}
.demologo, a.demologo {
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtDHKIoy8NVREncnpffJE_buonCwF_lgKoEGT33r7oW4o3tzhwuYuHrt0jMJH1myEtktITMZxynPJyxphFYzZ358DxTgvvnCK9F_dBeyajx15dUPwrHKS1Wb-P-U7fwWjrOkebSOi5xx-wCGIJ7pwsJnrvHKoTdfcNhl3a-KOM5DM0lqR8IcC2XduV2q6t/s100/ki-logo.png)no-repeat left center;
	padding-left:45px;
	font-size:17px;
	font-weight:700;
	font-family:Oswald, Arial, Sans-serif;
	text-transform:capitalize;
	line-height:55px;
	left:25px;
	position:fixed;
	color:white;
	text-decoration:none;
	background-size: 35px 35px;
}

Simpan dulu Template. Untu mengganti Logo, ganti URL Logo di bagian .demologo, a.demologo.

Langkah 3 : Simpan kode ini tepat di bawah <body>

<b:if cond='data:view.url != data:blog.homepageUrl path &quot;/p/demo.html&quot;'>

Ganti kode yang ditandai dengan Path URL halaman blog demo sobat, seperti : /p/demo.html

Langkah 4 : Simpan kode ini tepat di atas </body>

</b:if> 

 <b:if cond='data:view.url == data:blog.homepageUrl path &quot;/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 dl  = getQueryVariable("dl")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = dl;
};
//]]>
</script>

<div id='tab-demo'>
<a class='demologo' href='/'>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 :

https://NAMA_BLOG.blogspot.com/p/demo.html?url=URL_DEMO&dl=URL_DOWNLOAD

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