Cara Menciptakan Tombol Download Keren Sederhana Di Blog

-Halo teman bloggers...! Kali ini ane akan memposting artikel ihwal tutorial blog yaitu Cara Membuat Tombol Download Keren Sederhana di Blog. Sebelumnya niscaya agan pernah menciptakan melihat tombol DOWNLOAD yang keren di blog-blog lain. Mungkin itu memerlukan script dan CSS yang agak rumit, tapi ane punya trik sederhana untuk menciptakan tombol download yang keren.


Mau lihat menyerupai apa?

  DEMO  

Klik link DEMO diatas

Keren kan gan? Scriptnya juga mudah dan ringan
Berikut scriptnya:


<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" /> 
<img class="image2" src="URL GAMBAR 2" /></a></center>


Keterangan:

• Tulisan berwarna merah, silahkan ganti dengan URL TUJUAN
• Tulisan berwarna kuning, silahkan ganti dengan gambar pertama
• Tulisan berwarna hijau, silahkan ganti dengan gambar kedua

Contoh DEMO yang ane buat:

Ane memakai 2 buah gambar

<style type="text/css"> a.pic .image2{display:none} a.pic:hover .image1 {display:none} a.pic:hover .image2 {display:inline} </style> <center> <a class="pic" href="http://cronosal.blogspot.com/"> <img class="image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF9a3WosHiaTF1VL1zm6phHfp3M69VrL3LQyiRP5f3T4iXlNzXGmLaa9k2l8s2PfVFdICmdz-NDA4Bdgbsq7cu8oKeTaVZOasojvD_WZpkIAiQqWmSVaKCwloW9i0Vy9JX8YmlP5z6xNRP/h120/2.jpg" /> <img class="image2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGmEO9QIjuF6Ch1XO_9cnNU9TUTZ-YUw46Hbs8oDekcMc_3J233fSG6TlfIuvZqVf1mE-47liAeUs1BHDQMTAq6uLfNzy-mNU_lrc79H2i54l2UcYnNX3R6SbZacgTzuX66iur_6ZOvPE7/h120/1.jpg" /></a></center>

Mau copas? sertakan sumber ya!

:

• Cara Membuat Tombol 'Share to Download' di Blog tanpa Script

Sekian

SALAM Blogger

Share this post