Cara membuat tabs widget untuk menghemat ruang pada blog sudah sering di tulis pada artikel blog-blog tetangga. Bermacam-macam trik yang mereka berikan untuk dapat berbagi ilmu kepada para reader.  Ada yang mudah untuk dipraktekan namun ada juga yang cukup membingungkan dan diantaranya ada juga yang memberikan trik yang sama karena "mungkin mereka 1 guru dan 1 ilmu" :) Kali ini saya juga ingin ikut berpartisipasi dalam menyebarkan  cara membuat tab widget yang menurut saya cukup mudah untuk dipraktekan...

Seperti biasa silahkan masuk ke blogger >>> rancangan >>> Edit HTML

Langkah Pertama: Masukan kode dibawah ini tepat diatas kode </head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>

Langkah selanjutnya : Cari kode <div id='sidebar-wrapper'> atau terserah anda ingin memasang tabs widget ini dibagian mana pada blog anda :) dan letakan kode dibawah ini tepat dibawahnya.
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Popular Post</span></a></li>
<li><a href="#fragment-2"><span>Categories</span></a></li>
<li><a href="#fragment-3"><span>Archive</span></a></li>
</ul>
<div id="fragment-1">
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/>
</b:section>
</div>
<div id="fragment-2">
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
<div id="fragment-3">
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
</div>

</div>


Setelah itu klik PRATINJAU terlebih dahulu, jika sudah OK, SIMPAN TEMPLATE dan  Selesai.


Catatan:
Untuk tulisan yang berwana merah, silahkan ganti dengan nama dan widget yang sesuai dengan selera anda. Anda juga bisa menambahkan tabs dengan menambah kode dibawahnya sebelum kode </div> yang berwarna hijau.
contoh:

<div id="fragment-3">
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
</div>
<div id="fragment-4">
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>


 < !-- dan seterusnya "perhatikan angka yang berwarna biru" -->

</div>

Demikian Cara Membuat Tabs Widget ala Dente On The Blog, semoga trik ini dapat bermanfaat bagi kita semua dan jangan lupa untuk menjadi follower blog ini...

Terima Kasih

5 comment:

  1. makasih atas informasinya... tapi sekarang template yang banyak dipakai sudah ada fasilitas tab widgate-nya.
    makasih sudah mau share, maaf baru bisa berkunjung. salam...

    ReplyDelete
  2. Terima kasih kembali atas kunjungannya.
    Begini sob, memang betul template baru sekarang sudah banyak yang menyediakan fitur tabs widget. Yang jadi masalah adalah kode css-nya membuat beban blog bertambah berat. Coba test berat loading template yang baru yang sudah ada tabs widgetnya, pasti beratnya lebih dari 100kb. Nah kalau pakai cara diatas, kita memanggil kode css yang di host ditempat lain. Jadi tidak banyak berpengaruh pada berat loading. Contohnya blog ini beratnya cuma 61kb, karena memang saya banyak menghapus kode css yang tidak terpakai, bgt sob :)

    ReplyDelete
  3. sudah terpasang di blogku, www.elhijrah.blogspot.com cuma ada kekurangan. tab tidak otomatis terbuka ketika dilalui cursor berbeda dgn yg ada disini. mohon pencerahannya.

    ReplyDelete
  4. @Elhijrah : coba ganti

    $("#tabs").tabs();
    });

    dengan

    $("#tabs").tabs({ event: 'mouseover' });
    });

    Semoga berhasil :)

    ReplyDelete
  5. alhamdulillah... berhasil kang ^^

    ReplyDelete

Blog ini tidak memiliki "rel nofollow", silahkan gunakan fasilitas ini dengan bijak. Dengan tidak adanya moderasi komentar, diharapkan untuk berkomentar dengan baik. Hendaklah tidak menulis kata-kata yang berbau pornografi dan SARA. Saya berhak menghapus komentar yang melanggar segala ketentuan saya diatas, harap maklum dan Terima Kasih

 
Top