Posted by : Unknown
Jumat, 24 Mei 2013
Malam sobat XCyber
kali ini saya akan share Cara Memasang Slot Banner di Header Dengan Efek Hover
ok langsung aja tutornya
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;2. Lalu Taruh Kode Dibawah Ini di dekat kode <div id='header'> atau di <div id='casing'> asalkan tidak terjadi error...
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;}
<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>
3. Simpan Template Dan Lihat Hasilnya..<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>
Semoga Bermanfaat..
Sumber : Ceventer-Creation48
Related Posts :
- Back to Home »
- Blogger »
- Cara Memasang Slot Banner di Header Dengan Efek Hover