BISAJADI.GA - Tampilan Blog yang menarik adalah salah satu cara membuat pengunjung betah di blog kita. Termasuk link download dalam sebuah blog agar pengunjung lebih mudah dalam mengunduh suatu file. Kali ini BISAJADI.GA akan berbagi tentang cara Membuat Tombol Download Di Artikel Blog dengan. Caranyapun cukup mudah, hanya meng copykan kode css pada template blog yang terpasang dan pada artikel kita.
Tampilan tombol download kurang lebih seperti di bawah ini :
1. Login ke Dasbor Blog kalian
2. Pilih menu teamplate di sebelah kiri kemudian pilih sesuaikan template.
3. Kemudian Pilih tingkat lanjut lalu pilih Tambahkan CSS
Berikut Kode CSS :
/* -- bisajadi.ga --*/
.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 }
5. Selanjutnya kita tinggal menambahkan kode untuk membuat tombol di artikel dengan cara copy kode berikut lalu masuk ke artikel kita dan piliih mode penulisan HTML
<div style="text-align: center;">
<ul class="button">
<a class="download" href="http://www.bisajadi.ga" target="_blank">Download</a>
</ul>
</div>
<div class="clear"></div>
Ganti warna biru dengan nama tombol dan warna merah dengan link halaman tujuan
6. Selesai
Mudah bukan tentang Cara Membuat Tombol Download di Artikel semoga bermanfaat.