Biasanya membuat tombol download dan demo ini adalah ketika memposting artikel yang membutuhkan demo dan link download, misalnya ketika memposting mengenai template blog atau widget blog dan lain sebagainya.

Bagi kamu yang suka tampilan sederhana dan tidak ribet cara membuatnya kamu dapat mencoba tutorial ini untuk tampilannya kamu dapat melihat gambar di bawah.  Ok, berikut ini tutorial cara membuat tombol Download dan Demo dengan tampilan sederhana di Blogger.

Cara Membuat DEMO DOWNLOAD Button di Blogger


Cara Membuat Tombol DEMO dan DOWNLOAD di Blogger
Cara Membuat Tombol DEMO dan DOWNLOAD di Blogger

1. Di Blog Blogger
2. Pilih menu Template ➔ Edit HTML
3. Letakan kode dibawah ini diatas kode ]]></b:skin> atau dibawah <style>

.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 }

4. Save template.
5. Untuk penggunaannya dalam postingan silahkan gunakan kode dibawah ini dengan menggunakan mode HTML (sebelahnya Compose):

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://www.spezer.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://www.spezer.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

6. Ganti link dengan link dengan link blog yang kamu siapkan.
7. Selesai.

Sekian mengenai cara membuat tombol download dan demo sederhana di Blog, semoga bermanfaat.
0 Komentar untuk "Cara Membuat Tombol DEMO dan DOWNLOAD Sederhana"