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.
Bellow are Instructions To Follow:
Go To Blogger Dashboard→Your Blog
Template→Edit HTML tab
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.
-----------------COPY THID CODE-------------------------------------------------------------
/* MultiTab Sidebar Widget By www.BloggersStanD.com */
.bsd-tab-area {
display: inline-block;
text-transform: uppercase;
width: 100%;
}
.bsd-tab-area p {
display: inline-block;
background: #fff;
text-transform: lowercase;
font-size: 14px;
padding: 20px;
margin: 0;
}
.bsdmultitab-gadget {
list-style: none;
margin: 0 0 10px;
padding: 0
}
.bsdmultitab-gadget li {
list-style: none;
padding: 0;
margin: 0;
float: left
}
.bsdmultitab-gadget li a {
background: #8ED557;
color: #fff;
display: block;
padding: 15px;
font-size: 12px;
text-decoration: none
}
.multitabs-bsd {
width: 33.3%;
text-align: center
}
.bsd-tab-area h2,
.bsd-tab-area h3,
.bsd-tab-area h4,
.bsd-tab-area h5,
.bsd-tab-area h6 {
display: none;
}
.bsdmultitab-gadget li a.bsdmultitab-gadget-current {
padding-bottom: 20px;
margin-top: -8px;
background: #fff;
color: #333;
text-decoration: none;
border-top: 3px solid #8ED557;
font-size: 13px;
text-transform: uppercase
}
----------------------------------------------------------------------------------------------------
Step No.2:
This step includes a JQuery code and you have to put this code above </body> tag.
---------------------------COPY THIS CODE ----------------------------------------------------
<script type='text/javascript'>
//<![CDATA[
// Multitabs Sidebar by www.BloggersStanD.com
jQuery(document).ready(function($){ $(".bsdmultitab-gadget-content-widget-id").hide(); $("ul.bsdmultitab-gadget-content-tabs-id li:first a").addClass("bsdmultitab-gadget-current").show(); $(".bsdmultitab-gadget-content-widget-id:first").show(); $("ul.bsdmultitab-gadget-content-tabs-id li a").click(function() { $("ul.bsdmultitab-gadget-content-tabs-id li a").removeClass("bsdmultitab-gadget-current a"); $(this).addClass("bsdmultitab-gadget-current"); $(".bsdmultitab-gadget-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'>
----------------------------COPY THIS CODE ----------------------------------------------
<div class='bsd-tab-area'>
<ul class='bsdmultitab-gadget bsdmultitab-gadget-content-tabs-id'>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id1'>Trending</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id2'>Category</a></li>
<li class='multitabs-bsd'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='bsdmultitab-gadget-content bsdmultitab-gadget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
-------------------------------------------------------------------------------------------------
Note: Change the name of the widget title that labeled a mark red on the code above in accordance with a buddy widget title. Save your template and see the results.
I hope this helped you. Leave comment for us.
0 comments:
Post a Comment