Trik Dan Tips Cara Menambah Kolom Widget Di Blog (Template)

Tutorial blogger "cara menambah 1 kolom widget" atau " 1 kolom gadget" ibarat ini sudah usang beredar di internet, namun aku ingin menciptakan sesuatu yang gres dengan sebuah pemahaman mengenai template blogger supaya setiap orang dapat menciptakan atau menambah kolom widget gres pada template mereka. Ini sangat penting dipelajari sebab ini menyangkut keindahan atau ke praktisan sebuah desain web (situs blog) yang kita kelola.

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

Selain dari empat belahan tersebut kita dapat menambahkan beberapa kolom widget pemanis contohnya 1 kolom disamping header untuk daerah iklan atau menambahkan kolom widget dibawah header biasa disebut top featured, 2 kolom atau 1 kolom. Kemudian membagi sidebar menjadi tiga belahan (3 kolom) dan dapat juga menambahkan beberapa kolom widget di bawah tubuh "main" Nah, sedangkan widget merupakan isi dari semua belahan "kolom-kolom" tersebut.

Kode HTML Dasar Kolom Widget

<div id='topfeatured-area'>
    <b:section class='homepost' id='top-featured' preferred='yes'/>
    </div>

Kode diatas merupakan instruksi html untuk menciptakan atau menambah kolom widget (gadget), jikalau template blog kau mengunakan tag <div id=''>. Tetapi jikalau template kau memakai tag <div class=''> maka lebih baik ikuti struktur template kau saja dengan menambahkan instruksi tag html kolom widget gres ibarat instruksi dibawah ini.

<div class='topfeatured-area'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>

Kedua instruksi html di atas merupakan instruksi paling dasar untuk menambah 1 kolom widget baru, memang itu sudah sangat cukup untuk menciptakan sebuah kolom widget tambahan, namun jikalau kau berencana banyak memakai css maka instruksi tag html kolom widget gres dapat di tambahkan dengan memasang instruksi dibawah ini.

<div class='topfeatured-area'>
<div class='wrap'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>
</div>

Nah, kini dimana instruksi tag html "kolom widget" ini dapat diletakkan? kede tersebut dapat di pasang/diletakkan dimana saja didalam template kau asalkan ditempatkan di bawah epilog header </header> atau div epilog yaitu </div>.

Klik Template > Edit Html > Lompat Ke Widget > Pilih Header1

Contoh Menambahkan Tag Html "kolom widget baru" di bawah </header> Penutup

Namun harus diingat, menambahkan tag html kolom wigdet gres di bawah </header> epilog tidak selama-nya berhasil. Karena biasa-nya di bawah header epilog sudah disisipkan element lain ibarat Dropdown Menu, Search Box atau Newsticker. Maka untuk untuk menambahkan kolom widget gres kita harus mencari tag </div> epilog dari 3 element tersebut. Sebagai pola lihat gambar dibawah ini.

Zoom Gambar: Ini pola "menambah kolom widget" di bawah tag div penutup

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

Langkah terakhir yaitu merapikan posisi tata letak widget dengan style css. Tambahkan css berikut ini sempurna di atas kode ]]></b:skin>.

#topfeatured-area{width:100%;margin:10px}
body#layout #top-featured .wrap{width:auto;float:left;padding:10px;}

Nah demikian cara menambahkan kolom widget gres di bawah header, sebagai klarifikasi pemanis kau dapat menambah kolom widget dimana saja yang kau mau jikalau sudah paham, bahkan kau dapat menciptakan sidebar menjadi 3 bagian. Menambah widget di bawah main (body). Catatan: jangan terfokus pada topfeatured-area dan top-featured itu merupakan id element saja, kau dapat mengganti-nya dengan nama lain. Jika didalam template sudah ada "id" top-featured maka instruksi tidak dapat di simpan kedalam template, kau harus mengganti topfeatured-area dengan nama yang lain.