Cara memasang multi widget dengan mudah

Kali ini admin ingin belajar cara  memasang multi widget,berhubung blogger newbie,yang saya lakukan adalah search google dulu..hehe..

Begitu banyak tutorial yang ada dalam hasil pencarian saya di google search,sampai bingung,mana yang harus di buka terlebih dahulu,ahirnya saya cek blog mastamvan  seperti yang terlihat di gambar screnshot

Dari blog tersebut tutorialnya sangat simple dan gampang di praktekankan,tidak berapa lama,widget multi tersebut berhasil di pasang ,silahkan lihat di blog saya  di sini dan screenshotnya sebagai berikut.

widget multi

Menurut saya,tab multi widget sangat menarik untuk di pasang di blog,karena blog akan tampil lebih simpel dengan tidak mengurangi menu blog yang ada,seperti popular post,archive blog,tergantung sobat ingin pasang widget apa di multi widget tersebut.

Berikut ini code code yang harus di pasang pada template blog sobat.

1.CSS

<style type='text/css'>
/* Multi Tab Widget Sidebar */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section
h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li
a{margin:-2px;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:5px
0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all
.3s;overflow: hidden;}
.multitab-widget li a.multitab-widget-current{background: #35a47c;}
.multitab-widget .multitab-tab
a:before{font-family:Fontawesome;text-align:center;margin-right:5px;}
.multitab-widget .multitab-tab a:nth-child(1):before
{content:&#39;\f09e&#39; !important;}
.multitab-widget .multitab-tab a:nth-child(2):before
{content:&#39;\f09e&#39; !important;}
.multitab-widget .multitab-tab a:nth-child(3):before
{content:&#39;\f0e6&#39; !important;}
</style>

Silahkan css tersebut sobat pasang sebelum ]]><b:skin> atau </head>  ,untuk warna multi widgetnya,silahkan sobat edit css sendiri

2.JS

<script type='text/javascript'>

//<![CDATA[

// Multi tab widget Sidebar

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>


<script type='text/javascript'>

       //<![CDATA[

       if (typeof(jQuery) == 'undefined') {document.write("<scr" +

"ipt type=\"text/javascript\"

src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr"

+ "ipt>");}

       //]]>

</script>

Silahkan JS tersebut sobat pasang sebelum </body>


3.HTML

<div class='multitab-section'>
  <ul class='multitab-widget multitab-widget-content-tabs-id'>
    <li class='multitab-tab'>
      <a href='#multitab-column-id1' title='Popular'
class='multitab-widget-current'><span>Popular</span></a>
      <a href='#multitab-column-id2' title='Labels'><span>Tags</span></a>
      <a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>
    </li>
  </ul>
  <div class='multitab-widget-content
multitab-widget-content-widget-id' id='multitab-column-id1'>
    <b:section class='sidebar' id='multitab-sidebar1' preferred='yes' />
  </div>
  <div class='multitab-widget-content
multitab-widget-content-widget-id' id='multitab-column-id2'>
    <b:section class='sidebar' id='multitab-sidebar2' preferred='yes' />
  </div>
  <div class='multitab-widget-content
multitab-widget-content-widget-id' id='multitab-column-id3'>
    <b:section class='sidebar' id='multitab-sidebar3' preferred='yes' />
  </div>
</div>

Silahkan code html tersebut sobat pasang tepat di bawah <div id='sidebar-wrapper'>atau <aside id='sidebar-wrapper'>

Jangan lupa pratinjau terlebih dahulu sebelum save template blog sobat..