Template dan Tips Seputar Blogger

Monday, June 19, 2017

Cara Memasang Multi Tab Widget di Sidebar

Cara Memasang Multi Tab Widget di Sidebar - Pada Tuturial kali ini Saya akan berbagi sebuah multi tab yang nantinya akan menyimpan widget di sidebar blog dengan efek jQuery yang ringan dan SEO Friendly.

Memasang Multi Tab Widget di Sidebar

Multi tab dengan jQuery ini berfungsi untuk menyimpan widget yang biasa Anda simpan di sidebar blog pada tata letak. Ada beberapa alasan kenapa Anda ingin memasang multi tab ini, salah satunya adalah ingin membuat widget lebih rapi dan menghemat ruang di blog khususnya pada bagian sidebar. Oke langsung saja, berikut cara penerapannya :

Cara Memasang Multi Tab Widget di Sidebar


1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Multi Tab Sidebar */
#sidebar-tab h2{display:none}#select-ted{margin:0 auto 10px}#select-ted,#select-ted li{padding:0;margin:0;list-style:none;overflow:hidden}#select-ted li{float:left;width:33.3%;text-align:center}#select-ted a{line-height:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}#select-ted .selectab a,#select-ted a:hover{background-color:#f44243}#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}#sidebar-main{overflow:hidden}

2. Kemudian tambahkan kode berikut tepat di bawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'> (Jika tidak ada, cari bagian sidebar sesuai template Anda)

<div id='sidebar-tab'>
  <div id='tab'>
    <div class='tab-widget-menu clear'>
      <ul id='select-ted'>
        <li class='tabs1'><a href='#tab1'>Popular</a></li>
        <li class='tabs2'><a href='#tab2'>Comments</a></li>
        <li class='tabs3'><a href='#tab3'>Archive</a></li>
      </ul>
    </div>
    <div id='sidebar-main'>
      <div class='widget1' id='tabs1'>
        <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs2'>
        <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs3'>
        <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'/>
      </div>
    </div>
  </div>
  </div>

3. Selanjutnya tambahkan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-ted li:first").addClass("selectab"),$("#sidebar-main > div").hide(),$("#sidebar-main > div:first").show(),$("#select-ted a").click(function(){$("#select-ted li").removeClass("selectab"),$(this).parent().addClass("selectab");var e=$(this).attr("href");return $("#sidebar-main > div:visible").hide(),$(e).fadeToggle(1e3),!1})});
//]]>
</script>

4. Terakhir simpan template dan lihat hasilnya.


Kini di blog Anda sudah terpasang multi tab widget, untuk melihatnya silakan cek di dasbor blogger > Tata letak > Di situ sudah terdapat kolom untuk menambah widget.

Demikian tutorial tentang Cara Memasang Multi Tab Widget di Sidebar, semoga bermanfaat.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×