Apa Kabar Sobat Blogger!
kali ini saya akan bagi2 tutor Yang bercerita CARA MEMASANG SLOT BANNER DI HEADER DENGAN EFEK HOVER, ok langsung aja ke TKP
Nih saya kasik Sreenshotnya:
NB:
- Yang Warna Orange Itu Sebelum di Hover
- Yang Warna Biru Pada Saat di Hover
Jadi? Sudah Tau Kan? Yah langsung nih Caranya....
Berikut Caranya:
1. Taruh Kode CSS dibawah ini diatas kode ]]><[/b:skin]>
#MAMZbanner1{width: auto;
height: auto;
float: right;
background: rgba(0, 0, 0, 0.4);
margin-right: -495px;
padding: 3px;
-webkit-animation:RZloading 3s;
-o-animation:RZloading 3s;
-moz-animation:RZloading 3s;
-ms-animation:RZloading 3s;
animation:RZloading 3s;
margin-top: 15px;
border-radius: 5px;
border: 5px solid #222;
overflow: hidden;
z-index: 999999;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}
#MAMZbanner1 h2{display:none}
#MAMZbanner1 .widget-content{width:468px}
#MAMZbanner1 img{opacity:0.5;padding:0px;
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-o-filter: saturate(0.0);
filter: saturate(0.0);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;}
#MAMZbanner1:hover{margin-right: 20px;border:5px solid #F03;}
#MAMZbanner1 img:hover{opacity:1;
-webkit-filter: saturate(1.1);
-moz-filter: saturate(1.1);
-ms-filter: saturate(1.1);
-o-filter: saturate(1.1);
filter: saturate(1.1);
-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;}
#MAMZbanner1:before
{content:"";position:absolute;width:150px;height:125px;background:transparent
url(http://i.imgur.com/I3cM4IV.png) no-repeat
center;margin-left:-110px;margin-top:10px;}
2. Lalu Taruh Kode Dibawah Ini di dekat kode <div id='header'>
atau di <div id='casing'> asalkan tidak terjadi error...
<div class='MAMZbanner1 section' id='MAMZbanner1'><div class='widget HTML' id='HTML3'>
<div class='widget-content'>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
</div>
</div></div>
<div class='RzBanner2 section' id='RzBanner2'><div class='widget HTML' id='HTML11'>
<div class='widget-content'>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
<a
href='http://cyber-x-h4cker.blogspot.com/2013/04/link-exchange.html'><img
alt='X-Cyber' longdesc='http://cyber-x-h4cker.blogspot.com/'
src='http://i.imgur.com/vkwSsmq.png' title='Visit
Now'/></a></li>
</div>
</div></div>
3. Simpan Template Dan Lihat Hasilnya..
Semoga Bermanfaat..
