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>

  /* –- 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/AVvXsEjiO-oOL-QQt7g3gl7SDn7bdYw3T60tBpafYudtMvUqcNOM4rZWfXFSUfFW5SyR1A8_pXBN6aTJ40O16NOzSA9_hjWAp-gUWwSOguIUH2tK99rkw7ETdgLAmdauEb_K6ZFR6bgq_LyP36WH/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>

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