Penyusunan dokumen perencanaan tahunan Desa atau sering disebut dengan
Dokumen RKP Desa. Pada postingan ini akan dibagikan terkait dengan dokumen
RKP Desa ...
Halaman Demo dengan Toolbar pada Blogger
Akhir-akhir ini, demontrasi terjadi diseluruh daerah Indonesia, bahkan bisa dibilang hampir setiap hari. Ya mau gimana lagi, era demokrasi diwacanakan dan diterapkan untuk kepentingan negara yang kita cintai. Namun, pada artikel kali ini bukan pembahasan demontrasi yang dilakukan dengan koar-koar, melainkan untuk memperlihatkan atau menampilkan url (halaman) lain dalam satu wacana blogger.
Pembuatan ini sangatlah cocok untuk Anda pengguna/penyedia template seperti yang sering kita jumpai. Ingat betul dengan BTemplates, ZoomTemplates, ThemeForest, KlikTemplate, dll. Disana Anda akan ditujukan pada url yang sama akan tetapi dengan tampilan yang berbeda (non blogazine lo..!!!)
Pada blog ini juga tersedia halaman demo yang simple, silakan lihat untuk membuktikannya
https://idtutorplus.blogspot.com/search/label/url?url=......ISI URL yang Anda inginkan......
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/AVvXsEi1VC65zj468SAQwmBz7l7UVp4z-4VIKRpUoyVa-c9MNcjk2M0Y9AAUfPT06BZWxPqEwwEl7SVw8jFKQVVZfarN6-eEghNIOXb42B090sLf9XVAtkoyTMmR_EpxskQXyvFRTz8udS7vyTE/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/AVvXsEg_rUGLVI7kzJ9U7nScNzS4fE3cbTRUV4DAGLrEtG5axTa8qCBdGtOrllWnwrqUoG8_nbhRN6aJuANjpOw8hlBYuPzenx4AwUKm_CEY-e16xOMu4Pc8YKDO28UKQfGyXNQkjVchLuoD25k/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/AVvXsEg_rUGLVI7kzJ9U7nScNzS4fE3cbTRUV4DAGLrEtG5axTa8qCBdGtOrllWnwrqUoG8_nbhRN6aJuANjpOw8hlBYuPzenx4AwUKm_CEY-e16xOMu4Pc8YKDO28UKQfGyXNQkjVchLuoD25k/s1600/close.png)no-repeat 15px 50%;
}
.dlbutton:hover {
background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xQZZnJFnpi3tI02vWdq-_6B1jc8rfsNjCvgQbeeo2r-13PTeOmNaIZOt7FDszBzWXghgFfoJwPjgWNu5uXx8LMqRga6RwJ2mYmKEqCmBH4jZQ55tzX4hPAzaslUgJG-z7CjKQdLP_UU/s1600/download.png)no-repeat 15px 50%;
}
.dlbutton,
a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xQZZnJFnpi3tI02vWdq-_6B1jc8rfsNjCvgQbeeo2r-13PTeOmNaIZOt7FDszBzWXghgFfoJwPjgWNu5uXx8LMqRga6RwJ2mYmKEqCmBH4jZQ55tzX4hPAzaslUgJG-z7CjKQdLP_UU/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/AVvXsEiJ85l2_N2N59KkEt6Q2lZ4lsbjjh9TFz9cBOpEu8QQlUwrc7fnHnFGwgo0zMrN7rf4iVKZJGN-cBorXtAg0_olmI5DCtv6QkqC2fh2WzT1CGkKB4IcPKpq6xMt9meDfoWgawC0xqfJhdA1/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 != "https://url-blogAnda/p/demo.html"'></body></b:if>
<b:if cond='data:blog.url == "https://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 :
https://url-blogAnda/p/demo.html?url=URL Demo disini&download=URL Download di siniUntuk lebih jelasnya silahkan perhatikan kembali demonya.
2 comments
hapus yang sudah terpasang dan coba lagi...
good luck...!!!