Membuat 3 Kolom Dibawah Header

Hai sobat kali ini saya akan posting tentang membuat 3 kolom dibawah header bagaimana sobat lihat judulnya saja sudah keren banget apalagi nanti kalo udah dibuat pasti jadinya keren banget. Nah untuk screenshotnya ini dia :



Cara membuat :

  • login ke blogger
  • pilih rancangan => edit html
  • centang expand template widget
  • cari kode ]]></b:skin> 
  • letakkan kode berikut diatas kode tadi
/* –- Top --*/
#top {
background:#fff;
margin-top:10px auto;
width:960px;overflow:hidden;
font-size:12px;
padding:10px;
}
#top 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;
}
#top ul {
color:#333;
margin:0;
padding:0;
}
#top ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEruG1mtFJBQg9UnupQOLkxh4nWyGL3pes1YiGTeX-czYLGF1PbN2TmBpxUmKEQR2DKnVIUe-7qNULoYRQL8-T2z95j9C7KUMtaV98zkUC4-5FjN03Ydcm2iavU7aNVV3L8Y8vq8bNiE0/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}
#top ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}
#topcenter {
width:300px;float:left;
margin-left:10px;
background:#fff;
padding:10px
}
#topleft {
width:280px;float:left;
margin-left:10px;
background:#fff;
padding:10px;
}
#topright {
width:280px;float:right;
margin-left:10px;
background:#fff;
padding:10px;
}

  • cari kode <div id ='header-wrapper'> pastikan bagiannya hampir mirip dengan ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
</div>

  • letakkan kode berikut diatas kode tadi 
 <div id='top'><b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>

  • kemudian save template dan lihat elemnt halamannya 


Post a Comment

W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.

Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.

Terima kasih untuk kunjungannya.