Cara Membuat Tombol Download Keren

Prisma Try Laksana

Blogspot

23 Maret 2015

Belum ada komentar

Download merupakan pengertian dari mengunduh suatu data dari internet ke perangkat kita seperti komputer, tablet, ponsel, dan yang lain. Dalam sebuah web atau blog yang menyajikan berkas seperti doc, ppt, pdf, maupun aplikasi biasanya menggunakan tombol download untuk mengunduh dari suatu hosting agar lebih menarik jika dibandingkan dengan tautan asli atau tulisan download biasa.

Sebelum menggunakan tombol ini, dulu saya menggunakan gambar sebagai tombol download, tapi saya pernah membaca suatu artikel yang menerangkan bahwa tautan eksternal yang berasal dari gambar itu tidak baik untuk SEO. Oleh karena itu saya memperbaruinya, yang saya dapatkan dari Kang Ismet dan berikut contohnya:

DOWNLOAD

Tombol ini dibuat menggunakan CSS, jadi untuk kreasi lain silakan untuk mengubah sesuai keinginan dan kebutuhan.

Cara Membuat Tombol Download Keren:

1. Login akun blogger Anda.
2. Lalu pilih Theme > Edit HTML
3. Salin CSS di bawah ini dan tempel di atas kode ]]></b:skin>
   

   .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;}

   Keterangan: Untuk membuat tombol berada di samping kiri ubah text-align:center; menjadi text-align:left; (di dalam .button)
4. Kemudian klik Save.

Selanjutnya untuk penggunaannya di dalam postingan, tuliskan kode di bawah ini pada HTML view:

<div class='button'>
  <a class='download' href='https://www.asalblitar.com'>DOWNLOAD</a></div>