Efek Hover Menarik Untuk Banner Promosi [TUTORIAL]

Sobat Blogger, Pengunjung setia Hendsoe Personal Blog

Kebetulan kemarin saya mendapatkan ilmu baru, yaitu cara membuat Efek Hover Menarik Untuk Banner Promosi - Saya sendiri bingung sebenarnya mau ngasih judul postingan ini apaan. Untuk Lebih Mudahnya coba cek Demonya lalu arah kan Mouse anda ke salah satu banner yang ada

DEMO : Efek Hover Menarik Untuk Banner Promosi


Apa Hasilnya ??

Klo Saya tidak salah (pasti betul), pastilah efeknya seperti ini :

Mau Pasang Efek Hover Menarik Untuk Banner Promosi seperti demo yang telah saya berikan ?? Jika jawabannya "YA" dan saya yakin anda pasti berminat, hehehehe.....

Okelah, langsung saja kita praktekkan cara membuat Efek Hover Menarik Untuk Banner Promosi itu masbro :

• Login ke Blogger Dengan Google Akun Anda
• Jika sudah di dashboard Klik Navigasi
  Template »
  Edit HTML
• klik "
  Backup/Restore »
  Download full template" untuk membackup template anda.
• Masukkan kode css berikut di atas kode
  ]]></b:skin> :

/*Efek Hover Menarik Untuk Banner by Hendsoe.blogspot.com*/  .bannergbr{position:absolute;right:-1px;top:-1px;z-index:10;}    /*Code Untuk Banner ukuran 728x90 pixel*/    .banner-728{   text-align:center;   width:728px;   height:90px;   overflow:hidden;   position:relative;   padding-bottom:20px;  }  .banner-728-hov{   position:absolute;   z-index:12;   display:none;   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPiKD1kWrtT7DSN1BzTh85bOCz_YyMHrWmrlpfXLA1D282tAcT02JC9lNUEkZiAezgc-r44LXGjEA6EUuE7gOgkcEusO7RxUUiTNv7cTkMYJtpgtjKv4zGMDs2O0DrrZ5igacfK7Z6q9M/s320/hover_bg.png) repeat;   width:728px;   height:90px;  }  .banner-728-hov a{   background:#000;   border:2px solid #fff;   -webkit-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   -moz-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   font:normal 14px/30px arial,serif;   color:#fff;   display:inline-block;   padding:0 10px;   margin:25px 0 300px 0;   border-radius:12px;   -moz-border-radius:12px;   -webkit-border-radius:12px;   text-decoration:none;  }  .banner-728-hov a:hover{color:#fe4902;}  .banner-728:hover .banner-728-hov{display:block;}    /*Code Untuk Banner ukuran 468x60 pixel*/    .banner-468{   text-align:center;   width:468px;   height:60px;   overflow:hidden;   position:relative;   padding-bottom:20px;  }  .banner-468-hov{   position:absolute;   z-index:12;   display:none;   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPiKD1kWrtT7DSN1BzTh85bOCz_YyMHrWmrlpfXLA1D282tAcT02JC9lNUEkZiAezgc-r44LXGjEA6EUuE7gOgkcEusO7RxUUiTNv7cTkMYJtpgtjKv4zGMDs2O0DrrZ5igacfK7Z6q9M/s320/hover_bg.png) repeat;   width:468px;   height:60px;  }  .banner-468-hov a{   background:#000;   border:2px solid #fff;   -webkit-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   -moz-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   font:normal 14px/30px arial,serif;   color:#fff;   display:inline-block;   padding:0 10px;   margin:15px 0 200px 0;   border-radius:12px;   -moz-border-radius:12px;   -webkit-border-radius:12px;   text-decoration:none;  }  .banner-468-hov a:hover{color:#fe4902;}  .banner-468:hover .banner-468-hov{display:block;}    /*Code Untuk Banner ukuran 300x250 pixel*/    .banner-300{   text-align:center;   width:300px;   height:250px;   overflow:hidden;   position:relative;   padding-bottom:20px;  }  .banner-300-hov{   position:absolute;   z-index:12;   display:none;   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPiKD1kWrtT7DSN1BzTh85bOCz_YyMHrWmrlpfXLA1D282tAcT02JC9lNUEkZiAezgc-r44LXGjEA6EUuE7gOgkcEusO7RxUUiTNv7cTkMYJtpgtjKv4zGMDs2O0DrrZ5igacfK7Z6q9M/s320/hover_bg.png) repeat;   width:300px;   height:250px;  }  .banner-300-hov a{   background:#000;   border:2px solid #fff;   -webkit-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   -moz-box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   box-shadow:2px 0px 30px rgba(204, 204, 204, 0.75);   font:normal 14px/30px arial,serif;   color:#fff;   display:inline-block;   padding:0 10px;   margin:100px 0 100px 0;   border-radius:12px;   -moz-border-radius:12px;   -webkit-border-radius:12px;   text-decoration:none;  }  .banner-300-hov a:hover{color:#fe4902;}  .banner-300:hover .banner-300-hov{display:block;}

• Tutup Halaman
  Edit HTML
• Klik Navigasi
  Template »
  Add a Gadget
• Masukkan Kode dibawah ini :

<div id="rpsidebarspy">   <div class="banner-728">  <div class="banner-728-hov"> <a href="
http://linkanda.com">KLIK UNTUK JOIN</a> </div>  <div class="bannergbr"><img src="
http://alamat-gambar.jpg"></div></div>        <div class="banner-468">  <div class="banner-468-hov"> <a href="
http://linkanda.com">KLIK UNTUK JOIN</a> </div>  <div class="bannergbr"><img src="http://alamat-gambar.jpg"></div></div>            <div class="banner-300">  <div class="banner-300-hov"> <a href="
http://linkanda.com">KLIK UNTUK JOIN</a> </div>  <div class="bannergbr"><img src="
http://alamat-gambar.jpg"></div></div>  

• Keterangan Tambahan :
  
  • Ubah
    http://linkanda.com dengan Link Milik anda
  • Ubah
    http://alamat-gambar.jpg dengan url gambar

Saat ini, sesuai dengan CSS yang telah saya berikan diatas, ukuran banner yang tersedia adalah ukuran
728x90 pixel,
468x60pixel dan
300x250pixel saja. Untuk ukuran lainnya, silahkan berkreasi sendiri ya :)

Good Luck and happy Blogging...