Multi tab , Widget penghemat side bar

Baca Juga

Multi tab menurut saya penting pada sebuah blog , memang ini hanya sebuah widget namun widget ini sangat berpengaruh bagi kinarja blog dan loading blog seperti yang saya ungkapkan kemarin pada artikel sebelumnya. Multi tab ini adalah sebuah widget dimana widget tersebut bisa menggabungkan 3 widet yang berbeda ke dalam 1 tempat dan dengan begitu maka anda dapat menghemat penggunaan side bar. Jika di sidebar anda menggunakan banyak widget , misalnya Popular Post , Recent Post , Subscribe Box , dan lain sebagainya maka itu sangat lah boros tempat dan dengan begitu pula kinerja blog akan menurun dan efeknya adalha traffic. Selain untuk menghemat penggunaan side bar multi tab ini juga dapat memperindah tampilan halaman blog anda agar terlihat lebih rapih dan tidak berantakan. Dalam multi tab ini anda dapat menggabungkan 3/4/5 widget sekalipun tetapi saya sarankan untuk menggabungkan 3 saja agar terlihat rapih dan responsive tetapii jika 5 widget digabungkan dan anda mampu membuat tampilannya menarik dan responsive gaada salahnya , mainkan imajinasi anda untuk membuat multi tab ini menjaadi lebih menarik dan responsive.

Langkah - langkah membuat multi tab 

• Buka dashboar blogger
• buka template --> Edit HTML 
• copy dan paste kan kode dibawah ini tepat diatas ]]></b:skin> atau </style>

 /* 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 copy dan paste kan kode dibawah ini tepat diatas </body>

 <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 copy pastekan kode dibawah ini tepat dibawah <div id='sidebar-wrapper'>

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

NB : Ganti nama widget yang sudah saya beri tanda biru Ketika script sudah dimasukkan semua , silahkan simpan template dan lihat hasilnya.

Sekian artikel ini saya buat , semoga bisa membantu anda yang sedang membutuhkan ilmu yang ada pada artikel ini. Komentar dan saran anda bisa masukkan ke kolom yang sudah di sediakan , Jadilah blogger yang menguntungkan orang lain bukan menguntungkan diri sendiri. "You help them , they will help you"

Share :

Tweet

✚

Related Post