Cara Membuat Tombol Download & Demo Di Blog

G-aNkar BloG. Berawal dari rasa penasaran pada suatu blog yang memiliki tombol download dan demo yang simpel lalu saya berusaha mencari triknya,, ternyata itu sangat mudah untuk di lakukannya. Sedikit kode CSS dan Kode pemanggilnya dalam sebuah postingan.

Baca juga: Modifikasi Home Page Jadi Valid Html5

Sebenarnya cara ini di tujukan untuk mempermudah kita dalam pembuatan tombol download dan demo di suatu postingan blog, sehingga kita tidak perlu repot-repot membuat kode CSS di setiap membuat suatu postingan atau artikel. Langsung saja pada langkah pembuatannya,

Cara Membuat Tombol Download & Demo Di Blog

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:/azhallea.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http:/azhallea.blogspot.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/AVvXsEjRFO2nLpVMDzO3xLwkUNrGMi9G3WMRfGtDjL_2_Jm5CHyC8R1NX0VVMPUz8EhFRY37fgJ6LdLSXIOXVXQN2-PoowxP03SfRd-Q_wtQiY9FImxULXWkd-7kQsbQud02xe7LCemDKmCfOBA/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/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/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/AVvXsEhwgeE1m4kQOmVOrUFChPeq4foGJne1QSylJSxIT4IGfmImNneZBgtd39EM9uV6TqC6ZzxQM0K0pq8Xfh6tg5-tf9auxONxLIybl53bNQWosxEgBFtVg1AwUaiA-jss3aRyKNawBsCVEGo/s1600/close.png)no-repeat 15px 50%} .dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/s1600/download.png)no-repeat 15px 50%} .dlbutton, a.dlbutton { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuV5D7y_-cLkZd5biyupuMsZEErjMZWhbjPqGFOUK8nAv6ZkbQfiSnD-WE-kjMqVFDKcYWJOv9TXznuMIlgAmB2CVQd7sfOTDEMrmzzLTG6myyjKfxJ8ZA7iDcDBJJ6ZJdrGn_nOWDXs/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/AVvXsEgOC9BMWYuZk7BnlPt1uloU5Y3wz8pwi2gue_-1-EvhyphenhyphenLdom3YP_JG5ac70jVd2IkVROous58rWVapEmglbF5KAR1nEn_3nMriodOcvg2DaRdSil2r8Ge8OFLjlv-wCIPOlXkPBlXKa1Kk/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:/azhallea.blogspot.com/p/template-demo.html"'>

Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti :

http:/azhallea.blogspot.com/p/demo.html

4.Simpan kode ini tepat di atas </body>

</b:if> <b:if cond='data:blog.url == "http:/azhallea.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:/azhallea.blogspot.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.