Haloo sobat AHS.. pada kesempatan ini saya ingin membagikan tutorial tentang
Cara Membuat 3 Box Di Bawah Header..
mungkin tutorial ini bisa berguna bagi anda yang sedang mencari" tutorial sejenis..
ya sobat,, meskipun tutorial ini sebenarnya sudah lama,, tapi ngga papalah..
oke langsung saja ya sobat,..
Cara Membuat 3 Box Di Bawah Header
- pertama jelas masuk blogger
- lalu,, masuk dashboard > template > edit template
- kemudian cari kode ]]></b:skin> lalu copy kode dibawah,kemudian paste di atas ]]></b:skin>(gunakanlah Ctrl+F agar lebih cepat)
/* -- Headerbox --*/
#box {
background:#fff;
margin-top:10px auto;
width:960px;*ganti sesuai keinginan*
overflow:hidden;
font-size:12px;
padding:10px;
}
#box h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
font-size:14pt;
font-weight:400;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#fff;
padding:5px;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}
#box ul {
color:#333;
margin:0;
padding:0;
}
#box ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyb2OwzETdQ6dFlAWM4xzO-q_sz9ix3Hm62Uni5kQy5r-1b9Yp8T1X44bN2OAJKIl-K9Z6gnmlBg4hcPd8LbttoX78nzFfdKOT1nDdmVZmZ1FZbaHsMMvU8uGFxuLT1eel1p5onjVniabA/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}
#box ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}
#boxcenter {
width:300px;*ganti sesuai keinginan*
float:left;
margin-left:10px;
background:#fff;
padding:10px
}
#boxleft {
width:280px;/*ganti sesuai keinginan*/
float:left;
margin-left:10px;
background:#fff;
padding:10px;
}
#boxright {
width:280px;/*ganti sesuai keinginan*/
float:right;
margin-left:10px;
background:#fff;
padding:10px;
}
sudah kan??
- selanjutnya,,cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
sudah ketemu kan??
- kemudian letakkan kode berikut ini tepat setelah kode diatas
<div id='box'>
<b:section class='box' id='boxleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='boxcenter' id='boxcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='boxright' id='boxright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Versi Lain
sebenarnya sama seperti diatas,,tetapi menurutku ini jauh lebih simple
Okee,, mari kita simak tutorial ini,,..
- saya anggap anda sudah login dan sudah berada di edit template
- selanjutnya,,cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya
#box-main-ahs {
clear:both;
}
.box-ahs{
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
- kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode berikut diatasnya
<div id='box-main-ahs'>
<div id='boxahs1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-ahs' id='ahs1' preferred='yes' style='float:left;'/>
</div>
<div id='boxahs2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-ahs' id='ahs2' preferred='yes' style='float:left;'/>
</div>
<div id='boxahs3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-ahs' id='ahs3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
- sudah kan??
- coba sekarang anda preview/pratinjau dulu,lalu baru save
Anda sudah selesai dan berhasil memasang box dibawah header
Oke,,sampai disini dulu ya.. semoga bermanfaat.