Cara Pembuatannya :
- Langkah 1 : Buat Halaman Statis dengan judul Demo atau Demo Template dll,
- Langkah 2 : Masuk ke Template ->
Edit HTML. Simpan kode CSS ini di atas]]></b:skin>atau</style>
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish
#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/AVvXsEhUUqx_Cx94QoekWcCJ53CDD4ghc6n-XPsgxEkuYPWzKlq2sqgHdCnr2UDMIxLCLLh9YI2CAk4Rm3IFxkad4TyteC0Nm-VkBFYECkFjDuIgJeFH4_G_x2j2uWCZZY5Wy3r8iIKGl29Aze0/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/AVvXsEgy7ckPcuYDSOE0y_Cmuemlfqf21vvU3v-ZXHqJtxyq8cygvI7Hd4Aj_bOLTu-OCOt_j16rYUmiwSGUParoNv_2tVygRmv_q0bObPjo8dT3u8r9HGBbPCtl2mhU_7mqSJKq8qs-3v2US2U/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0 20px 0 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/AVvXsEgy7ckPcuYDSOE0y_Cmuemlfqf21vvU3v-ZXHqJtxyq8cygvI7Hd4Aj_bOLTu-OCOt_j16rYUmiwSGUParoNv_2tVygRmv_q0bObPjo8dT3u8r9HGBbPCtl2mhU_7mqSJKq8qs-3v2US2U/s1600/close.png)no-repeat 15px 50%;
}
.dlbutton:hover {
background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vGe-V_pui6ZBlgkNQfej6HJUD3KMzfJMmjaQUw8riMXLUieGvZFyTmIERZeSIiHSBWyG0Ea1vjMahUn1MyggC_IQLUggPuHNbqy9zMzGhyphenhyphen7pEbv7INekvf6s4a7q2vx2Uy_N27Bs1y4/s1600/download.png)no-repeat 15px 50%;
}
.dlbutton,
a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vGe-V_pui6ZBlgkNQfej6HJUD3KMzfJMmjaQUw8riMXLUieGvZFyTmIERZeSIiHSBWyG0Ea1vjMahUn1MyggC_IQLUggPuHNbqy9zMzGhyphenhyphen7pEbv7INekvf6s4a7q2vx2Uy_N27Bs1y4/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0 20px 0 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/AVvXsEgfcN0enPWaUsN6TkyhjcSPH8S0BnPaAi0t9O6-Q90arWq4FG58dYDxcHGiBbSSiLM01mb72AwdXM640sg1gPSjZYezEOWO3bCp0U65WOtdWDyItDaeRZexxGFCfsMvvc-6S7Nqw-64j567/s1600/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;
}<body><b:if cond='data:blog.url != "http://url-blogAnda/p/demo.html"'></body></b:if>
<b:if cond='data:blog.url == "http://url-blogAnda/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("download")
document.getElementById('view').src = url;
document.getElementById('dl').href = download;
};
//]]>
</script>
<div id='tab-demo'>
<a class='demologo' href='Nama Blog Anda'>Klik 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 lagi kode yang ditandai dengan URL halaman blog demo sobat.
Format Penulisan
Untuk pemanggilan URL template dan link download, gunakan format seperti ini :
http://url-blogAnda/p/demo.html?url=URL Demo disini&download=URL Download di sini
0 comments:
Posting Komentar