Cara Membuat Widget Multi Tab Pada Sidebar Blogspot

Tidak terasa sudah 2 tahun lebih saya tidak pernah posting di blog ini, tidak kebayang waktu yang begitu lama, karena saya terlalu sibuk dengan pekerjaan dunia nyata. Ok, tanpa basa-basi saya akan membagikan sedikit tutorial tentang bagaimana Cara Membuat Widget Multi Tab Pada Sidebar Blogspot. Seperti gambar dibawah ini!

Cara Membuat Widget Multi Tab Pada Sidebar Blogspot

Apabila anda memiliki widget di blog yang cukup banyak, maka dengan memasang multi tab ini akan menghemat ruang yang ada di sidebar blog kalian. Jadi widget yang ada di sidebar blog anda akan terlihat lebih rapi, menarik, dan tidak terlalu memanjang kebawah. Tutorial ini saya dapatkan dari pengalaman saya selama bermain di dunia blogging. Cara ini mungkin sudah banyak yang membahasnya, Tapi jika anda belum mengetahuinya silahkan ikuti langkah-langkah berikut.
  1. Login ke blogger
  2. Pilih Template
  3. Klik Edit HTML
  4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
  5. /* Multi Tab Widget */
    .multitab-section {width:100%}
    .multitab-widget {list-style:none;margin:0;padding:0}
    .multitab-widget li {float:left;margin:0;padding:0;list-style:none;cursor:pointer}
    .multitab-widget li a {background:-moz-linear-gradient(top,#bbbbbb,#cccccc);font-family: 'Cabin', sans-serif;font-weight:normal;font-size:14px;font-style:italic;color:#000000;margin:0;padding:5px 0;display:block;text-decoration:none}
    .multitab-tab {width:33.334%;text-align:center;border:0}
    .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none}
    .multitab-widget li a.multitab-widget-current {background:-moz-linear-gradient(top,#356ba4,#3a76b4);color:#ffffff;padding:5px 0;margin:0;text-decoration:none}
    .multitab-widget-content {margin:0;padding:26px 0 0 0}
  6. Selanjutnya letakkan kode di bawah ini tepat di atas kode </body>
  7. <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>
  8. Selanjutnya letakkan kode di bawah ini tepat di bawah kode <div id='sidebar-wrapper'>
  9. <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>
  10. Terakhir Simpan Template kalian

Perhatian :
  • Ganti tulisan yang berwarna biru sesuai dengan judul widget yang akan anda pasang.

Mungkin hanya Cara Membuat Widget Multi Tab Pada Sidebar Blogspot yang dapat saya bagikan kali ini. Semoga bermanfaat.

8 comments:

  1. Ngapain aja tuh gan 2 tahun gak ngeblog..? :-D

    ReplyDelete
    Replies
    1. Haha kepo agan nih :D
      Kan sudah saya katakan dipostingannya.

      Delete
  2. Gan utk kode a href='#multicolumn-widget-id1' itu diubah gak ?
    Soal ny muncul url nya. contoh blog http://xdsd.blogspot.com ,jd munculnya http://xdsd.blogspot.com/#multicolumn-widget-id2 tabs ny not work gmn ya?

    ReplyDelete
  3. mantap kunjungi : http://takutsex.com

    ReplyDelete
  4. http://bintangvip.blogspot.com/2017/05/domino-qq-permainan-terbaik-untuk.html

    ReplyDelete
  5. PROMO BONUS FREECHIPS 5.000 RIBU

    Bonus Freechips Menyambut Semua Member www.POKERSAKTI.com
    Khusus Semua Member Mendapatkan Bonus Freechips 5.000 Ribu ( Seumur Hidup )

    Syarat Dan Ketentuan Berlaku :

    ? Minimal Deposit 50 RIBU ?
    ? Jika Ingin WITHDRAW ( DEPO + Bonus ) Turn Over Di Kali 2 ?
    Contoh : Deposit 50.000 Bonus 5.000 Total Chips 55.000 Jika Ingin Melakukan Withdraw Chips Harus Berjumlah 110.000 Dan Sudah Bisa Witdraw.
    ? Bonus Freechips Akan Di Tarik Jika Withdraw Di Lakukan Sebelum Mencapai Syarat ?
    ? Bonus Freechips Hanya Bisa Di Claim Dalam 1 Hari Sekali ?
    ? Claim Bonus Harus Melalui Live Chat POKERSAKTI ?
    ? Pihak POKERSAKTI berhak membatalkan Bonus Freechips Kepada Member Apabila Terdapat Kecurangan Atau Kejanggalan ?

    ? Jangan Lupa Like & Share Fanpage Facebook Kami Di ?
    www.facebook.com/Pokersakticom/

    ? Agar Terus Mengikuti Promo Dan Info Terbaru Dari POKERSAKTI ?

    Hubungi Kami Di :
    Pin BBM : D8EF2431
    Telepon / WA : +855.964.062.841
    Line : go.paris8
    Livechat : www.POKERSAKTI.com

    ReplyDelete
  6. Benderapoker Menyelenggarakan Hot Promo Bulanan.
    Dalam 1 bulan dapatkanlah TO yang Sebesar-besarnya, semakin besar TO anda Semakin Banyak Bonus yang anda Dapatkan
    TO 1 Juta - 100 Juta Free 0,1%
    TO 100 Juta - 500 Juta Free 0,2%
    TO 500 Juta - 2 Milliar Free 0,3%

    INFO LENGKAP :

    >> http://goo.gl/XNDyTo <<

    BBM : D1FB4EC6
    LINE : benderapoker
    WA : 0962071913
    WECHAT: BENDERAPOKER

    Support 6 bank

    #benderapoker #pokeronline #cemekeliling #capsasusun #livepoker #domino99 #pokerindonesia #agenpoker

    ReplyDelete

 
© Copyright 2016 Lingga Mendunia. All Rights Reserved | Powered by Blogger.com
Created by Lingga Novandra