Cara Buat Box Di Bawah Header V.2

Assalamualaikuam Wr Wb

Oke.. All . Oke Kali Ini Post Lagi 

Oke Lah Udah Taukan Judulnya 

Judulnya Yaitu Cara Buat Box Di Bawah Header V.2

Nihh SSnya

Keren kan?? Langsung aja kita menuju ke TKP!!!

1 . Log In Blogger
2 . Pilih Blog Kamu
3 . Pergi Ke Template 
4 . Klik Edit HTML
5 . Cari Kode ]]></b:skin>
6 . Masukan Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

/* Box Dibawah Header*/
#MODrangka1{ margin-top:20;margin-left: 0px ;margin-bottom:20px ;border:5px solid #0000FF;border-radius:10px 10px 10px 10px ;width:1090px;height:300px; background: #000; position:relative;}
#MODrangka1 img{opacity:0.5; -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 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out}
#MODrangka1 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)}
#MIMAdz{background:#000; width:290px; height:270px; border:5px solid #0000FF;border-left:none;border-radius: 0px 30px 30px 0px;float:left; margin-left:-5px; margin-top:9px;}
#MAdz{margin-top:0px; padding:0px; text-align:center}
#MAdz img{-webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); border:1px solid #0000FF; border-radius:70px; margin:1px 1px; text-align:center; padding:0px; margin-left:0px; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out}
#MAdz img:hover{border-radius:10px; border:1px solid #0000FF; -webkit-filter:grayscale(0%); -moz-filter:grayscale(0%); -ms-filter:grayscale(0%); -o-filter:grayscale(0%); filter:grayscale(0%); -moz-transform:rotate(715deg); -webkit-transform:rotate(715deg); -o-transform:rotate(715deg)}
#footerx5{float: left;margin-top: -5px;margin-left: 20px;width: 40px;height:40px;display: inline;border-left:5px solid #0000FF;border-right:5px solid #0000FF;border-bottom:5px solid #0000FF;background:#000;position:relative;border-radius:0px 0px 10px 10px;}
#footerx6{float: left;margin-top: 260px;margin-left: -50px;width: 40px;height:40px;display: inline;width: 40px;height:40px;display: inline;border-left:5px solid #0000FF;border-right:5px solid #0000FF;border-top:5px solid #0000FF;background:#000;position:relative;border-radius:10px 10px 0px 0px;}
#footerx7{float: left;margin-top: 75px;margin-left: -50px;width: 40px;height:140px;display: inline;border:5px solid #0000FF;background:#000;position:relative;border-radius:10px;}
#SSH{background:#000; width:480px; height:290px; float:left; margin-left:22px; margin-top:-5px; border:5px solid #0000FF;border-radius: 0px 0px 15px 15px; border-top:none}
#SSH li{display:block; position:relative; background:url('http://i1239.photobucket.com/albums/ff513/Ramapoetra24/log.png') no-repeat 15px .5em; margin-left:-20px; padding:2px 10px 2px 29px; font-size:12px; font-family:'Century Gothic'}
#SSH li:hover{display:block; position:relative; background:url('http://i1239.photobucket.com/albums/ff513/Ramapoetra24/lag.png')no-repeat 15px .5em; margin-left:-20px; padding:2px 10px 2px 29px; color:#0000FF; font-family:'Century Gothic'}
#SSH .widget-content{overflow:auto; height:265px; padding-left:10px}
#search input{margin-top:-5px; margin-right:-160px; position:relative}
#search input[type=text]{background:#000 url()no-repeat center left; font-size:15px; color:#fff; font-family:'Century Gothic'; width:145px; padding-left:10px; float:right; border:5px solid#0000FF; border-top:none; height:20px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
#search input[type=text]:focus{box-shadow:inset 0 0 10px rgba(0,0,0,0.5); border:5px solid #fff; border-top:none; width:183px}
#JTS{background:#000; margin-top:268px; margin-right:35px; padding:3px; border:5px solid #0000FF; border-bottom:none; border-radius:5px; width:117px; height:26px; float:right}
#JTS .widget-content{padding:0px; margin:0px}
#MAHJ125 img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
border: none;
margin: 0px 0px;
text-align: center;
padding: 0px;
margin-left: 0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
#MAHJ125 img:hover {
border-radius:1px;
border:none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
-moz-transform:rotate(715deg);
-webkit-transform:rotate(715deg);
-o-transform:rotate(715deg);
}
#JTS:hover{border:5px solid #ff0000;border-bottom:none;border-radius:5px;
background:#000;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
box-shadow: 0 0 15px 0 #fff;
-moz-box-shadow: 0 0 15px 0 #fff;
-webkit-box-shadow: 0 0 15px 0#fff;
}
#MODalexa{-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
border: 5px solid #0000FF;
float: left;
background: Transparent;
padding-left: 0px;
width: 120px;
height: 95px;
margin-left: 920px;
margin-top: 100px;
border-radius: 0px 0px 0px 0px;
position: absolute;}
#MODalexa:hover{-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
border: 5px solid #0000FF;border-radius: 10px 10px 10px 10px;box-shadow:0 0 30px #006acc;}

7 . Oke Lanjutkan Dengan HTML nya
8 .  Sekarang Cari Kode <div id='content-wrapper'> Atau  <div id='content'> Pokoknya yang berhubungan Dengan Content
9 . Pasang Kode Di Bawah Ini Tepat Di Atas (  <div id='content-wrapper'> ,  <div id='content'> , Sejenisnya 

<div id='MODrangka1'>
<div id='MIMAdz'>
<div class='widget-content'>
<div id='MAdz'>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
  </div></div></div>
  <div id='footerx5'/>
  <div id='footerx6'/>
  <div id='footerx7'/>
<div id='MODalexa'>
<a href='http://www.alexa.com/siteinfo/http://maen-cit.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=http://maen-cit.blogspot.com/' type='text/javascript'/></a>
</div>
<div id='JTS'>
<div class='widget-content'>
<div id='MAHJ125'>
<a href='http://www.blogger.com/follow-blog.g?blogID=8479613044615183675' target='_blank'><img alt='Join This Site' src='http://goo.gl/7aybbA' title='Join This Site'/></a>
  </div></div></div>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search and Enter...' size='40' type='text'/>
</form>

10 . Simpan

Oke Lah Segitu Aja
NB Dari Gue : Usahakan Pratinjau dahulu kalau mau langsung Simpan Usahakan Download Dulu Template Ente Sebelum Di Edit
Sekian Dari Mimin Thank's For You Visiting

sumber:http://maen-cit.blogspot.com/2013/09/cara-buat-box-di-bawah-header-v2.html