Add Multi Tab Sidebar Widget in Blogger

Add Multi Tab Sidebar Widget in Blogger


ADD MULTI TAB SIDEBAR WIDGET IN BLOGGER

HOW TO Add MULTI TAB SIDEBAR WIDGET in Blogger

Todat I will share about How to Install Multi Tab Sidebar Widget in blogger blog, who may have you seen on some of the web that we use it.

When you installing a multi-tab will save the placement of widgets in the sidebar column which usually extends downward. The placement of each widget on the sidebar of this can mate to be some of the columns that will make your blog become more look neat and attractive. Immediately, the way it is applied as follows: 

HOW TO INSTALL MULTI TAB SIDEBAR WIDGET

Log in to Blogger> Click Template> Edit HTML> Copy the code below right above ]]></ b: skin> or </ style>
CSS
/* 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}

Furthermore, copy the code below just above the </ body>
jQuery
<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>

Then apply the code below just below <div id = sidebar-wrapper>
HTML
<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>
Change the name of the widget title that I put a mark on the code above in accordance with the title of the widget that buddy pairs. 

Lastly save the template and see the results.


go to link download

Comments

Post a Comment

Popular posts from this blog

ABLiker APK Latest v1 1 Free Download For Android

Image
ABLiker APK Latest v1 1 Free Download For Android AB Auto Liker Welcome friends today we are going to share an amazing app for Android users. Sometimes you see that your Friends photos are getting several hundreds or even thousands of likes. If their Social following is so huge, If you can�t complete then in getting more followers. Then AB Auto Liker is the answer for you don�t wait so long to build of ABLiker APK (AB Auto liker) Android app and you will start seeing hundreds of sharing�s and likes onward. ABLiker APK is one of the best, great and working app, which enable you to get real Auto Likes on your FB profile for completely free. This is an auto liker sharing system app. By using this application, you get likes. As long as you keep this app on, you will get likes on your FB profile. You do not need to do anything except selecting the photos, on which you want to get likes. It does not store any information of your FB account for your own peace of mind, we recommend you to crea...
Read more

Cara Install Windows 10

Image
Cara Install Windows 10 Wahai Sobatt...Kali ini Swallors akan ngasih tau cara Menginstall Win 10 Windows 10 Update Tool yang Tepat  Meskipun alat update Windows 10 sangat lurus ke depan Anda memerlukan versi yang tepat untuk hardware Anda. Langkah pertama adalah menentukan apakah Anda menjalankan mesin 32-bit atau mesin 64-bit. Meskipun Anda dapat membaca tentang nuansa masing-masing dalam artikel kami Anda dapat memeriksa apa versi Windows Anda sedang berjalan dengan hanya melihat di tempat yang sama di kedua Windows 7 dan Windows 8 yang kita disorot dalam bagian sebelumnya pada memeriksa aktivasi Windows Anda . Sama panel / menu yang memberitahu Anda jika komputer Anda diaktifkan juga memberitahu Anda "Jenis Sistem" Anda. Pada Windows 7 itu hanya akan memberitahu Anda bahwa itu adalah sistem operasi 64-bit atau 32-bit tapi di Windows 8 itu akan benar-benar (dan membantu) baik memberitahu Anda jika Anda menjalankan Windows 32-bit atau Windows 64-bit sebagai serta apa arsitek...
Read more

Adobe Photoshop CS6 13 0 1 Extended Free Software

Image
Adobe Photoshop CS6 13 0 1 Extended Free Software Majestia is an internet turn-based method recreation wherein you could combat against different players in exciting battles lasting no greater than 5 mins. these battles take region on a putting of three-by way of-five tiles in which you could capture sources, invocation portals, and plenty more. On every flip, you acquire some of assets relying on the tiles you have occupied. With these sources, you may use playing cards for your flip that allow you to summon armies and mythical heroes, as well as forged spells or set traps. one of the most important factors of Majestia is the heroes, that may assist make your fundamental armies drastically more potent. Like what happens in most different strategy video games, your troops are divided into three different sorts: infantry, cavalry, and distance attacks. every type has its own strengths and weaknesses and your process as standard is to make the get the most out of each one ... and help th...
Read more