Cara Pasang Multi Tabbed Widget Mudah

Bismillahirrahmanirrahim...

MULTI PASTE - Menggunakan Multi Tabbed Widget, terbilang baik sebagai solusi untuk menghemat space blog terutama pada side bar. Artikel ini saya publikasikan sebagai kelanjutan pembahasan dari artikel sebelumnya yang membahas cara Menggunakan Multi Tabbed Widget untuk Menghemat Space Blog, karena dari artikel ini ada pengunjung blog yang bertanya seperti ini "maap, tapi bisa gk widget nya ditaruh bukan di paling atas? saya sih inginnya menaruh widget nya di tengah ato di bawah...apakah bisa??". Saya sangat ber-terima kasih atas respon pengunjung blog terhadap artikel-artikel yang saya publikasikan karena dari pertanyaan ini muncul ide untuk menulis artikel selanjutnya.

Sebelum anda bereksperimen, sebaiknya Backup Template anda terlebih dahulu. Kembali ke pokok bahasan bagaimana Mengatur Layout Blog untuk Multi Tabbed widget.

1.  Meletakkan Multi Tabbed Widget pada Bagian Atas Side Bar Blog

Jika Widget ini akan diletakkan pada bagian atas side bar blog, maka anda cukup mengikuti tutorial, seperti yang sudah saya publikasikan pada artikel Menggunakan Multi Tabbed Widget untuk Menghemat Space Blog, dengan mengikuti tutorial ini, otomatis widget akan di letakkan pada bagian atas side bar.

2.  Meletakkan Multi Tabbed Widget pada Bagian Bawah Side Bar Blog

Untuk melatakkan widget ini di bagian bawah pada side bar, jika anda menggunakan default template blogger cari kode seperti di bawah ini :

<div class='column-right-inner'>

Sisipkan kode Multi Tabbed Widget pada element ini, sehingga kode akan menjadi seperti di bawah ini :

<div class='column-right-inner'>
  <aside>
  <macro:include id='main-column-right-sections' name='sections'>
    <macro:param default='2' name='num' value='1'/>
    <macro:param default='sidebar-right' name='idPrefix'/>
    <macro:param default='sidebar' name='class'/>
    <macro:param default='true' name='includeBottom'/>
  </macro:include>
  </aside>

SISIPKAKAN KODE MULTI TABBED WIDGET DI SINI

</div>
</div>
</div>


<div style='clear: both'/>

Atau jika menggunakan template eksternal, cari kode seperti di bawah ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Berhubung saat ini template blogger sangat beragam, kemungkinan kode yang dimaksud akan berbeda sehingga tidak ditemukan, untuk itu anda harus mengenal komponen side bar template yang anda gunakan, cobalah gunakan bantuan ad-ons Firebug dari Mozilla Firefox.

Beikut paste script Multi Tabbed Widget bagian ke dua, tepat dibawah kode tersebut, script bisa anda lihat pada artikel sebelumnya tentang Menggunakan Multi Tabbed Widget untuk Menghemat Space Blog, sehingga kode akan menjadi seperti di bawah ini

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

PASTE/TAMBAHKAN KODE MULTI TABBED WIDGET DI SINI

Catatan : Jika sebelumnya anda sudah pernah menambahkan beberapa widget maka dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'> akan terdapat kode-kode widget tersebut, maka tambahkan saja kode multi tabbed widget setelah kode penutup </div> dan jika berhasil, maka layout side bar blog akan tampak seperti gambar berikut :

3.  Meletakkan Multi Tabbed Widget pada Bagian Tengah Side Bar Blog

Jika ingin meletakkan widget ini pada bagian tengah side bar blog, ikuti saja tutorial pada poin nomor 2 (Meletakkan Multi Tabbed Widget pada Bagian Bawah Side Bar Blog), kemudian tambahkan lagi kode berikut ini di bawahnya :

<div class='column-right-inner'>
<b:section class='main' id='main-column-right-sections' showaddelement='yes'>
</b:section>
</div>

Simpan template, selanjutnya silahkan periksa Layout blog anda, jika berhasil, maka layout side bar akan tampak seperti gambar berikut :

Silahkan anda bereksperimen, namun sebaiknya jangan lupa untuk melakukan Backup Template anda terlebih dahulu, jika berhasil jangan lupa ucapkan Alhamdulillah...