Cara Membuat Satu Kolom Dibawah Header dan di Atas Postingan

Postingan Artikel : 27 Februari 2012

Update / Pembaharuan Artikel : 1 Maret 2014

Flamboyan68 - Artikel ini sudah terlalu lama saya simpan di skejul postingan, biar enggak menumpuk saya share biar bersih. Postingannya masih seputar tutorial blog yang pastinya sudah banyak para blogger  memposting artikel ini, biar terlambat asal bermanfaat bagi saya dan sobat semua.  Membuat satu Kolom Di Bawah Header masih sama ketika sobat membuat satu kolom widget diatas header , bedanya hanya letak penempatan saja. Kolom si bawah header ini bisa memberikan manfaat bagi sobat untuk memasang beberapa konten yang ingin ditampilkan dibawah header.

Di bawah ini ada cara dan langkah untuk pemasangannya :

( - ) Masuk ke akun blogger sobat

( - ) Klik menu Template (sebaiknya backup terlebih dahulu template sobat untuk menghindari kesalahan pada pemasangannya)

( - ) Edit Html   gunakan Ctrl + F  untuk mempermudah pencarian

( - ) Lalu sobat cari kode ]]></b:skin>

( - ) Copy dan letakkan kode di bawah ini tepat diatas kode ]]></b:skin>

  #oneunderheader{margin:10px 0;padding:1%;width:100%;}

( - ) Kemudian cari lagi kode di bawah ini 

<div id='header-wrapper'> 

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> 

</b:section> 

</div> 

( - ) Letakkan kode di bawah ini tepat dibawah kode di atas dengan posisi di bawah kode </div>
 

<div id='oneunderheader'>

<b:section class='header' id='oneunderheader' preferred='yes'/> 

</div> 

( - ) Hasilnya akan menjadi seperti di bawah ini :

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> 

</b:section> 

</div> 

<div id='oneunderheader'>

<b:section class='header' id='oneunderheader' preferred='yes'/> 

</div>

( - ) Simpan template

• Cara Menambah Kolom Baru di Atas Postingan

Pada posisi widget/kolom baru ini sangat cocok untuk dipasang sebagai kolom iklan, kolom sliding dan widget lainnya. Silahkan sobat ikuti tutorial di bawah ini :

( - ) Langkah atau caranya sama seperti yang diatas dan sebelumnya sobat  backup template terlebih dahulu.

( - ) Cari kode ]]></b:skin>

( - ) Lalu copy kode di bawah ini :

<style>.atasposting{ background: #fff;
    border: 0px solid #0B610B;
    margin: 0 0 0.5em;
    padding: 2PX;}
.atasposting.widget{}</style>

( - ) Kemudian cari kembali kode  <div id='main-wrapper'> atau sobat cari kode <div id='content-wrapper'> (setiap mempunyai kode yang berbeda pilih salah satunya)

( - ) Kemudian copy dan paste kode di bawah ini tepat di bawah salah satu kode diatas :

 

<b:section class='atasposting' id='ataspostin' preferred='yes'/>

( - ) Terakhir simpan template

Semoga bermanfaat.