Membuat Tombol Download Sederhana

Membuat Tombol Download Sederhana

Bola Hero Gawai

Membuat Tombol Download Sederhana

Tombol Download Sederhana
Karena ada beberapa teman Kompi Ajaib yang minta untuk menjelaskan cara membuat tombol download yang saya pakai, akhirnya saya sharing juga sekarang. Saya sebut tombol download ini tombol sederhana, karena memang tombol ini dibentuk dengan CSS yang sederhana dan menggunakan CSS Sprite untuk image backgroundnya sehingga tidak terlalu membebani blog.

Sebenarnya ini tidak hanya untuk tombol download saja, bisa Anda gunakan untuk tombol apa saja tinggal ganti gambar backgroundnya saja. Bisa tombol demo atau lainnya yang memerlukan sebuah tombol.

Gambar tombolnya bisa Anda buat sendiri dengan Photoshop atau Firework atau Anda cari tombol download yang sudah jadi di Google. Buat dua buah tombol dengan bentuk dan ukuran yang sama tapi beda warna, satu untuk tombol normalnya dan satunya lagi untuk tombol hovernya seperti yang sudah saya pakai ini.


Tombol Download

Dan dua buah tombol tadi jadikan menjadi satu gambar seperti gambar di atas agar bisa digunakan dengan CSS Sprite. Setelah Anda siap dengan gambar tombol Anda, silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin>

.tombol{background:url(http://4.bp.blogspot.com/-bgJOSPGXBHg/UeyRofnfVII/AAAAAAAAZh8/Q4Ju7RJQFBs/s1600/DownloadSprite2.png) no-repeat transparent;text-indent:-99999em!important;text-align:center;display:inline-block;height:50px;width:180px;background-position:0 0;transition:all .3s ease-in-out}
.tombol:hover{background-position:0 -55px}

Untuk classnya bisa apa saja terserah Anda, di sini saya memakai kata "tombol" karena ini memang untuk tombol hehehe... Perhatikan url warna merah itu adalah url gambar Anda. Dan untuk height (tinggi) diambil dari tinggi satu gambar sebelum digabungkan, juga lebarnya dari lebar gambar tombol Anda. Ingat untuk height (tinggi) harus dari tinggi satu gambar sebelum digabungkan agar yang tampilnya hanya satu gambar saja.

Dan perhatikan untuk background position-nya (warna biru), pada posisi normal background position-nya 0 0 (x=0;y=0) agar yang tampil gambar yang atasnya. Dan untuk hovernya, karena gambar di susun atas bawah maka yang dirubah angka y-nya. untuk gambar di atas y-nya saya kasih -55 (tinggi gambar ditambah margin di antara kedua gambar). Jadi untuk posisi hover, background position-nya 0 -55px (x=0;y=-55px) agar gambar yang bawahnya naik ke atas setinggi 55px ketika dihover mouse. Kira-kira demikian lah... silahkan Anda berimajinasi sendiri sesuai dengan gambar yang Anda gunakan.

Untuk memanggilnya di dalam postingan cukup gunakan kode

<div class="tombol"></div>

Dan taruh pada link download Anda. Secara keseluruhannya akan seperti tampak di bawah ini

<a href="http://www.kompiajaib..com/" target="_blank" title="Download via Website"><div class="tombol"></div></a>

Karena tombol ini tidak menggunakan kata di tombolnya pada link downloadnya, maka ketika ada orang yang copas dengan memblok postingan sampai dengan tombol downloadnya, maka link tidak akan tercopas. Silahkan coba saja blok tombol download yang ada di Kompi Ajaib kemudian copy dan paste pada postingan blog Anda, maka link downloadnya tidak akan ikut tercopas begitu juga tombolnya.

Bagaimana mudah dan sederhana kan tombol downloadnya? hehehe...silahkan kembangkan sesuai dengan keinginan dan imajinasi Anda.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

19 Comments Add Comment

This comment has been removed by the author.

hehe bagus juga mas walau blog saya tidak membutuhkan tombol seperti ini namun mana tau kalau lain waktu membutuhkannya mas |o|

Balas

nuju teu ngurus 'butoon' nuju lieur ku html5 abdi mah hehehhe :)

Balas

Heheehehe...pokona mah diantosan kang hehehe... Peryogi teu kang script komen hack-na nu tos valid salian nu error dua eta?

Balas

Iya silahkn disimpan sis barangkali suatu saat membutuhkan...

Balas

Mas, saya mau nanya, Maskolis kok gak aktif lagi yah.

Balas

muhun atuh kang, kintun ka email kamari

Balas

lagi cari istri cantik dengar gosip dari tertangga, mungkin secantik saya hahahaha @@,

Balas

Atos dikintunkeun kang scriptna ka email

Balas

Nah itu saya juga ga tahu, tapi kemarin saya lihat pada blog Mas Template postingannya sudah rapih lagi yang sebelumnya banyak thumbnail dengan tanda seru karena blog demonya banyak yang dihapus. Berarti Maskolis masih memperhatikan dunia blog ini...namun entah lagi ngapain dan lagi di mana saya juga ga tahu...

Balas

Sayang blognya yang berdomain dan berpagerank harus ditinggalkan begitu saja, dan Alexanya sudah mulai berkurang, kemarin 8000an sekarang sudah 9000an.

Balas

maskolis msih aktif di twitter, di kompasiana juga aktif..
kmrn juga sempat bls tweet saya, hehe

Balas

Makasih banyak mas adhy, saya malah baru tahu nih, padahal udah komentar ke artikel yang paling baru..

Nanti pasti saya coba mas :D, terimakasih banyak :D

Balas

Silahkan mas dicoba hehehe...

Balas

Wah kang, pake CSS sprites ya?
hmm bisa tidak memberi sedikit tutorial nantinya untuk hal ini kang?

Balas
This comment has been removed by the author.
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×