Cara Membuat Tabs Widget

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