Cara memasang tab multi widget diblog

Cara memasang tab multi widget diblog

Mungkin sobat nusa sudah sering mengunjungi blog yang memakai navigasi multi level widget, yaitu menggabungkan beberapa widget pada satu tempat dengan tab diatasnya, kita lihat demonya saja biar artikelnya ndak muter-muter.

DEMO

Penggunaan widget ini meningkat dari hari ke hari dan menjadi lebih trendy dan bermanfaat bagi pengunjung blog, selain blog terlihat rapi dan menghemat banyak ruang juga memberi kesan profesional

Oke kita mulai langkah-langkahnya:

Pertama-tama pastikan template sobat sudah terpasang jQuery, silahkan cek dulu dengan cara pergi ke Template > Edit HTML tekan Ctrl+F lalu ketik jQuery.min.js dan ENTER, kalau belum ada silahkan copy dibawah ini lalu paste tepat dibawah kode ]]></b:skin>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>

Nah berikutnya silahkan sobat salin kode dibawah ini dan tempel tepat diatas kode ]]></b:skin> tadi

/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 98px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 96px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

Setelah itu sobat carilah kode <div id='sidebar-wrapper'> dan letakkan kode dibawah ini tepat dibawahnya

<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
   
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });     
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>popular</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>label</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>arsip</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
 </b:section>                                   
</div>
                     
<!-- Tab Widget 2 -->             
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>

 </b:section>                                     
</div>                         
                           
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                     
</div>
</div>
<!-- Tab Widget [endt] -->
         
           
   
       

Berikutnya silahkan sahabat Nusa lihat di bagian tata letak widget, disitu ada tiga kolom sidebar silahkan isi dengan widget sesuai dengan urutan, dari atas popular - label - arsip.

Yang terakhir silahkan lihat blog sahabat nusa yang eksotis he he...

Mudah-mudahan artikel ini sedikit banyak memberi manfaat bagi sahabat Nusa sekalian, dan jangan lupa dipraktekkan dan dibagikan pada teman-teman, terimakasih.