Bions And Friend

  • About
  • ADVERTISE
  • Contact
  • F.A.Q
  • Update

Cara Memasang Multi Tab Sidebar Widget

 jQuery   


Cara Memasang Multi Tab Sidebar Widget

Kali ini Saya akan berbagi tentang Cara Memasang Multi Tab Sidebar Widget yang mungkin pernah sobat lihat di beberapa web yang menggunakannya.

Salah satu manfaat dari widget ini adalah jika sobat sudah menambahkan terlalu banyak widget di sidebar, maka dengan memasang multi tab ini akan menghemat penempatan widget di kolom sidebar yang biasanya memanjang ke bawah. Penempatan setiap widget pada sidebar ini bisa sobat bagi menjadi beberapa kolom yang akan membuat blog sobat menjadi lebih terlihat rapi dan menarik.

Langsung saja, cara penerapannya sebagai berikut :

Login ke Blogger > Klik Template > Klik Edit HTML > Salin kode di bawah ini tepat di atas  ]]></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 salin kode di bawah ini tepat di atas </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 terapkan kode di bawah ini tepat di bawah  <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>

Ganti nama judul widget yang Saya beri tanda pada kode di atas sesuai dengan judul widget yang sobat pasang.

Terakhir simpat template dan lihat hasilnya

Result

Sekian tips Cara Memasang Multi Tab Sidebar Widget, selamat mencoba.


  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home
demo pesan

Pageviews last month

Popular Posts

  • EDGELESS - Facebook Twitter Blog Bounty
    edgeless.io   Earn EDG tokens by participating in EDGELESS bounty program There are 10 000 000 EDG tokens provided for Edgeless ...
  • Exchange Union Coin [XUC]
      XUC will be available through a crowd sale open to the community   WEBSITE   WHITPAPER   The crowd sale will run from Aug 7th - Aug...
  • EDGELESS - FAQ
    WEB | SLACK |  TELEGRAM | BLOG | TWITTER | FACEBOOK | REDDIT | QQ | GITHUB Q: What is Edgeless ...
  • ChronoBank
    What is chronobank.io ? ChronoBank.io is an ambitious and wide-ranging blockchain project, aimed at disrupting the HR/recruitment/fin...
  • PROJECT EDGELESS
    Online gambling has become more and more popular these days. There are so many websites on the internet that offer online gambling se...

b͡ack aswibions™ ©