Saya berterimakasih kepada blog kang ismet yang telah memberikan tutorialnya. Kali ini saya akan membantu bagi sobat yang ingin menerapkan tutor ini diblognya.
Template yang saya shere diatas adalah buatan dari Arlina. Yang bernama Minima Colored 2.1 Silahkan bagi sobat yang ingin mendownloadnya. Dan saya ingatkan untuk jangan pernah membuang credit link ditemplate seseorang. Hargai yang membuat templatenya.
Kembali pada tutorial kali ini, saya tidak mau banyak berbicara terlalu banyak lagi. Pastinya sobat langsung ke tutorialnya. Oke, lihat dan ikuti langkah dibawah ini:
Ikutin Langkah dibawah ini:
1. Masuk keblogger, buat terlebih dahulu laman yang ingin kita jadikan tempat download dan demonya.
Contoh: http://minandzgn.blogspot.com/p/demo-template.html
2. Masuk ke Template > Edit HTML > cari kode </style> atau ]]></b:skin>
Masukkan kode dibawah ini tepat diatas kode tadi.
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:#3e2723 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKnPiF_57Rwep6GuPDKVKks9WQA0QdDXJT0UHISEOqGq4u3QD-4SPPbtrMX-cKjJdeIl2nBcP1LjqpgDFhpkXed8buNHsUmiyKWpXnOSE5UvHUTaLUUazQ6h7YYIflkpMcMJSg6PY1b8Q/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:#c41411 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYAdNlwP7I3bFUpy0ae4i79z7suG2rOTpDW5-g7GL2fB-knvN_Ah3kJne43oTMpBONiV9o4vm_NuYuJZnWuXzXDgadgHnGnogAVYuozB284L7SFj-gjntp6f3xl0bzVRLYCb82Tos49w/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:10px;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#c41411 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYAdNlwP7I3bFUpy0ae4i79z7suG2rOTpDW5-g7GL2fB-knvN_Ah3kJne43oTMpBONiV9o4vm_NuYuJZnWuXzXDgadgHnGnogAVYuozB284L7SFj-gjntp6f3xl0bzVRLYCb82Tos49w/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQF4n5-2V81VKhTVj5Cj0pDx98hik7Gl22TThkykl09lGbs2jc7rpuFF-f0qw26VZwrfRBz0yiTFOxoIU1eotkUFzAescucYDg7Ext2gthahyclxPfLbzXF7YTWemovyZnlGOHQGCJ9Vo/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQF4n5-2V81VKhTVj5Cj0pDx98hik7Gl22TThkykl09lGbs2jc7rpuFF-f0qw26VZwrfRBz0yiTFOxoIU1eotkUFzAescucYDg7Ext2gthahyclxPfLbzXF7YTWemovyZnlGOHQGCJ9Vo/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:140px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBg57K4SFG_6JcwLkXQ808mLD_V2ctvHQhvCLPV5VvTbIBJH0shvdxAX3ztcapy2m2j5_AWK4kWqjcGq5q0JNPJs-Pe-mVN_K-yktEpbrZ6wBFTVSWe4RdOqe2DbyIqyf0eEms0wMNdEs/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. Tambahkan kode dibawah ini tepad dibawah kode <body>
<b:if cond='data:blog.url != "http://minandzgn.blogspot.com/p/demo-template.html"'></b:if>Ganti Kode http://minandzgn.blogspot.com/p/demo-template.html dengan URL Laman sobat sendiri.
4. Langkah selanjutnya masukkan kode dibawah ini tepat di atas kode </body>
<b:if cond='data:blog.url == "http://minandzgn.blogspot.com/p/demo-template.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://minandzgn.blogspot.com/'>Minan Design - 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 DEMO dengan URL-DEMO sobat sendiri
5. Simpan.
Dan langkah terakhir menerapkan tombol DEMO di dalam postingan untuk memperlihatkan demonya dengan kode dibawah ini:
http://URL-BLOGSOBAT.blogspot.com/p/demo.html?url=URL-DEMO-DISINI&download=URL-DOWNLOAD-DISINIGanti URL-BLOG-SOBAT dan URL-DOWNLOAD-DISINI
Sekian untuk tutorial Cara Menambah Halaman Demo dan Download ditoolbar Blogger. Semoga bermanfaat.
0 comments: