Cara membuat tombol DOWNLOAD dan DEMO di Blog. Tutorial berikut ini tentang
Cara membuat tombol DOWNLOAD dan DEMO Keren di Blog.
Biasanya membuat tombol download dan demo ini adalah ketika memposting
artikel yang membutuhkan demo, misalnya ketika memposting mengenai
template blog ataupun widget blog dan lain sebagainya.
Sebelumnya
seocips.com telah
membagikan beberapa template blogger seo friendly. dan mungkin saja akan
saya gunakan juga tombol download dan demo seperti dibawah ini. Sobat
juga dapat melihat tombol DEMo dan Download lainnya dengan efek slide di
artikel seocips yang berjudul : membuat
demo dan download Button dengan efek slide.
Ok berikut ini adalah cara membuatnya :
1. Taruh kode dibawah ini diatas kode
]]></b:skin>
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none;
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:
8px 80px !important; background: #E55E48; color: #fff
!important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0
1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color 1s ease-out 0s;
-moz-transition:background-color 1s ease-out 0s;
-webkit-transition:background-color 1s ease-out 0s;
-o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none;
-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding:
8px 80px !important; background: #5FAAE3; color: #fff
!important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0
1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color 1s ease-out 0s;
-moz-transition:background-color 1s ease-out 0s;
-webkit-transition:background-color 1s ease-out 0s;
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242;
text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222;
-webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242;
text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222;
-webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
2. Save template.
3. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML.
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.seocips.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.areasatu.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>
Cara diatas adalah
tombol halaman demo yang biasa saja tapi bagi
anda yang ingin membuat halaman demo menggunakan halaman statis atau
menggunakan toolbar seperti di BTemplates, ZoomTemplates, ThemeForest,
adalah seperti berikut ini :
1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.
Berikut ini adalah cara membuatnya :
1. Buat Halaman Statis dengan judul Demo atau Demo Template dll.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.
2. Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas
]]></b:skin> atau
</style>
#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/AVvXsEgcx8Z8WR0O24JgBzjErjuid1syNJqaaGO2lKYJ6LujzRBC5eNW6Lr6ohTBZn3PBvFvgeRjtA0sVXq0ZuMwLARHxU33dWXZLauUch6vsu06AD4jqRhFHIN3bwWJA5LRCkZaRwyCAKNxI_0/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/AVvXsEij_kddOnkxR-_a3UuJ-n9_A2CTN-uvc9-xoCayFdc-MTpvidYUsDDBGt45QrDSJb1cXRjDZ2LOg7clffiR5OE6z_06OKUlKmGNolPLVpuTsdN59BRJYVfUZY05FzpvcOB-piEuouEqKz8/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/AVvXsEij_kddOnkxR-_a3UuJ-n9_A2CTN-uvc9-xoCayFdc-MTpvidYUsDDBGt45QrDSJb1cXRjDZ2LOg7clffiR5OE6z_06OKUlKmGNolPLVpuTsdN59BRJYVfUZY05FzpvcOB-piEuouEqKz8/s1600/close.png)no-repeat
15px 50%}
.dlbutton:hover {background:#579c26
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_6DYlLe9e8Lr7h2IrlPoyumg7JsndoVmyW2H3lKhGa0dKo_kg3xv9AmZKy1ra-GAGTaBk09igly1AdLNVR5Y3joWaQB36TYSgG13eBBBtNwpcbW32yH901CnRaK2GhPIljsiGzmnA-k/s1600/download.png)no-repeat
15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_6DYlLe9e8Lr7h2IrlPoyumg7JsndoVmyW2H3lKhGa0dKo_kg3xv9AmZKy1ra-GAGTaBk09igly1AdLNVR5Y3joWaQB36TYSgG13eBBBtNwpcbW32yH901CnRaK2GhPIljsiGzmnA-k/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/AVvXsEiwS77AmPZE8lfPM4sZiT5psCuJ_D1icgp7Do3FJnEX0TCl2pa0XaDk1ytI_1v4CnDGefSKHEVs5u6kSkro9vIYyrtATlh_3hGSWJ7ddkVtTjRNHmXu2VC9lMch49y66qSRzVpMj4WJDKo/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.Simpan kode ini tepat di bawah <body>
<b:if cond='data:blog.url != "http://www.seocips.com/p/template-demo.html"'>
Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti :
http://namabloganda.blogspot.com/p/demo.html
4.Simpan kode ini tepat di atas </body>
</b:if>
<b:if cond='data:blog.url == "http://www.seocips.net/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://www.seocips.com'>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 lagi kode yang ditandai dengan URL halaman blog demo sobat.
Cara Penulisan
Untuk pemanggilan URL template dan link download, gunakan format seperti ini :
http://blogsobat.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini
