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... 
{ 0 komentar... read them below or add one }
Posting Komentar