Cara Membuat Tombol Demo dan Download di Blog

Cara Membuat Tombol Demo dan Download di Blog - Biasanya tombol demo dan download di blog digunakan untuk menampilkan halaman download untuk sebuah template, selain itu tombol itu juga digunakan untuk memperlihatkan hasil yang terjadi setelah penempatan sebuah konding. contohnya koding untuk penempatan iklan atau link download.

Namun yang paling sering digunakan adalah pada penempatan link download dan demo sebuah theme,jika ada memiliki blog yang memabahas tentang download theme tentu anda membutuhkan sebuah tombol ajaib, penggunaanya juga sederhana tidak ribet. cukup menempatkan beberapa kode dan URL pada posting.

Cara Membuat Tombol Demo dan Download di Blog

Tempatkan kode berikut ini dibawah  ]]></b:skin>

/* -- 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 }

Jika sudah, untuk implementasi kode Cara Membuat Tombol Demo dan Download di Blog, adalah dengan menempatkan kode dibawah ini pada postingan anda.

<div style="text-align: center;"><ul class="button">
<li><a class="demo" URL DEMO" target="_blank">Demo</a></li>
<li><a class="download" href="URL DOWNLOAD/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Gampang bukan ? silahkan dicoba semoga bermanfaat artikel  Cara Membuat Tombol Demo dan Download di Blog nya. 

Cara Membuat Tombol Demo dan Download di Blog 2014-03-08T17:53:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown