Blogging tips and tricks: menu tabs

Hello guys, I wanna share you a trick about adding Multi Menu Tabs Widget in your Blogger sidebar. This widget looks similar to Wordpress blog and therefore it is more good looking. Some features here are:

Live Demo

You can add as many widgets as you want inside a single tab/line.

Beautiful and highly customizable CSS.

Jquery effects are added this time to the tab views.

add wordprees multitab widget in blogger

Without much word to say, let us now learn how to add this professional looking tab widget into your Blogger sidebar . Don't worry dear because we will make this tutorial easy and simple to install.

How To Add this Multi Tabbed Widget To Blogger?

We will divide tutorial into three easy parts which are:

Adding JQuery and JavaScript to your Blogger templates

Adding the CSS

Adding the HTML

Adding the JQuery and JavaScript to your Blogger Templates

Step 1. Go To Blogger >> Design >> Edit HTML ( Backup your template for reference)
Step 2. Search for

]]></b:skin>

Step 3. Just below or after that code in (Step 2) paste this code
Step 4. Save your template and your halfway done!

Adding the CSS

Step 1. Inside your template, again search for the code below

]]></b:skin>

Step 2. Just above it paste the code below,

/*---- Multi Tab Widget for Sidebar by BTT ----*/

.BTT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.BTT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.BTT-tabs li:first-child{margin:0}
.BTT-tabs li a{color:#fff;background:#158aee;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;border-radius:5px;-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 2px 6px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;}
.BTT-tabs li a:hover,.BTT-tabs li a.BTT-tabs-current{background:#8168FD;color:#fff;text-decoration:none}
.BTT-tabs-content{border: 1px dotted #ddd}
.BTT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Adding the HTML

Step 1. Search/look for the code below

<div id='sidebar-wrapper'>

<div class='column-right-inner'>

Step 2. Just below that code in step 1. paste the code below,

<div class='BTT-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".BTT-tabs-content-widget-BTT-id").hide();
$("ul.BTT-tabs-widget-BTT-id li:first a").addClass("BTT-tabs-current").show();
$(".BTT-tabs-content-widget-BTT-id:first").show();
$("ul.BTT-tabs-widget-BTT-id li a").click(function() {
$("ul.BTT-tabs-widget-BTT-id li a").removeClass("BTT-tabs-current a");
$(this).addClass("BTT-tabs-current");
$(".BTT-tabs-content-widget-BTT-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='BTT-tabs BTT-tabs-widget-BTT-id'>
<li><a href='#widget-BTT-id1'>About</a></li>
<li><a href='#widget-BTT-id2'>Blog Archive</a></li>
<li><a href='#widget-BTT-id3'>Follow by Email</a></li>
</ul>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>

You can replace About Me, Blog Archive and Follow by Email with your Widget Titles that you will be adding.

Step 3. Now Go To Page Elements and you will see something like the screenshot below,

Let me know how you find it?

Hope this tutorial help you in some other ways. Peace and blessings buddies =D
Credits from: MBT

A drop down menu can be observed in many blogs but if you make it it in an outstanding way your blog is in the spotlight from the rest of other blogs throughout the web. In this tutorial I will share to you a special type of dropdown down menu which I have learned from helplogger wherin its sub-tabs are displayed in two columns and is also made with CSS, and the good things is we will not add any scripts on it which is the cause of your slow blog loading . Another feature is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along.

Live Demo

Adding a Horizontal Drop-Down Menu With Sub Tabs In Two Columns In Blogger

Step 1. Go to Blogger Dashboard
Step 2. Click "Layout" and hit "Page Elements" section.
Step 3. Click on the "Add a Gadget" link just under your header image From the Gadget's List, select "HTML/JavaScript" option.
Step 4. Copy and paste the code below and paste it in the blank page.
Note: Replace the "Title" and "SubTab" title section of this widget with your own.

<div id='btttab'>
<div id='btttopwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Replace 'http://YOUR URL HERE.com' with the URL of your post. or you can just put a # sign on it.

To add as many of the main tabs as you need, just copy the entire code below for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

Step 5. Now let's go a step further and add the CSS style in our Template. Back to Blogger Dashboard, go to Template > Edit HTML
Step 6. Search for the tag ]]></b:skin> and just above it paste the code below.

/* Horizontal menu with 2 columns
----------------------------------------------- */
#btttab {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#btttopwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3katXD-qvB1ZA8UleU4J_HKzoMO88CoL_MpUrP9w4YFTwE4ur3b4utAkB7nODa38klAIyHFPx-hPB5mxoSze_sGS_VEmeinTlgWW_mupdOHqQZvWONExPqnX6hBZqjLIwWYqCCayZL8g/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Step 7. Now find (CTRL + F) this line: It will also have some little lines or codes beneath it like the below:

.tabs-inner {
margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
padding: 0;
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;

background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

-moz-border-radius: $(tabs.border.radius);
-webkit-border-radius: $(tabs.border.radius);
-goog-ms-border-radius: $(tabs.border.radius);
border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;

padding: .5em 1em;
margin-$endSide: $(tabs.spacing);

color: $(tabs.text.color);
font: $(tabs.font);

-moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
-webkit-border-top-left-radius: $(tab.border.radius);
-webkit-border-top-right-radius: $(tab.border.radius);
-goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

background: $(tab.background);

border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
padding-$startSide: 1.25em;

-moz-border-radius-top$startSide: $(tab.first.border.radius);
-moz-border-radius-bottom$startSide: $(tabs.border.radius);
-webkit-border-top-$startSide-radius: $(tab.first.border.radius);
-webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
-goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
-goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
border-top-$startSide-radius: $(tab.first.border.radius);
border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;

background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
color: $(tabs.selected.text.color);

-moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

Step 8. Delete the code above until you reach the code :

/* Headings
----------------------------------------------- */

Step 9. Replace the code that you have removed above, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

Step 10. Save the Template and you are done pal!

If you have any questions or need help, regarding this post please leave a comment below.
Thank you and Have blissful blogging!!!

Blogging tips and tricks

Add Multi Menu Tabs Widget in Blogger Sidebar

How To Add this Multi Tabbed Widget To Blogger?

Adding the JQuery and JavaScript to your Blogger Templates

Adding the CSS

Adding the HTML

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger

Adding a Horizontal Drop-Down Menu With Sub Tabs In Two Columns In Blogger