CARA MEMBUAT TOMBOL DOWNLOAD KEREN

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.

Baca juga : Tempat Download Film HD Terbaru

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. Sebenarnya dari artikel aslinya adalah Tombol Demo dan Download tapi hanya saya ambil yang download-nya saja.

Demo :

DOWNLOAD

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

Cara Membuat Tombol Download Keren :

1. Login akun blogger Anda.
2. Lalu pilih Template > Edit HTML
3. Cari kode ]]>

Salin CSS di bawah ini dan tempel di atas kode ]]>

.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)

Kemudian simpan template.

Selanjutnya untuk penggunaannya di dalam postingan adalah tuliskan kode di bawah ini pada mode HTML :

<div class="button">
<a class="download" href="http://www.asalblitar.com">DOWNLOAD</a>
</div>
<div class="clear"></div>

Selamat mencoba, semoga bermanfaat.

Baca juga : Download File Apk Lewat Komputer Melalui Web Browser