Tech Tasks : Asp.Net,C#.Net,Ajax,jQuery,SQL Server,MySql,Asp.net MVC: September 2009

Menus are the key tool to navigate through the site easily.We have seen a horizontal menu or a navigation bar on many websites and blogs.But very few Blogger blogs have a Multi level horizontal navigation bar like we have here at our blog.In the previous post i write the post how to add a single level navigation menu now it's time to write a cool multi level horizontal navigation menu.

www.techtasks.blogspot.com

1.Multi level
2.Easy to customize
3.Professional Desgin
4.All browser computability
5.Wide range navigation

Here I'll show you how to add a horizontal menu like the one I added to my blog.

Step 1:Login into Blogger>Edit Html

Find ]]></b:skin>

Paste the Below code just before that

/* Start Multi Level Menu From www.techtasks.blogspot.com */
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIM6Ki2UPtf3xtwx1DxeAs7RL1Y0S5aiqeTknJH-EqWJaNJ1UdEedY4ajTPv387l_YtDMWTUoruJk7YvvRtt8t7L1XgMej4dYVH5XoLVR2UJQf06l09Xo9faby3_xBdjC8Zvrs-Hwz4ok/); /* Menu color or image */
width: 100%;
height: 35px;
color: #FFF;
margin: 0;
padding: 0;
font: bold 12px Arial, Tahoma, Verdana;
float:left;
}

#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
margin: 0;
padding: 9px 15px 8px;
font: bold 16px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58qcfsJD-dwMU46OmuYjdSkNR3nTkwwB-9FQk0KWw9eBDSaZLSghgCYuCMXb3aukqZjdGmOOz6VqvL0MPMw4rZG5kJPCOjKAgjW9P6TRP8xb2l0U9pqy7w0-0ZHiyIJhsKtsG30QLah8/); /* Menu Mouse over color or image */
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #0080FF; /* sub Menu Mouse over color */
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
/* End Multi Level Menu From www.techtasks.blogspot.com */

Customizing the menu by changing the following color code

#0080FF; (light Blue) Sub Menu Over color.

For customizing completely just follow the comments in the above code...

Step 2:
1. If you are a Basic user or to add some where in blog(not at Below or top of the Header) just Follow these steps

Go to >> page elements

Then find the place where u want to add the Navigation Menu ...

Add Gadget >> select HTML/Javascript >>

Paste the following code in the content box.

2.If you want to add the Navigation menu top or below of header just follow these steps

2.1Go to >> Layout >> Edit HtTML >>

2.2Scroll Down of Find(CTRL+F) the following code....

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

2.3Replace above code with the following

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

2.4To change the position(Top or Below of Header) of Navigation menu find the following code(generally it is the next line of above code)

<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header' />

Change locked='true' to locked='false'

2.5Save the Template

2.6 Go To >>Layout >> Page Elements >>

you find here 'Add a Gadget' just above the Header

Add a Gadget >> HTML/JavaScript >> paste following code in the content box....

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='#'>Blogger</a>
<ul>
<li><a href='#'>Blogger Widgets</a></li>
<li><a href='#'>Blogger Hacks</a></li>
</ul>
</li>

<li><a href='#'>Design Stuff</a>
<ul>
<li><a href='#'>Icons</a></li>
<li><a href='#'>JavaScript</a></li>
<li><a href='#'>CSS</a></li>
</ul>
</li>

<li><a href='#'>Adobe Flex</a></li>
<li><a href='#'>Cool Websites</a></li>

<li>
<a href='#'>Feature Item</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>

</ul>
</div>

Step 3:You can arrange it below the header by dragging it below the title.

Step 4:Finally save and Check the blog.

I Hope you love the post...Subscribe Me or Share It

Read More»

New Updated Widget here

Simple jQuery Multi Tabbed Navigation Widget For Blogger

Multi Tabbed Widget is cool and must widget for every blogger.You might have seen this widget on so many blogs(See Sidebar of my blog).

Coz of it's unbeaten features,
1.Easy to navigate through your blog.
2.Efficient use of space.
3.Reduces the load time.
4.Fun to use.

You find several methods on multiple blogs to add this widget to your blog.But the problem is u can't find the widget like "Add a Widget" style in Blogger>Layout>Page Elements Page.

This way is very useful to add blogger Default widgets.

Here the solution How to add the Multi Tabbed Widget like This.
Originally Developed by Barelyfitz and Bloggerized by TechTasks

First Download the Template

Step 1:Login to Blogger dashboard--> layout- -> Edit HTML

Find(CTRL+F) ]]></b:skin> tag.

Now copy and paste below code just before ]]></b:skin> this.

/*--------Start::Tabber Widget By www.techtasks.blogspot.com -----------*/

#tabsidebar-wrapper{
width: 320px; /* size of the tabbed Sidebar */
float: right;
border: 1px none #000000;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:0px solid #000000;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 4px solid #0080FF; /Tab Menu and Content separator color */
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 2px solid #000000; /* tab Border color */
border-bottom: none;
background: #4A4A4A; /* Tab menu background color */
text-decoration: none;
}
ul.tabbernav li a:link { color:#ffffff;}
ul.tabbernav li a:visited {
color: #ffffff;
background: #0080FF; /* tab Visited color */
border-bottom: none;
}
ul.tabbernav li a:hover{
color:#ffffff; /* tab Mouse over text color */
background: #0080FF; /* tab mouse over background color */
border-color: #000000;
}

ul.tabbernav li.tabberactive a{
background-color: #0080FF; /* visited tab background color */
color: #ffffff; /* visited tab text color */
border-bottom: 1px solid #0080FF;
}
ul.tabbernav li.tabberactive a:hover{
color: #ffffff; /* visited tab Mouse over text color */
background: #0080FF; /* visited tab Mouse over background color */
}
.tabberlive .tabbertab {
background: #ffffff; /*tab content background color */
padding:5px;
border:3px solid #000000; /*tab content border color */
border-top:0;
}
.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

/*--------End::Tabber Widget By www.techtasks.blogspot.com -----------*/

If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

Simply replace these colors with your custom colors in the above code respectively.

#0080FF(light blue) Tab menu Highlight Color
#4A4A4A(Dark color) tab menu Background color

Step 2:Find </head> .

Cope and paste the below just before </head> this.

Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar'>

If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

Now copy and paste below code just below that.

step 4:Save the Template.

Then Go to your page Elements Page and add the widgets for your tabs one by one.

Feel Free to ask any queries about this...

Read More»