Cara Membuat Box Dibawah Header V.2

Assalam'ualaikum, kali ini Dark Kage akan memberikan css dan html box diatas.
Fiturnya sudah di tandai jadi kalian bisa tahu fiturnya, kalau mau demonya klik disini ---> DEMO
Oke langsung saja.

1. Buka Dashborad, klik Template, lalu klik edit html.
2. Cari kode ]]><b:skin/>, untuk mempermudah tekan Ctrl + F.
3. kalau sudah ketemu masukan kode dibawah ini, diatas kode ]]><b:skin/>

/* Box V2 Dark Kage
----------------------------------------------- */
#Blog-Banner2 {
margin-top: 10px;
margin-left: -35px;
width: 1045px;
height: 32px;
margin-bottom: 10px;
text-align: center;
background: #000000;
border: 2px solid#000000;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 2px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 2px;
border-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
overflow: hidden;
-webkit-box-shadow: 0px 0px 10px #000000;
-mox-box-shadow: 0px 0px 10px #ad1010;
-ms-box-shadow: 0px 0px 10px #ad1010;
-o-box-shadow: 0px 0px 10px #ad1010;
box-shadow: 0px 0px 10px #000000;}
#Blog-Banner2:hover {
height: 110px;
}
#Blog-Banner2 h2 {
color: #FFF;
font-family: "Bitter",arial,sans-serif;
margin-bottom: 5px;
font-size: 14pt;
text-align: center;
border-bottom: 1px solid #FFFFFF;
height: 27px;
}
#MIMB1{margin-left: 10px;
background: #000;
border: 3px solid #000;
width: 505px;
height: auto;
float: left;
margin-top: -147px;
border-bottom: 3px solid #fff;}
#MIMB1 .widget-content{padding:0px; margin:0px}
.SSK{box-shadow:inset 0px 0px 16px #000;margin-left:0px; margin-top: 0px; margin-bottom:10px; width:930px; height: 280px; background:rgba(0,0,0,0); position:relative; border:3px solid #000; 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); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out}
#slider2{width: 468px;
height: 60px;
margin-top: -315px;
margin-left: 0px;
overflow: hidden;
background-color: #000;
border: 3px solid #000;
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:#000;-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:#000}#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 #000;text-shadow:1px 1px 1px #000;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 #000}::-webkit-selection{background:transparent}
#slider4{width: 468px;
height: 60px;
margin-top: -330px;
margin-left: 478px;
overflow: hidden;
background-color: #000;
border: 3px solid #000;
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:#000;-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:#000}#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 #000;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 #000}::-webkit-selection{background:transparent}
#JTS{background: transparent;
margin-top: 253px;
margin-right: 35px;
padding: 3px;
border: 5px solid #000000;
border-bottom: 3px solid #fff;
border-radius: 5px;
width: 117px;
height: 26px;
float: right;}
#JTS .widget-content{padding:0px; margin:0px}
#MODalexa{border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-bottom-color: rgb(233, 233, 233);
border-bottom-color: rgb(197, 197, 197);
border-bottom-color: rgb(150, 150, 150);
border-bottom-color: rgb(145, 145, 145);
border-bottom-color: rgb(51, 51, 51);
border-bottom-color: rgb(37, 37, 37);
border-bottom-color: rgb(27, 27, 27);
border-bottom-color: rgb(26, 25, 25);
border-bottom-color: rgb(26, 25, 25);
border-bottom-color: rgb(24, 23, 23);
border-bottom: 5px solid #fff;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
border: 5px solid #000000;
float: left;
background: transparent;
padding-left: 0px;
width: 120px;
height: 95px;
margin-left: 580px;
margin-top: 189px;
border-radius: 0px 0px 0px 0px;
border-bottom-color: rgb(255, 255, 255);}
#MODalexa:hover{-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
border: 5px solid #000000;border-radius: 10px 10px 10px 10px;box-shadow:0 0 30px #000000;}

4. Kemudian Cari Kode 'content-wrapper', jika sudah ketemu taruh kode dibawah ini diatas kode 'content-wrapper'

<div id='Blog-Banner2'><h2>Banner 468x60</h2>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
</div>
<div class='SSK'>
<div id='MODalexa'>
<a href='http://www.alexa.com/siteinfo/http://darkkage10.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=http://darkkage10.blogspot.com/' type='text/javascript'/></a>
</div>
<div id='JTS'>
<div class='widget-content'>
<a href='http://www.blogger.com/follow-blog.g?blogID=4053232321759648581' target='_blank'><img alt='Join This Site' src='http://goo.gl/7aybbA' title='Join This Site'/></a>
  </div></div></div>
<div class='MIMB1 section' id='MIMB1'>
<div class='widget HTML' id='HTML6'>
<div class='widget-content'>
<a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0p4BVdl0XbWVSDRcF8O65K9E_ws0Et7mcV61Bx3OXMnozeEzGCs0pU3NVxL1FLI-X2uDrf1Rb1uHaWxXTN9oSwM613-A_43PTzMH9cdWLscZuqNMHv0zi80-mpUIKeUWafTIQKyeCUHo/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0p4BVdl0XbWVSDRcF8O65K9E_ws0Et7mcV61Bx3OXMnozeEzGCs0pU3NVxL1FLI-X2uDrf1Rb1uHaWxXTN9oSwM613-A_43PTzMH9cdWLscZuqNMHv0zi80-mpUIKeUWafTIQKyeCUHo/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0p4BVdl0XbWVSDRcF8O65K9E_ws0Et7mcV61Bx3OXMnozeEzGCs0pU3NVxL1FLI-X2uDrf1Rb1uHaWxXTN9oSwM613-A_43PTzMH9cdWLscZuqNMHv0zi80-mpUIKeUWafTIQKyeCUHo/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a><a href='http://darkkage10.blogspot.com/' target='_blank'><img height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0p4BVdl0XbWVSDRcF8O65K9E_ws0Et7mcV61Bx3OXMnozeEzGCs0pU3NVxL1FLI-X2uDrf1Rb1uHaWxXTN9oSwM613-A_43PTzMH9cdWLscZuqNMHv0zi80-mpUIKeUWafTIQKyeCUHo/s1600/Ads+Your+Banner1+DK.png' title='ALL ABOUT Naruto, Trick, Template DLL' width='125'/></a>
</div>
</div>
</div>
<div class='widget-content'>
<div id='slider2'>
<div id='mask'>
<ul>
<li><a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></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='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a>
</li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
<li>
<a href='#' title='Dark Kage | Blogger Newbie'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVKv7FDTvXmoR5gHmSbdJgsPykvvsmFDXdzZ1rSzThUFfGxJ-dk5l2wRGMrQAhq1Co1pAwdeZNPbJtEON0VfE9HkavQh86ioKyvFlPOP1bB65C2pjLssv7CXVwgW3B8dnc8n6A2i5CHkl/s1600/468-With-Spin.gif'/></a></li>
</ul>
</div>
<div id='progress'>
</div>
<div id='overlay'>
</div>
<div id='pause'>
</div>
</div>
</div>

Untuk kodenya bisa kalian edit edit lagi.
Semoga Bermanfaat!!!!!

JIKA MAU COPAS, SERTAKAN SUMBER!!!!!

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest