Header Ads

Cara Membuat Tombol Demo dan Download

Cara Membuat Tombol Download di Blog



Cara Membuat Tombol Demo dan Download di Blog - atau Cara membuat Demo and Download Button di Blog itu sangat mudah, hanya perlu 2 langkah untuk menerapkannya di blog kita.

Meambahkan Tombol Demo dan Download di blog akan sangat membantu bagi Blogger yang biasa membagikan sesuatu di blognya, misalnya blog download Template Gratis Seo Responsive seperti saya. dan keuntungan menggunakan Tombol Demo dan Download ini akan mempercantik isi artikel anda.

Inilah Cara Membuat Tombol Demo dan Download Di blog
  • Masuk ke dashbord blog > Template > Edit Html Pasketan kode di bawah ini di atas atau sebelum kode  ]]></b:skin> gunakan CTRL+F untuk mempercepat pencarian.

.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: #3498db; 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: #f39c12; 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 } 

Anda juga bisa dengan mudah mengganti Background dari Tombol Demo dan Download ini karena yang perlu anda ketahui hanya kode Html Warna yang bisa anda lihat di sini Kode Warna Html .

  • Untuk penggunaan dan menerapkannya dalam postingan  tambahkan kode di bawah ini pada Mode HTML

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


ganti link http://zufray.blogspot.com dengan link tujuan anda dan itulah Cara Membuat Tombol Demo dan Download.

 Selesai.

sumber Kode CSS & HTML: http://blog.kangismet.net/2013/04/membuat-tombol-demo-dan-download.html

No comments

Powered by Blogger.