HashFlare

Thursday, 1 June 2017

How to add Multi Tab Sidebar Widget In Blogger

HashFlare HashFlare


One of the best Benefits of having this widget in your blogger site is that it make things neat and attractive to the user with an animated effect when you click on it.

To add this


  • Go to blogger edit HTML and just above  ]]> </ b: skin> or </style> copy this 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}



  • after coping the above find </body> and paste this code just above it

<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>


  • Now find Sidebar-wrapper and copy this code just below it the code will look like this  <div id = 'sidebar-wrapper'>


<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>

and you are done
 


HashFlare

Author:

The Owner of this Site Hacker Prime, (Azeem Prime)



Use this code Link( Hacked) Only one Amazon Cart Check OUT For 36%-41% CUT in Price => Only From Amazon in INDIA
Bluehost Wordpress Hosting
Super optimized Wordpress Hosting starting at Rs.139/month (click here for the Code
=WEBSITE HOSTING !!=
============================
That's all. You are done!
If you encounter any problem, feel free and comment below to get solution. Share your experience with us.
============================


NOTE:- Do not Copy these Text and code for your commercial use. This Site is protected via DMCA.

Watch This Online

HashFlare

Post a Comment

Whatsapp Button works on Mobile Device only

Start typing and press Enter to search