Cara Menambah Kolom Add Widget Blogger

Tutorial Blogger "Cara menambah kolom add widget blogger" atau "1 kolom widget baru" seperti ini sudah lama beredar di internet, namun saya ingin membuat sesuatu yang baru dengan sebuah pemahaman mengenai template blogger agar setiap orang bisa membuat atau menambah kolom widget baru pada template mereka. Ini sangat penting dipelajari karena ini menyangkut keindahan atau ke praktisan sebuah desain web (situs blog) yang kita kelola.

Catatan: Setiap template umum-nya memiliki 4 (empat) kolom (tata letak) dasar yaitu: Header, Main, Sidebar dan Footer. "Header" berarti kepala atas, "Main" berarti badan atau pusat letak artikel "Sidebar" artinya bilah samping dan "Footer" artinya kaki (Bilah bawah)

Selain dari empat bagian tersebut kita bisa menambahkan beberapa kolom widget tambahan misalnya 1 kolom disamping header untuk tempat iklan atau menambahkan kolom widget dibawah header biasa disebut top-featured, 2 kolom atau 1 kolom. Bisa juga membagi sidebar menjadi tiga bagian (3 kolom) dan bisa juga menambahkan beberapa kolom widget di bawah badan "main", soal isi widget kamu bisa memikirkan-nya nanti setelah kolom add widget berhasil di tambahkan.

Kode HTML Dasar Kolom Widget

[code type="HTML"]<div id='topfeatured-area'>
    <b:section class='homepost' id='top-featured' preferred='yes'/>
</div>[/code]
Kode diatas merupakan kode html untuk membuat atau menambah kolom widget (gadget), jika template blog kamu mengunakan tag <div id='name'>. Tetapi jika template kamu menggunakan tag <div class='name'> maka lebih baik ikuti struktur template kamu saja dengan menambahkan kode tag html kolom widget baru seperti kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>[/code]
Kedua kode html di atas merupakan kode paling dasar untuk menambah 1 kolom widget baru, memang itu sudah sangat cukup untuk membuat sebuah kolom widget tambahan, namun jika kamu berencana banyak menggunakan css maka kode tag html kolom widget baru bisa ditambahkan dengan memasang kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
<div class='wrap'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>
</div>[/code]
Nah, sekarang dimana kode tag html "kolom widget" ini bisa diletakkan? kede tersebut bisa di pasang/diletakkan dimana saja di dalam template kamu asalkan ditempatkan di bawah penutup header </header> atau tag penutup </div>.

Contoh Menambahkan Tag Html "Kolom Widget Baru" di bawah Header

Namun harus diingat, menambahkan tag html kolom wigdet baru di bawah tag penutup </header> tidak selalu berhasil. Karena biasa-nya di bawah header sudah disisipkan element lain seperti menunavigasi, search box atau mungkin widget newsticker. Maka untuk untuk menambahkan kolom widget baru kita harus mencari tag </div> penutup dari 3 element tersebut. Sebagai contoh lihat gambar dibawah ini.

Zoom Gambar: Ini contoh "menambah kolom widget" di bawah tag penutup </div>

Meski kode tag html "kolom widget baru" ditambahkan di bawah tag penutup div, posisi kolom widget/gadget tetap berada di bawah header tepat nya di bawah menu dan di atas main atau body. Klick save dan lihat pertinjau tata letak blog anda. Untuk memastikan bahwa kamu telah berhasil menambahkan 1 kolom widget dibawah header.

Langkah terakhir adalah merapikan posisi tata letak widget dengan style css. Tambahkan css berikut ini tepat di atas kode ]]></b:skin>.
[code type="CSS"]#topfeatured-area{width:100%;margin:10px}
body#layout #top-featured .wrap{width:auto;float:left;padding:10px;}[/code]
Demikian saja cara menambahkan kolom widget baru di bawah header, sebagai penjelasan tambahan kamu bisa menambah kolom widget dimana saja yang kamu mau jika sudah paham batas-batas elemen html template, bahkan kamu bisa membuat sidebar menjadi 3 bagian atau menambah widget di bawah main (body).

Catatan: jangan terfokus pada topfeatured-area dan top-featured itu merupakan id element saja, kamu bisa mengganti-nya dengan nama lain. Jika didalam template sudah ada "id" top-featured maka kode tidak bisa di simpan kedalam template, kamu harus mengganti topfeatured-area dengan name-id yang lain.