Membuat Box Banner V2 Versi Kirito Blog's

DEMO

Cara : 

• Cari Kode /b:skin
• Pastekan Kode Dibawah Ini Tepat Diatasnya

#MIMB1{background:#000; border:3px solid #006acc; width:260px; height:auto; float:left;margin-top:69px;border-bottom:3px solid #000;} #MIMB1 .widget-content{padding:0px; margin:0px} #MIMB3{background:#000; border:3px solid #006acc; width:260px; height:auto; float:left;margin-top:69px;border-bottom:3px solid #000;margin-left:664px;position:absolute;} #MIMB3 .widget-content{padding:0px; margin:0px} #MIMB4{background:#000; border:3px solid #006acc; width:370px; height:auto; float:left;margin-top:64px;border-bottom:3px solid #000;margin-left:277px;position:absolute;} #MIMB4.widget-content{padding:0px; margin:0px} .SSK{box-shadow:inset 0px 0px 16px #006acc;margin-left:0px; margin-top:50px; margin-bottom:10px; width:950px; height:215px; background:rgba(0,0,0,0.4); position:relative; border:3px solid #006acc; padding:10px; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out} .SSK:hover{background:rgba(0,0,0,0.6); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out} #MIMAdz{box-shadow: 0px 0px 16px #006acc;background:rgba(0,0,0,0.5); width:950px; height:150px; border:3px solid #006acc; float:left; margin-left:0px;box-shadow:0 0 16px #006acc} -o-filter:grayscale(0%); filter:grayscale(0%); -moz-transform:rotate(355deg); -webkit-transform:rotate(355deg); -o-transform:rotate(355deg)} #MAdz{margin-top:0px; padding:0px; text-align:center;} #MAdz img{border:3px solid #006acc; border-radius:70px; margin:1px 1px; text-align:center; padding:0px; margin-left:27px; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out;margin-top:8px} #MAdz img:hover{border:3px solid #006acc; -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg); -o-transform:rotate(720deg);border-radius:0px;} #slider2{width:468px;height:60px;margin-top:0px;margin-left:-6px;overflow:hidden;background-color:#000;border:3px solid #006acc;position:absolute;border-radius:0px;} #mask{overflow:hidden}#slider2:hover #pause{opacity:1} #slider2:hover #progress{background-color:rgba(255,255,255,0.0)} #slider2:hover ul,#slider:hover #progress,#slider:hover #overlay{-moz-animation-play-state:paused;-webkit-animation-play-state:paused} #pause{width:468px;height:60px;position:absolute;top:0;opacity:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in} #progress{width:1px;height:1px;background-color:#006acc;-moz-animation:progress 35s infinite;-webkit-animation:progress 35s infinite;position:relative;top:-1px;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in} #overlay{width:4680px;height:60px;position:absolute;top:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in;opacity:0.5;-moz-animation:overlay-fade 35s infinite;-webkit-animation:overlay-fade 35s infinite}#slider2 ul{width:2400px;list-style:none;padding:0;margin:0;-moz-animation:slide-animation 35s infinite;-webkit-animation:slide-animation 35s infinite;position:relative;left:0px;overflow:hidden}#slider2 li{display:inline;width:468px;height:60px;margin:0;padding:0;float:left;position:relative} #slider2 li:last-of-type{background-color:#006acc}#slider2 li a{display:block;text-decoration:none} #slider2 li span{display:block;width:560px;padding:15px 20px;position:absolute;bottom:0;left:0;background-color:rgba(54,44,48,0.6);border-top:1px solid #006acc;text-shadow:1px 1px 1px #006acc;pointer-events:none;text-align:left}@-webkit-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-moz-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-webkit-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-moz-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-webkit-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}@-moz-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}} #slider2 ul li span h2{font-size:24px;line-height:24px;color:#fff;font-weight:normal;font-family:'Communist-Regular';text-shadow:1px 1px 1px #006acc}::-webkit-selection{background:transparent} #slider4{width:468px;height:60px;margin-top:0px;margin-left:462px;overflow:hidden;background-color:#000;border:3px solid #006acc;position:absolute;} #mask{overflow:hidden}#slider4:hover #pause{opacity:1} #slider4:hover #progress{background-color:rgba(255,255,255,0.0)} #slider4:hover ul,#slider:hover #progress,#slider:hover #overlay{-moz-animation-play-state:paused;-webkit-animation-play-state:paused} #pause{width:468px;height:60px;position:absolute;top:0;opacity:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in} #progress{width:1px;height:1px;background-color:#006acc;-moz-animation:progress 35s infinite;-webkit-animation:progress 35s infinite;position:relative;top:-1px;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in} #overlay{width:4680px;height:60px;position:absolute;top:0;pointer-events:none;-moz-transition:all 170ms ease-in;-webkit-transition:all 170ms ease-in;-o-transition:all 170ms ease-in;opacity:0.5;-moz-animation:overlay-fade 35s infinite;-webkit-animation:overlay-fade 35s infinite}#slider4 ul{width:2400px;list-style:none;padding:0;margin:0;-moz-animation:slide-animation 35s infinite;-webkit-animation:slide-animation 35s infinite;position:relative;left:0px;overflow:hidden}#slider4 li{display:inline;width:468px;height:60px;margin:0;padding:0;float:left;position:relative} #slider4 li:last-of-type{background-color:#006acc}#slider4 li a{display:block;text-decoration:none} #slider4 li span{display:block;width:560px;padding:15px 20px;position:absolute;bottom:0;left:0;background-color:rgba(54,44,48,0.6);border-top:1px solid #006acc;text-shadow:1px 1px 1px #362c30;pointer-events:none;text-align:left}@-webkit-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-moz-keyframes slide-animation{0%{opacity:0}2%{opacity:1}20%{left:0px;opacity:1}22.5%{opacity:0.6}25%{left:-468px;opacity:1}45%{left:-468px;opacity:1}47.5%{opacity:0.6}50%{left:-936px;opacity:1}70%{left:-936px;opacity:1}72.5%{opacity:0.6}75%{left:-1404px;opacity:1}95%{opacity:1}98%{left:-1404px;opacity:0}100%{left:0px;opacity:0}}@-webkit-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-moz-keyframes progress{0%{width:0px;opacity:0}2%{width:0px;opacity:1}20%{width:468px;opacity:1}22.5%{width:468px;opacity:0}22.59%{width:0px}25%{width:0px;opacity:1}45%{width:468px;opacity:1}47.5%{width:468px;opacity:0}47.59%{width:0px}50%{width:0px;opacity:1}70%{width:468px;opacity:1}72.5%{width:468px;opacity:0}72.59%{width:0px}75%{width:0px;opacity:1}95%{width:468px;opacity:1}98%{width:468px;opacity:0}100%{width:0px;opacity:0}}@-webkit-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}}@-moz-keyframes overlay-fade{0%{opacity:0}2%{opacity:0.5}95%{opacity:0.5}98%{opacity:0}100%{opacity:0}} #slider4 ul li span h2{font-size:24px;line-height:24px;color:#fff;font-weight:normal;font-family:'Communist-Regular';text-shadow:1px 1px 1px #006acc}::-webkit-selection{background:transparent}

• Kemudian Cari Kode <div id='main-wrapper'>
• Pastekan Tepat Diatasnya

<div class='SSK'> <div class='MIMB1 section' id='MIMB1'> <div class='widget HTML' id='HTML6'> <div class='widget-content'> <a href='http://kiritoblogs.blogspot.com/' target='_blank'><img height='125' src='http://i.imgur.com/1jexwd8.gif' title='KIRITO BLOG'S | All About Blog, Editing,Template, Tricks' width='125'/></a><a href='http://kiritoblogs.blogspot.com/' target='_blank'><img height='125' src='http://i.imgur.com/1jexwd8.gif' title='KIRITO BLOG'S | All About Blog, Editing,Template, Tricks' width='125'/></a> </div> </div> </div> <div class='MIMB3 section' id='MIMB3'> <a href='http://kiritoblogs.blogspot.com/' target='_blank'><img height='125' src='http://i.imgur.com/1jexwd8.gif' title='KIRITO BLOG'S | All About Blog, Editing,Template, Tricks' width='125'/></a><a href='http://kiritoblogs.blogspot.com/' target='_blank'><img height='125' src='http://i.imgur.com/1jexwd8.gif' title='KIRITO BLOG'S | All About Blog, Editing,Template, Tricks' width='125'/></a> </div> <div class='MIMB4 section' id='MIMB4'> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="31" src="http://i.imgur.com/v5MYfCH.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="88" /></a> </div> <div class='widget-content'> <div id='slider2'> <div id='mask'> <ul> <li><a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> </ul> </div> <div id='progress'> </div> <div id='overlay'> </div> <div id='pause'> </div> </div> </div> <div id='slider4'> <div id='mask'> <ul> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a> </li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> <li> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/QGe8SZa.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="468" /></a></li> </ul> </div> <div id='progress'> </div> <div id='overlay'> </div> <div id='pause'> </div> </div> </div> <div class='MIMAdz section' id='MIMAdz'> <div class='widget HTML' id='HTML13'> <div class='widget-content'> <h3/> <div id='MAdz'> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> <a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="125" src="http://i.imgur.com/1jexwd8.gif" title="KIRITO BLOG'S | All About Blog, Editing,Template, Tricks" width="125" /></a> </div> </div> </div> </div>

Posted by Unknown on - Rating: 5.0

Title : Membuat Box Banner V2 Versi Kirito Blog's
Description : DEMO Cara :  Cari Kode /b:skin Pastekan Kode Dibawah Ini Tepat Diatasnya #MIMB1{background:#000; border:3px solid #006acc; ...

Share to

Facebook Google+ Twitter