Cara Mudah Membuat Multi Tabbed Widget

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

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

Ditulis Oleh : ImHero ~ Tempat Berbagi Dan Saling Bertukar Ilmu

Anda sedang membaca artikel tentang Cara Mudah Membuat Multi Tabbed Widget. Oleh Admin, Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mynametyo.blogspot.com/2012/08/cara-mudah-membuat-multi-tabbed-widget.html" target="_blank">Cara Mudah Membuat Multi Tabbed Widget</a>

:: Get this widget ! ::