Step by step to Install the Multi Tab Widget on the Sidebar



Hi guys, I am Sayem Tutorial, after many hours I am writing a new post about how to add or install the multi-tab widget on the sidebar.
Now Follow Step:



  1. Login to Blogger> Click Template> Edit HTML> Add the code below just above the code]]></b:skin> or </ style> 
    /* Multi Tab Sidebar By Sayemtutorial.blogspot.com */
    #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. Then add the following code just below the code <aside id = 'sidebar-wrapper'> or <div id = 'sidebar-wrapper'> (If it's not there, find the sidebar section according to your template)
    <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. Then add the code below just above the code </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. Now All Done. See a Preview.
    PREVIEW

  5. Now on your blog has a multi-tab widget installed, to see it please check the blogger dashboard> Layout> There is already a column to add a widget.
  6. That's the tutorial on How to Install the Multi Tab Widget on Sidebar, hopefully useful.
    Give us your opinion
    Open Comments
    Close comment

    Quảng Cáo Gần Cuối Bài

    Inilah Solusi Jasa Pembuatan Website Praktis, Terbukti Klien Puas!

    "Penawaran ini cocok untuk Anda yang ingin memulai membuat sebuah website hingga pemain portal berita / media online yang ingin bersaing langsung dengan situs web populer di kota Anda... Efektif, All in One pasti lebih Efisien!" Klik Disini

    Themes for Members

    avatar
    Admin Welcome to NQnia, if you have anything to ask please via our WhatsApp
    Admin Stress Hi there! Hello, Can I help you?
    :
    Chat with WhatsApp