Membuat Widget 3 Kolom Dibawah Header

Baiklah langsung menuju lokasi pengeditan template-nya.

•  Silahkan login ke blogger.
• Tuju Tata Letak.
• Pilih tab Edit HML.
• Jangan di klik Expand Template Widget, karena akan memusingkan sobat.
• Letakkan kode css berikut ini diatas kode ]]></b:skin>
• untuk memudahkan pencarian tekan ctrl+f

  /* –- Top --*/

  #top {

  background:#fff;

  margin-top:10px auto;

  width:960px;

  overflow:hidden;

  font-size:12px;

  padding:10px;

  }

  
  

  #top h2 {

  background:#000 url(http://i1207.photobucket.com/albums/bb477/Tanpa_Identitas1/zzz.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/AVvXsEg4PiqUXDnC5T0gnrSA1f7ORevCphyphenhypheno0sNn7GiosWPS2APSXxXKgibKJ5YDTktC9yiWqaaxqKQ7gJ1xKBj9IAdfpf_GGIRC77fsfGi3tI65tF3Obnk-0nA-s3l0030Ftu9mLMFb0hOpysvC/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 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 SOBAT (Header)' type='Header'/>
</b:section>

</div>

kode tidak harus sama lihat yang bagian bawah judul blog anda itu yang menjadi patokannya

Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<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>

Simpan Template.