Cara Membuat Tombol Download Keren

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

Baca juga : Cara mengupgrade OS Android

WWW.RHM-FILES.BLOGSPOT.CO.ID

Sebelum menggunakan tombol download ini saya dulu menggunakan gambar sebagai tombol download, tapi saya pernah membaca suatu artikel yang menerangkan bahwa eksternal link yang berasal dari gambar itu tidak baik untuk SEO. Oleh karena itu saya memperbaruinya yang saya dapatkan dari rhm-files, sebenarnya dari artikel aslinya adalah tombol Demo dan Download tapi hanya saya ambil yang downloadnya saja.

Cara Membuat Tombol Download Keren :

1. Login akun blogger Anda.
2. Lalu pilih Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy CSS di bawah ini dan paste 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-bor
der-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 download berada di samping kiri ubah text-align:center; menjadi text-align:left; (di dalam .button)

5. Kemudian simpan template.

Penting ! 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.