UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add Multi Tab SideBar Widget In Blogger

This time 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.

One benefit of this widget is that if my anyone had added too many widgets in the sidebar, then by installing multi tab is going to save the placement of widgets in the sidebar column which usually extends downward.

The placement of each widget in the sidebar can be a buddy for some columns that will make your blog become more look neat and attractive. Immediately, the way it is applied as follows,follow below instructions.

SEE It LIVE BELOW [DEMO]

See the Pen Multi Tab Widget by Abdullah Malik (@UrduBloggingHub) on CodePen.

Instructions To Follow:

1. Go To Blogger Dashboard→Your Blog
2. Template→Edit HTML tab
3. Find anywhere in the template ]]></b:skin> or </style> by pressing (Ctrl+F)

Step No.1:

This step includes a CSS code that you have to insert it before the closing tag ]]></b:skin> and save your template.

CSS Code:

/ * 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, h3 .multitab-section, .multitab-section h4, h5 .multitab-section, .multitab-section h6 {display: none;}.multitab-li widget solid # 22a1c4; font-size: 14px; text-transform: capitalize}

Step No.2:

This step includes a JQuery code and you have to put this code above </body> tag.

JQuery Code:

<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-widget-content-id: first '). show (); $ ("ul.multitab-widget-content -tabs-id li a "). click (function () {$ (" ul.multitab-widget-content-tabs-id li a "). removeClass (" multitab-current widget-a "); $ (this) .addClass ("multitab-widget-current"); $ (". multitab-widget-content-widget-id"). hide (); var activeTab = $ (this) .attr ("href"); $ (activeTab ) .fadeIn (); return false;});});
//]]>
</ Script>

Step No.3:

After this you have almost done your plugin for a new look.Just a simple step is requied to insert this plugin to your blog you have to insert HTML code just below 

<div id = 'sidebar-wrapper'>

HTML Code:

<Div class = 'multitab-section'>
<Ul class = 'multitab multitab-widget-widget-content-tabs-id'>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id1'>Latest</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-widget-content-id' id = 'multicolumn-widget-ID1'>
<B: section class = 'sidebar' id = 'sidebartab1' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID2'>
<B: section class = 'sidebar' id = 'sidebartab2' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-id3'>
<B: section class = 'sidebar' id = 'sidebartab3' preferred = 'yes' />
</ Div>
</ Div>

Note:Change the name of the widget title that I put a mark red on the code above in accordance with a buddy widget title. Save your template and see the results.

Success Message : Hi Blogger! You have successfully install this plugin to your blog.