How To Add Multi-Tabbed Widget To Blogger Blogspot?

0
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. This is a very good multi-tabbed widget for your blogger blogspot blog or any other website, Through this widget you can combine your, Recent Comments , Follow by Email , Recent Post, Popular Post , Related Post, Labels and Archive and everything you want into one place. You can add or remove tabs to this widget easily as your choice. How To Add Multi Tabbed Widget In Blogger Blogspot or any other website follow these steps below.

tabbed widget, multi tabbed blogger widget, recent posts, related posts, labels, blog archive, categories, blogger, blogspot

Step 1: Adding The jQuery and JavaScript To Your Blogger Templates

1. Download Multi Tabs jQuery and JavaScript
2. Go to Blogger > Design > Edit Html
3. Search for ]]></b:skin>
4. Paste the Multi Tabs jQuery and JavaScript Code after ]]></b:skin>
5. Save your template.

Step 2: Adding The CSS Code

1. Inside your template search for ]]></b:skin> again
2. Paste the CSS Code, before ]]></b:skin>
/*---- blogger4ever Multi Tabs----*/

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 1px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 1px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#FFFFFF;background:#4488DD;padding:5px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#2266BB;color:#E98313;text-decoration:none}
.tabs-widget-content{background:#FFFFFF}
.tabviewsection{margin-top:2px;margin-bottom:5px;}

Step 3: Add Multi-Tabbed Widget To Blogger Blogspot?

1. Now Search for <div id='sidebar-wrapper'> or <div id='sidebar'>
2. Make sure the EXPAND WIDGET TEMPLATES box is unchecked.
3. Paste the code, After <div id='sidebar-wrapper'> or <div id='sidebar'>
<div class='tabviewsection'>

<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Recent Posts</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Categories</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='Label1' locked='false' title='' type='Label'/>
</b:section>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'/>
</b:section>
</div>

</div>
<div style='height:5px;clear:both;'/>

If you want to add different widgets then replace Recent Posts, Categories, Blog Archives with your widget title
Replace the widget id HTML4 , Label1 , BlogArchive1 with your widget id
Replace the type HTML , Label , BlogArchive with your widget type

How To Customize The Multi Tabbed Widget..?

Now customizing your gadget with colors here is the code. You will have to change the CSS Code. Change it little bit to get your gadget customize according to your Template.

#FFFFFF: This section refers to the Font Colour of the tab box. By default the color is White. If you wish to change it to a different colour simply change the Hexadecimal Colour value #FFFFFF using Color Code Generator

#4488DD: This section refers to the background colour of the tab box. By default the colour is Blue. If you wish to change it to different colour simply change the Hexadecimal Colour value #4488DD using Color Code Generator

#E98313: This section refers to the Hover/Mouseover Font Colour of the tab box. By default the colour is Orange. If you wish to change it to a different colour simply change the Hexadecimal Colour Value #E98313

#2266BB: This section refers to the Hover/Mouseover background Colour of the tab box. By default the colour is Blue. If you wish to change it to a different colour simply change the Hexadecimal Colour Value #2266BB

Thats all! Hope that was easy to implement.

You might also like: How To Add FeedBurner Recent Posts Widget On Blogger
How To Add Inline Related Posts Middle Of The Content In Blogger
How To Add Follow by Email Widget In Blogger
Tags

Post a Comment

0 Comments
Post a Comment (0)
To Top