Cara Mudah Membuat Tombol Download Sederhana

Tidak tahu bagaimana cara membuat tombol download yang simpel dan bagus? Di sini ada loh tentang cara membuat tombol widget yang sangat sederhana dan simpel yang tidak memerlukan terlalu banyak script.

Seperti yang sudah saya ketik pada pembukaan post, kali ini saya mau share tentang bagaimana cara untuk membuat tombol download yang simpel dan tidak terlalu banyak langkah-langkah pengerjaannya.

Untuk hasilnya sobat bisa lihat picture yang sudah saya lampirkan di atas, dan jika sobat berminat maka simaklah tutorial yang sudah saya siapkan di bawah ini :

1. Login pada akun blogger sobat.

2. Lalu pilih template > Edit HTML.

3. Cari code </style>.

4. Masukkan code CSS di bawah ini tepat sebelum code </style>.

.button {float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both;}
.download {border:none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; padding:8px 30px !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;}
.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. Kemudian simpan template.

6. Untuk penggunaannya,tempatkan code dibawah ini sesuai yang sobat mau pada mode HTML saat mau memposting artikel.

<div class="button">
<a class="download" href="https://dxtrip.blogspot.com">DOWNLOAD</a>
</div>
<div class="clear"></div>

7. Selesai

Baca Juga