Interested in adding a Menu Tab to Blogger/ Then try the WordPress Menu Tab style like the one I have:
My template is a WordPress converted to blogger template, so I will have this by default. But some normal blogger template won't have them so I am going to share with you now.
It is now possible and I am going to teach you how:
Note: Before doing such changes, it is recommended that you backup your template first.
1st Step: Adding Jquery and JavaScript to your blogger template
- Go To Blogger > Design > Edit HTML
- Search for ]]></b:skin>
- Just below it paste the following code: Download it here
2nd Step: Adding CSS to your Tab:
-Search for ]]></b:skin> and paste it above this code
Copy the script below:
/*---- Wordpress Style Menu Tabs----*/Change the red highlighted color to the color of your choosing. You can find a color hex code generator here: Click Here
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#F84444;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}
3rd Step:
Good now we are done with the CSS, let add the HTML code for our tab:
- Ensure that the "Expand Widget box" is unchecked
- Then Search for the following code: <div id='sidebar-wrapper'>
- Paste the following code below <div id='sidebar-wrapper'>
Change the Red highlighted text to whatever you want.
<div class='MBT-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".MBT-tabs-content-widget-MBT-id").hide();
$("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
$(".MBT-tabs-content-widget-MBT-id:first").show();
$("ul.MBT-tabs-widget-MBT-id li a").click(function() {
$("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
$(this).addClass("MBT-tabs-current");
$(".MBT-tabs-content-widget-MBT-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>
Now that you are done with that, go to Layouts and you will find this:
They are all in order, the look at the top "popular" and "follow and like us". They are placed in order and they will be how your widgets be placed. It's that simple!
Have any question or queries? Drop a comment below and I'll be happy to help you!
Enjoy~
|
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
Posts
