Untuk blog penyedia template atau blog pembuat template pasti diperlukan demo dari template yang telah dibuatnya dan untuk setiap demonya harus ada link ke alamat demo tersebut. Untuk sebagian blogger Link keluar web mereka itu sangat berharga karena sangat berpengaruh terhadap blog mereka.
Setelah browsing di internet akhirnya saya menemukan tutorial yang di share oleh kang ismet ini dan telah saya coba dan Cara Membuat Halaman Demo dengan Toolbar di Blog berhasil saya buat untuk demonya silahkan lihat disini :
Untuk memasangnya silahkan masuk dulu ka akun blogger sobat
1. Kemudian buat satu halaman baru dengan judul sesuai dengan keinginan kamu. Setelah itu masuk ke Template > Edit HTML.
2. Kemudian cari kode </b:skin> atau </style> kemudian letakan kode ini diatasnya:
3. Letakan Script berikut dibawah kode <body>
Untuk memasangnya silahkan masuk dulu ka akun blogger sobat
1. Kemudian buat satu halaman baru dengan judul sesuai dengan keinginan kamu. Setelah itu masuk ke Template > Edit HTML.
2. Kemudian cari kode </b:skin> atau </style> kemudian letakan kode ini diatasnya:
#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/AVvXsEinDoDQZ7DkglbGF_dacTwlOoBl4Nfkg0-kRkAaI33vJnUoP2QVgxwjKAb900LKNl3uTue5WC_XXZ5YFwgdyS9w8S33GpY-VQlyc3N6QXx8pdmVR54kf7lAHwn0VTYTa8CzytlLsvHnpXQ/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/AVvXsEjVP7j0QPvOtkuI33FsEQe7siyxRO7UOJxzNXR_ijSdZtLa-4m7mifGI-JDuq0npmNxfMcS_jkwT8Ksso8AfDwWzbS91-5CgwZ48AKb06pWzQji91-5tsjryavw-zoJ2mL7t8NoqFiZX1A/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/AVvXsEjVP7j0QPvOtkuI33FsEQe7siyxRO7UOJxzNXR_ijSdZtLa-4m7mifGI-JDuq0npmNxfMcS_jkwT8Ksso8AfDwWzbS91-5CgwZ48AKb06pWzQji91-5tsjryavw-zoJ2mL7t8NoqFiZX1A/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3WoQgdSGFAyXjN29uh9NkynoORHKBh89A_Yh8gYMtuUfV-QPBkbLmbS4-T4RmjbR2swk8LGOtx9PHMsb6iBBuBYSLJLu_n4x0Je9L76lxsyf5lsm9G9f1nVhyphenhyphenINniUN5bDZssY0WISIY/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3WoQgdSGFAyXjN29uh9NkynoORHKBh89A_Yh8gYMtuUfV-QPBkbLmbS4-T4RmjbR2swk8LGOtx9PHMsb6iBBuBYSLJLu_n4x0Je9L76lxsyf5lsm9G9f1nVhyphenhyphenINniUN5bDZssY0WISIY/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/AVvXsEicbW59l7FBIqtcNO-p1eVnNSgLTcY93BGORWvXyif_Iji5jZHN032BHPlr_ffxSAPYjvkW301Txyw5WJuJuuhmkTugxiCxSsgGCDDzBSpD2kNAl2GyuGVSYAxkIrexlRjg7lZQhDCEoD0/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. Letakan Script berikut dibawah kode <body>
<b:if cond='data:blog.url != "http://indcreate.blogspot.com/p/demo.html"'>ubah alamat blog yang berwarna merah dengan alamat halaman yang tadi kamu buat
4. Cari kode </body> kemudian letakan script ini diatasnya:
</b:if>
<b:if cond='data:blog.url == "http://indcreate.blogspot.com/p/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("go")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='http://indcreate.blogspot.com/'>Indcreate Demo Page</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>Ubah http://indcreate.blogspot.com/p/demo.html dengan alamat blog demo yang kamu buat tadi, lalu ubah Indcreate Demo Page dengan Judul tulbar yang kamu inginkan
5. Simpan template.
Cara penggunaannya sebagai berikut
http://indcreate.blogspot.com/p/demo.html?url=URL Demo disini&go=URL Download di sinitinggal ganti http://indcreate.blogspot.com/p/demo.html dengan alamat halaman yang tadi di buat.
Sekian post kali ini semoga bisa bermanfaat selamat mencoba :D
sumber http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html
0 Komentar Untuk "Cara Membuat Halaman Demo dengan Toolbar di Blog Ala Kang Ismet"
Post a Comment
Berkmentarlah dengan baek dan sopan
- jangan melakukan spam ataupun sara Home