Pada kesempatan kali ini Abenk akan membahas cara membuat Sidebar Multi tab dengan sedikit efek jQuery, seperti yang kita ketahui kebanyakan blog atau website memiliki banyak widdget pada sidebarnya, bisa mencapai 5 sampai 10 widget pada tiap website, misalnya POPULAR POST, LABEL, RECENT POST dan lain-lain. Sidebar Multi Tab ini ada dua macam yaitu dengan cara Edit HTML dan tanpa Edit HTML.
Dengan Edit HTML, Widget bawaan blogger seperti lar POPULAR POST, LABEL, ARCHIVE, FOLLOWR dan lain-lain, yang asli punya blogger bisa dimasukan kedalam sidebar multi tab ini, karena memanfaatkan fungsi asli penambahan widget yaitu pada layout tambah gadget.
Dan yang akan Abenk share disini yaitu sidebar multi tab dengan melalui Edit HTML. Fungsi dari sidebar multi tab ini adalah untuk meminimalisir penggunaan ruang pada sidebar sehingga widget terlihat tidak terlalu banyak.
1. Login ke blogger.
2. Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style>
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>
3. Kemudian letakkan kode berikut ini dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
( jika ingin di posisi bawah pasang kode ini di atas (<footer> )
<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>
4. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin sobat tambahkan nanti.
5. Simpan Template
| DEMO |
Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:
۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.
No comments :
Post a Comment