Berikut ini adalah contoh dan cara penerapannya pada blog Anda. Untuk melihat efek animasinya, silahkan geser cursor anda pada icon download dibawah ini :
Kode CSS
a.unduh-icon { color: #333; font-size: 1.3rem; font-weight: bold; text-decoration: none; } .unduh-icon span { display: block; cursor: pointer; position: relative; width: 60px; height: 30px; margin: auto; border: 10px solid #333; border-top: transparent; } .unduh-icon span:before, .unduh-icon span:after { content: ''; display: block; position: absolute; } a.unduh-icon:hover span:before, a.unduh-icon:hover span:after { animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate; } a.unduh-icon:hover span:before{ left: 25px; top: -9px; width: 10px; height: 10px; background: #3BAFDA; } a.unduh-icon:hover span:after { left: 20px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #3BAFDA; } @keyframes bounce { from { transform: translateY(-10px); } to { transform: translateY(0); } } @-webkit-keyframes bounce { from { -webkit-transform: translateY(-10px); } to { -webkit-transform: translateY(0); } }
Kode HTML
<p style="text-align: center;">
<a href="LINK ANDA DISINI" class="unduh-icon">
<span></span>
Download
</a>
</p>
kang template nya mantef ringan :d
ReplyDeleteRingan banget gak ada sidebar gak ada gambar....
DeleteKapan2 saya coba kang,trimakasih
ReplyDeleteOh ia kang cara pemasangan nya langsung di postingan?
Untuk css nya simpan di atas kode </style> atau </style>
DeleteSedangkan kode HTML nya simpan di postingan pada mode HTML
Maaf Maksudnya diatas kode ]]></b:skin> atau </style>
DeleteHmm keren nih tombol downloadnya :)
ReplyDeleteoh iya template dahsyat deh kalau buatan DTE
Kalau buatan DTE mah gak usah di ragukan lagi :)
Deleteweyyy... jagoan si akang ieu euy
ReplyDeleteJago Nyopet Kang.... :)
DeleteHaturnuhun ah tos mampir..
jagoan neon kale.... :-)
DeleteElegan segali button nya mas, ndak perlu dikasih image. tinggal mainin di css nya. :)
ReplyDeleteBetul sob, biar gak nambah beban :)
DeleteSelamat Malam Mas Heri wuihhh mantap Mas Artikel nya nantinya
ReplyDeleteTombol download pada artikel jadi ada effects dan nilai seni nya yah Mas
Menarik kreatif Ide Cemerlang salout deh saya Mas Heri. sukses terus :)
Makasih Kang.. Salam sukses juga bauat Knag Saud Karrysta
Deletewah keren mas animasinya.. mirip sama di tempat tempat download ya.. jhehehehe terimakasih mas tutornya.. saya simpan dulu...
ReplyDeleteSama-sama Mas.. sialahkan disimpan :)
Deleteini cocok untuk web/blog yang berisi konten download ya mas.. karena selalu menngunakan link download, dengan menggunakan trik dari mas heri ini bisa kelihatan profesional ya mas....
Deletemakin ringan aja kang templatenya...kuereen :)
ReplyDeletekalau saya bingung kang mau prakteknya, karena gak ada downloadan dari blog WS hehe
Kli ajah Kang WS punya aplikasi WS FOR Android buat dibagiin sama pengunjung, kan bisa di pakai :)
Deletekunjungan balik mas, salam kenal dan persahabatan slalu
ReplyDeleteSepertinya sangat cocok ni mas buat blog yang bertemakan download
Betul Mas memng ini khusus buat yang menyediakan link download.
DeleteTerimakasih Mas sudah mampir :)
Link css nya ditaruh sebelah mana mas?
ReplyDeleteMaklum masih newbie
http://problogiz-tech.blogspot.com
Sudah saya jawab di pertanyaanya Mas Agus kompac di atas.
Deletemaaf oot :D hanya mau ngoment TEMPLATENYA GILA KEREN BANGET :D RINGAN
ReplyDeleteMantap tutor nya sob, btw blog baru ya sob....??? Kok saya baru tau ya
ReplyDeletemohon ijin untuk menyimak sajalah,
ReplyDeletesalam dari Kalimantan Selatan
keren ya...laen daripada yang laen tombol download nya....pasang ngga yah?
ReplyDeleteMANTAB Mas tapi bikin ribet g ya kira2 dan memberatkan loading blog g?
ReplyDeleteWah tampilanya nya keren template nya
ReplyDeleteIni blog Gupitan apa blog baru nya Kang Heri
Koq saya jadi bingung nih Kang?
gituh blognya kebuka...dalam hati pernah maen kesinih deh...
ReplyDeletetuh kan bener...ada wajah cakep saya diatas...;o)
Wih, keren nih kapan-kapan mau ganti ini aja :)
ReplyDeletewah mantep ini buat dicoba, :)
ReplyDeleteSelamat sore Kang Heri hadir kembali saya di artikel
ReplyDeleteYang bermanfaat untuk button download salam sukses Kang Heri
maen ke buat tombol download sambil mliriki para komentator, nyari yang manclis...;o)
ReplyDeletekeren bner kang..
ReplyDeleteMampir lagi nih Kang Heri simak dan belajar lagi makasih Kang Heri
ReplyDeletecipok basah sebasah basahnya deh...abisnya suguhan dirumahnya masih ini juga seh...;o)
ReplyDelete