Cara Membuat Widget Multi Tab di Bagian Sidebar Blog

adscblog

Cara Memasang atau Membuat Multi Tab di bagian Widget blog - Pada ARtikel kali ini saya akan berbagi trik bagaimana cara membuat atau memasang Multi Tab di Widget Blog,Multi Tab dengan Efect jQuery yang sangat ringan dan Seo Friendly Dengan ada nya widget Multi Tab ini Blog sobat akan semakin Rapi dan akan kelihatan semakin cantik Juga,yang dimana bisa nya kebanyakan Blogger yang suka memasang banyak widget di blog nya

Dengan adanya Multi Tab tersebut maka yang dimana biasa nya widget blog yang berderet ke bawah yang begitu banyak maka dengan ada nya Multi tab ini widget yang begitu banyak akan berkurang karena dengan Multi Tab ini biasa nya 3 widget bisa di pasang dalam satu Box atau Widget Sidebar

Membuat Widget Multi Tab di WIdget Sidebar Blog

Sehingga dengan ada nya Multi Tab ini akan mengurangi beban Blog atau halaman blog saat meloading suatu halaman,dengan tanpa adanya multi tab tersebut bisa saja loading halaman akan lambat atau berat karena banyak nya widget yang di pasang tetapi setelah ada nya Multi Tab tersebut maka Loading Blog sobat akan efektive dan tidak perlu menunggu waktu lama untuk menyajikan Postingan terhadap pengujung yang datang ke blog sobat Nah untuk sobat Blogger yang ingin memasang Widget Multi Tab di blog nya,bisa sobat ikuti langkah-langkah penerapan Multi Tab tersebut berikut ini

• Seperti Biasa masuk ke bagian akun blogger sobat
• Setelah itu silahkan sobat klik Blog sobat lalu kemudian Tema > Edit HTML
• Setelah berada di edit HTML Silahkan anda letakan Kode CSS berikut

/* 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}

•  Langkah selanjut nya silahkan sobat blogger letakan kode berikut setelah kode sidebar-wrapper blog sobat atau sejenis nya

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

• Langkah selanjut nya silahkan sobat blogger letakan kode berikut sebelum 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>

• Kemudian Save Template dan Lihat hasil nya

Nah itulah cara membuat widget Multi Tab di blog semoga artikel ini bisa membantu sobat semu selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 04 Mei and have 0 komentar