Cara Membuat Tombol Download Di Blog

bagi kalian para blogger yang mempunyai website download atau blog yang share tentang template, pastinya memerlukan tombol "Download" dan tombol "Demo", nah kali ini mimin akan share bagaimana membuat tombol Download dan Demo di Blog anda dengan sangat mudah sekali. dan juga sangat friendly.

Untuk Demonya seperti ini :

untuk cara membuatnya pun sangat mudah, simak berikut ini:

Tambahkan Kode Dibawah ini sebelum kode ]]></b:skin>
/* -- WarungBiru 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 }
Untuk menggunakannya, pastikan ketika update artikel masukkan kode dibawah ini, di mode HTML 
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://warungbiru.com" target="_blank">Demo</a></li> <li><a class="download" href="http://warungbiru.com" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>
*ganti url yang berwarna biru dengan url link download sobat.

Sekian update dari mimin, semoga bermanfaat buat sobat sekalian.  bila masih ada kesulitan silahkan berkomentar di dibawah ini. dan jangan lupa yang ingin tahu update terbaru silahkan subscribe yaa

Post a Comment