Wednesday, March 12, 2014

Cara Membuat Box Di Bawah Header V.1



Assalamualikum Wr Wb
Halo Para Pengunjung Blog Grew Uchiha Kali Ini Grew Uchiha Akan Share Tentang  Cara Membuat Box Di Bawah Header V.1 Seperti Punya Grew Uchiha.Oke Langsung Aja Cara Nya Ada Di Bawah :v

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 Grew Uchiha
----------------------------------------------- */
#Blog-Banner2 {
margin-top: 10px;
margin-left: -35px;
width: 1045px;
height: 40px;
margin-bottom: 10px;
text-align: center;
background: #000000;
border: 2px solid #0048ff;
border-top-color: #0048ff;
border-top-style: solid;
border-top-width: 2px;
border-right-color: #0048ff;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: #0048ff;
border-bottom-style: solid;
border-bottom-width: 2px;
border-left-color: #0048ff;
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 #0048ff;
-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 #0048ff;}
#Blog-Banner2:hover {
height: 110px;
}
#Blog-Banner2 h2 {
color: #0048ff;
font-family: "Bitter",arial,sans-serif;
margin-bottom: 5px;
font-size: 14pt;
text-align: center;
border-bottom: 1px solid #000000;
height: 27px;
}
#MIMB1{margin-left: 4px;
background: #000;
border: 3px solid #0048ff;
font-family: "Bitter",arial,sans-serif;
margin-bottom: 5px;
font-size: 14pt;
text-align: center;
border-bottom: 1px solid #0048ff;
height: 27px;
width: 505px;
height: auto;
float: left;
margin-top: -211px;
border-bottom: 3px solid #0048ff;
}
#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:5px Groove #0048ff; 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: -69px;
margin-left: 4px;
overflow: hidden;
background-color: #000;
border: 3px solid #000;
position: absolute;
border-radius: 0px;
}
#mask{overflow:hidden}#slider3: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: -315px;
margin-left: 478px;
overflow: hidden;
background-color: #000;
border: 5px solid #0048ff;
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 groove #0048ff;
border-bottom: 4px solid #0048ff;
border-radius: 5px;
width: 117px;
height: 26px;
float: right;
}
#JTS .widget-content{padding:0px; margin:0px}
#MODalexa{
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: 632px;
margin-top: 185px;
border-radius: 0px 0px 0px 0px;
border-bottom-color: rgb(0, 0, 0);
}
#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 Teman </h2><a href='#' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-O2U8kbQwXCo/UvYlH448RPI/AAAAAAAABs0/QG3ZCQ0z7ak/s1600/Banner-Grew-Uchiha-468.gif'/></a><a href='#' title='Grew Uchiha | Blogger'><img src='http://4.bp.blogspot.com/-gMkmnXHYZ2U/Uw3aqWdO3RI/AAAAAAAAB3w/q9vyoeJgqTo/s1600/Banner-Grew-Uchiha.gif'/></a></div><div class='SSK'><div id='MODalexa'><a href='http://www.alexa.com/siteinfo/http://grewuchiha8.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=http://grewuchiha8.blogspot.com/' type='text/javascript'/></a></div><div id='JTS'><div class='widget-content'><a href='https://www.blogger.com/profile/06555621349370992389' 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://grewuchiha8.blogspot.com/' target='_blank'><img height='125' src='http://2.bp.blogspot.com/-CNqVcZH8NtE/UxQAcC_5KcI/AAAAAAAAB7g/hOPUSBc3XxU/s1600/ADS-YOUR-BANNER.gif' title='Tema, Trick, Template , Html, Pengetahuan, Sofware' width='125'/></a><a href='http://lerry-jco.blogspot.com/' target='Lerry JCo'><img height='125' src='http://4.bp.blogspot.com/-6dQ01VRH8Kk/UxMmIUh3kfI/AAAAAAAAACQ/GAWvIiZpXV0/s1600/yIuWGSU.gif' title='Exchange,Tutorial Blog,Template,List Anime,My Facebook,TV Online,Tools Warna' width='125'/></a><a href='http://grewuchiha8.blogspot.com/' target='_blank'><img height='125' src='http://2.bp.blogspot.com/-CNqVcZH8NtE/UxQAcC_5KcI/AAAAAAAAB7g/hOPUSBc3XxU/s1600/ADS-YOUR-BANNER.gif' title='Tema, Trick, Template , Html, Pengetahuan, Sofware' width='125'/></a><a href='http://grewuchiha8.blogspot.com/' target='_blank'><img height='125' src='http://2.bp.blogspot.com/-CNqVcZH8NtE/UxQAcC_5KcI/AAAAAAAAB7g/hOPUSBc3XxU/s1600/ADS-YOUR-BANNER.gif' title='Tema, Trick, Template , Html, Pengetahuan, Sofware' width='125'/></a></div></div></div><div class='widget-content'><div id='slider3'><div id='mask'><ul><li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-tzgRZKySXHs/Uw3mK8mObsI/AAAAAAAAB4M/0Q623P42W5w/s1600/BANNER-GREW.gif'/></a></li><li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-O2U8kbQwXCo/UvYlH448RPI/AAAAAAAABs0/QG3ZCQ0z7ak/s1600/Banner-Grew-Uchiha-468.gif'/></a></li><li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger '><img src='http://4.bp.blogspot.com/-gMkmnXHYZ2U/Uw3aqWdO3RI/AAAAAAAAB3w/q9vyoeJgqTo/s1600/Banner-Grew-Uchiha.gif'/></a></li><li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-tzgRZKySXHs/Uw3mK8mObsI/AAAAAAAAB4M/0Q623P42W5w/s1600/BANNER-GREW.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='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-tzgRZKySXHs/Uw3mK8mObsI/AAAAAAAAB4M/0Q623P42W5w/s1600/BANNER-GREW.gif'/></a></li><li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://2.bp.blogspot.com/-O2U8kbQwXCo/UvYlH448RPI/AAAAAAAABs0/QG3ZCQ0z7ak/s1600/Banner-Grew-Uchiha-468.gif'/></a></li><a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger'><img src='http://4.bp.blogspot.com/-gMkmnXHYZ2U/Uw3aqWdO3RI/AAAAAAAAB3w/q9vyoeJgqTo/s1600/Banner-Grew-Uchiha.gif'/></a><li>  <a href='http://grewuchiha8.blogspot.com/' title='Grew Uchiha | Blogger Newbie'><img src='http://2.bp.blogspot.com/-tzgRZKySXHs/Uw3mK8mObsI/AAAAAAAAB4M/0Q623P42W5w/s1600/BANNER-GREW.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!!!!!Kalau Kurang Mengerti Tanya Kan Aja Di Komentar :v

Bagikan

Jangan lewatkan

Cara Membuat Box Di Bawah Header V.1
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.