Cara Membuat Halaman Demo Template di Blog

Ok halo gan! Bertemu lagi dengan gua kali ini gua akan ngasih tutorial buat lu semua. Bagi agan yang udah membuat blog template tapi bingung gimana cara buat halaman demo nya. Nah gua akan memberi lu tutorialnya "Cara MMembuat Halaman Demo di Blog" Nah bagi yang belum tau tutorial nya Langsung saja Simak Baik Baik!

✔ Cara Membuat Halaman Demo Template di Blog

1. Buka Blogger agan DISINI

2. Pilih Laman >> Laman baru >> Buat Laman Kosong

3. Lalu, Pilih Template >> Edit HTML

4. Masukkan CSS Dibawah ini Diatas Kode ]]></b:skin>

#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/AVvXsEgMCeFmGJR1d_mqImKPD6bzyUayOI_mGKVjeTbW-kRX2LUb9Jf1C7D5GOqo0Ov-79jp6-wGVtIBI4cnlGyf4Ufp-pY6kLrku6r5ijXP77WYDm_KqONDGAI2CRDMu9R7BVhjpEW5DE0yNHY/w128-h54-no/Loading8.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/AVvXsEhKKIsmSGaqQwcWdA1HTKdtuN7gVoQII_cFtVH3AX-knz0zQodEX2jXoHU5Tkjl35ak0cK3HzfcLuUVnXUBnxk9IA1fkTs_O6C6V6wxKsIkJIw1j-JYeCkPb8ABmUE45pLqO3ptvW0cl48/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/AVvXsEhKKIsmSGaqQwcWdA1HTKdtuN7gVoQII_cFtVH3AX-knz0zQodEX2jXoHU5Tkjl35ak0cK3HzfcLuUVnXUBnxk9IA1fkTs_O6C6V6wxKsIkJIw1j-JYeCkPb8ABmUE45pLqO3ptvW0cl48/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfTt25MNrW8k1o1neZTgCsuhHXFsgEvzBxTLHKrwkXlw8eBY8zE7f9FsVlGADafscCIF5xjTCAHcN8FkBOvW4bbzezwZXclbuSuTjBQn1bgSvEl27xHX1G72EA_BrX6998mL9DK2poAI/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfTt25MNrW8k1o1neZTgCsuhHXFsgEvzBxTLHKrwkXlw8eBY8zE7f9FsVlGADafscCIF5xjTCAHcN8FkBOvW4bbzezwZXclbuSuTjBQn1bgSvEl27xHX1G72EA_BrX6998mL9DK2poAI/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/AVvXsEhjh7DJwx-R0o4-PBfeeq9URDaxiCNas-PJOPXvnqZj2rkiAPPGF_DR9vYIyIM4WXIeHlUmn5dqitnw4O5Z-AeGKW4Ju9O-Gz5iQQyfYr6PR4jPorMWkSaLCurzg-RJ7jr4ymZaC2NbyTg/s640/TEMPLATES-DEMO-LOGO4.png)no-repeat left center; background-size: 50px 50px;
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;
}

Note : Kode yang berwarna kuning itu silahkan ganti dengan url gambar logo agan

5. Lalu masukkan kode dibawah ini dibawah kode <body>

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

Note : Ganti kode yang berwarna merah menjadi url laman kosong yang agan buat tadi

6. Sekali lagi :v, masukkan kode dibawah ini Diatas kode </body>

</b:if>
<b:if cond='data:blog.url == "http://allgames-templates.blogspot.com/p/demo-templates.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://www.allgames-templates.blogspot.com'>ALLGAMES TEMPLATES - DEMO Templates</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

Note : Ganti kode yang berwarna Merah menjadi Url laman kosong yang agan buat Tadi

Note 2 : Ganti Kode yang berwarna kuning Menjadi Url Blog agan

Note 3 : Ganti kode yang berwarna biru Menjadi Nama Blog Agan

7. Simpan Template!

Sekian tutorial dari gua, jangan sampai terlewat dari posting selanjutnya dengan cara Berlangganan Lewat Email dibawah Ini GRATIS!!

.

Cara Membuat Halaman Demo Template di Blog

0 Response to "Cara Membuat Halaman Demo Template di Blog"

Posting Komentar