Laba-Laba Blog - Halaman demo sangat berguna untuk para pemilik website yang sering mempublikasikan artikel tentang template. Setiap artikel yang ada kaitannya dengan template, pasti ada tombol download serta demo dan itu merupakan syarat untuk artikel tentang template. Banyak sekali website-website yang membahas tentang artikel ini, namun kami baru mempublikasikannya karena kami terlebih dahulu mempelajari artikel ini agar anda bisa lebih paham tentang seluk-beluk artikel ini.
Halaman demo ini sangat cocok untuk anda yang suka mempublikasikan artikel tentang dunia template, karena halaman demo ini sangat efisien dan anda tidak perlu lagi membuat tombol demo. Bila anda menggunakan halaman ini, anda hanya perlu membutuhkan satu halaman yang kosong saja dan halaman demo ini, anda hanya tinggal mengubah link demo untuk template yang anda sedang bahas. Berikut, ikutilah langkah-langkah dibawah ini.
1. Dibuat di halaman statis.
2. Tidak perlu membuat blog baru.
3. Menggunakan tag kondisional peningkaran, sehingga loading lebih cepat.
4. Penambahan link download otomatis.
Silahkan anda ikuti langkah cara pembuatannya :
Langkah pertama : Buat Halaman Statis dengan judul Demo atau Demo Template, dll.
Langkah kedua : Masuk ke Template => Edit HTML, simpan kode CSS dibawah ini diatas ]]><b:skin> atau </style>.
#view {Langkah ketiga : Simpan kode dibawah ini, tepat dibawah kode <body>.
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/AVvXsEjgLGmkMh6q91BEhU44_Obxbu57R5EwkOaIVXZdPO4NchOTvJXn4PXC0QXk4bI_sP682rkNYQ1CZ16TQntB6UCv7mRS_zZLNk4J3RKduMFycB31ZFfMb3RfjPiAMy_m5xz6nxX3Yw0VKmg/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/AVvXsEgWX9jKJDOqf9bySQld8mgCjNMUlRNIBeUHyYtLEB52l1uNoDBHTjIEnE1iWnQqLFx5Xw1gARXoDPYxK3DHwPmMQGgdNPQGDarXpu50RZXHThnD7Ke8GoJuztp3KTLZLL0jDhqjjLR-Zyk/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/AVvXsEgWX9jKJDOqf9bySQld8mgCjNMUlRNIBeUHyYtLEB52l1uNoDBHTjIEnE1iWnQqLFx5Xw1gARXoDPYxK3DHwPmMQGgdNPQGDarXpu50RZXHThnD7Ke8GoJuztp3KTLZLL0jDhqjjLR-Zyk/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rJAGb-vHwtM8bCSkkEYYrcZb9l7Fh50YRhlGpc1gAjq6Mmivdx94KZoF-pDGFe3kXxNwvFXp-88jrH1e-FqAcEJKPc7gXwBB7wdw8V3r3U9b6vlS5Nx2ForO1dZ-k50kiU20vMvM0kg/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5rJAGb-vHwtM8bCSkkEYYrcZb9l7Fh50YRhlGpc1gAjq6Mmivdx94KZoF-pDGFe3kXxNwvFXp-88jrH1e-FqAcEJKPc7gXwBB7wdw8V3r3U9b6vlS5Nx2ForO1dZ-k50kiU20vMvM0kg/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/AVvXsEgEFxlXXKy-5QdDBkspE3OEcxmFPegvxrWSovL4-ZqVzOV6ETCYZztBagodQtygdEh8gnjsoaJoQrOtG4e2bXx7eo3dQtaJUVkQkOx8CLfVi2weq3XGNDg1mmKga1b92V8omOxkyGehIW0/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;
}
<b:if cond='data:blog.url != "http://muhammadagielk.blogspot.com/p/template-demo.html"'>Ganti kode yang diberi tanda dengan alamat website anda.
Langkah keempat : Simpan kode dibawah ini, tepat diatas kode </body>.
</b:if>
<b:if cond='data:blog.url == "http://muhammadagielk.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 kode yang diberi tanda dengan alamat website sobat, seperti http://muhammadagielk.blogspot.com/p/demo.html
Format Penulisan
Untuk penulisan URL template dan link download, gunakan format seperti ini:
http://muhammadagielk.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini
Tidak ada komentar:
Posting Komentar
1. Berkomentar haruslah sopan.
2. Jika ada kesalahan kata-kata dalam artikel saya, mohon dimaklumi.