Top Ad 728x90

Cara Mudah Membuat widget Multi Tab SideBar Di Blog

Cara Mudah Membuat widget Multi Tab SIdeBar Di Blog




Halo sobat…Disini kami akan share tentang bagaimana cara membuat widget multi tab pada sidebar blog. Fungsi multi tab sendiri yakni sebagai penghemat ruang pada sidebar blog, tentunya juga akan membuat blog sobat terlihat menarik dan rapi. Caran penerapannya cukup mudah sobat.


Simak di bawah ini !


Login ke dasabor blogger>>klik menu template>>edit template.

Kemudian cari kode ]]></b:skin> atau </style>
dan terapkan kode CSS berikut ini tepat diatas kode tersebut.
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}


Selanjutnya, cari kode </body> dan terapkan kode JQuery berikut ini tepat diatas kode tersebut.
 <script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script> 



Kemudian cari kode <div id='sidebar-wrapper'> dan terapkan kode HTML berkut ini tepat diatasnya..
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>

Langkah terakhir simpan dan lihat hasilnya.

Nah untuk demo, kurang lebih hasilnya seperti mult tab pada sidebar kanan di blog ini.

Itulah cara mudah membuat widget multi tab pada sidebar blog, semoga bermanfaat.

Source: http://arlinadesign.blogspot.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html


#Bantu Bagikan Artikel Kami Dong :)

1 komentar:

  1. gan kalo nggak ada niat ngasi info jangan taruh iklan di sebelah kiri... kan jadinya nggak bisa kebaca trimakasih sebelumnya...

    ReplyDelete