23 Maret 2015

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

Tombol Download Keren

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 :


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 ]]></b:skin>
  4. 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)
  5. 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

26 komentar

Info keren mas.. n sy malah baru tau kalo pke gb justru malah ndak seo ya :)

Btw boleh request script sticky sidebarnya nih, kbetulan templatenya sama :)

Kalau saya dapat infonya sih gitu, harus ada alt dan title terus gak boleh dipasang link keluar.

Sudah ada kok mas postingannya, hehe :D
http://www.asalblitar.com/2015/03/cara-membuat-sticky-widget-pada-sidebar-blog.html

wah keren nih mas, kalo cara di atas aman untuk seo ya mas?

Tombolnya cocok sekali buat blog yang bertemakan Download Gratis...

Kan templatenya emang buatan Kang Ismet (y) :D

kok mengarah ke homepage terus mas?
:o
bales

Kan cuma emang demo mas, ada yang salah ya ? :o

sip... berhasil ane terapkan gan di blog downloadtan ane, hehehe....
thanks...

NB : untuk kode CSS, cara lain biar gk cari kode ]]>
langsung aja coppy dan paste kode CSS ke bagian SESUAIKAN template di bagian tambahkan kode CSS.

done....

Ijin comot artikelnya sob !

Iya sama-sama :) :D
Oke terima kasih.

Apa bener ini tidak termasuk seo?
bila iya adakah cara lain agar bisa membuat tombol download seperti diatas tapi bisa dikatakan seo?
Mohon dijawab Om...

Kata siapa gan ? Mohon dicermati lagi artikel saya di atas :)

Terus link downloadnya di taruh di mana ya?

Lihat artikel yang paling bawah, ganti http://www.asalblitar.com dengan link download.

wah mksh gan,,, aku ganti semua link download biar seo.

salam kenal mas, tutorialnya bermanfaat sekali... kalo ingin buat kotak-an persegi tempat code html dan CSS itu buat nya gimana ya ??

Iya salam kenal juga :)
Namanya Syntax Hightlighter mas.

Isikan komentar Anda dengan bijak.