CARA MEMBUAT TOMBOL DOWNLOAD ALA KANG ISMET

Hai sobat, ane hadir lagi dalam kehidupan sobat. Tombol download, pasti sobat pernah melihat download, ya tombol download ini sering digunakan di blog-blog download. Tombol download ala kang ismet ini pokoknya lebih keren dah. Sebenernya tutorial ini bukan cuma tombol download aja, tapi juga tombol demo. Ok langsung aja...........

1. Buka blogger.com
2. Klik Template terus klik edit HTML
3. Copy kode di bawah ini dan taruh di atas ]]></b:skin> 

/* -- Kang Ismet Button --*/
.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. Jika sudah klik simpan template

---

5. Untuk penerapannya, saat sobat memposting gunakan HTML jangan compose

6. Copy kode dibawah dan taruh di postingan HTML tadi

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://bagashaidar22.blogspot.com/" target="_blank">demo</a></li>
<li><a class="download" href="http://bagashaidar22.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Contoh tombolnya kayak gini

• demo
• Download

sumber: blog.kangismet.com

Subscribe to receive free email updates: