First we go with how to apply it in your blogger blog.
1 .Go To Blogger > Layout > Edit HTML
2. Back-up your template
All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for
the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus.
3. Search for ]]></b:skin> and place the Css code just above it.
4. For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.
- If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
- If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>
Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!
5. Finally save your template and see a Stylish Navigation Menu hanging on your sidebar :)
Editing The Links In The Navigation Menu
To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,
Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with yourPage Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,
1 .Go To Blogger > Layout > Edit HTML
2. Back-up your template
All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for
the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus.
3. Search for ]]></b:skin> and place the Css code just above it.
4. For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.
- If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
- If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>
Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!
5. Finally save your template and see a Stylish Navigation Menu hanging on your sidebar :)
Editing The Links In The Navigation Menu
To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,
<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>
Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with yourPage Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,
<li><a href="#" >Link</a></li>
Navigation Menu #1
CSS CODE :
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYYKDR2xX6AzAjk3HHdj2YKggmvpQW63X7mQM-JF8kqgzZXeY5soZ5hTgL1kkt3YqECc4ZZ4YqWgtqPyQ_A664ThGLZNoaplGo48_qEwwS9I51sWjWiq0rWPrgHrqnYK7Y4reHOAy9is/s1600/menu1.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu1 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYYKDR2xX6AzAjk3HHdj2YKggmvpQW63X7mQM-JF8kqgzZXeY5soZ5hTgL1kkt3YqECc4ZZ4YqWgtqPyQ_A664ThGLZNoaplGo48_qEwwS9I51sWjWiq0rWPrgHrqnYK7Y4reHOAy9is/s1600/menu1.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML :
<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #2
CSS CODE :
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXut5k6zyPqDUigv-OcSUN86UxKzNwBLwZWqPeiWku4k4tw3CEssIctrAS3JbJAjVwjHJ5dgKf0P0lV_Mfhee_KynBnZ3zLUWs4po5uIkJkkBCRJFEWLvpcHBbKh-9giA4a8dHWBwH95s/s1600/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current, #menu2 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXut5k6zyPqDUigv-OcSUN86UxKzNwBLwZWqPeiWku4k4tw3CEssIctrAS3JbJAjVwjHJ5dgKf0P0lV_Mfhee_KynBnZ3zLUWs4po5uIkJkkBCRJFEWLvpcHBbKh-9giA4a8dHWBwH95s/s1600/menu2.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML :
<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #3
CSS CODE :
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTiBv-ntzRneTa8j3zV5pHDO4-6wu1qvMMudZolCAaJNx3fb5M6AU-D8lqQ0hF8YQpXY3R2ODTxB4SekbRwypae3ic7ZY1ADhK6ddfSQT71hu45WV-Xo3r7dtldHI0wQk067pHBc2S60/s1600/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsTiBv-ntzRneTa8j3zV5pHDO4-6wu1qvMMudZolCAaJNx3fb5M6AU-D8lqQ0hF8YQpXY3R2ODTxB4SekbRwypae3ic7ZY1ADhK6ddfSQT71hu45WV-Xo3r7dtldHI0wQk067pHBc2S60/s1600/menu3.gif) 0 -32px; padding: 8px 0 0 32px; }
HTML :
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #4
CSS CODE :
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnIISjmNHjdSvZbrSt0ukZ9ss7kkNQiEr2BKG13cRGR66WGqMnBz6f0E8dYgXydXSY2JQ3g-mFLgpaT56wJHx2vuAph_E2JAKP7wGc4db9Xh7eOt80EOza9tC6I89PgDxR6vZra3REi14/s1600/menu4.gif); padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnIISjmNHjdSvZbrSt0ukZ9ss7kkNQiEr2BKG13cRGR66WGqMnBz6f0E8dYgXydXSY2JQ3g-mFLgpaT56wJHx2vuAph_E2JAKP7wGc4db9Xh7eOt80EOza9tC6I89PgDxR6vZra3REi14/s1600/menu4.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnIISjmNHjdSvZbrSt0ukZ9ss7kkNQiEr2BKG13cRGR66WGqMnBz6f0E8dYgXydXSY2JQ3g-mFLgpaT56wJHx2vuAph_E2JAKP7wGc4db9Xh7eOt80EOza9tC6I89PgDxR6vZra3REi14/s1600/menu4.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
HTML :
<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
Navigation Menu #5
CSS CODE :
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPrIurskrxsjW6dd0uZ0XxiO0hdmW86yZdWxpgROunygwMRe7D6hqHtc_jo4OLvaJL57s-dXdsdn7w94NxDxsuJw_F_s9KRLTRafJ8lqVzGF6guQTT3QJPYlljNrOprmFYSyizn05i7Q/s1600/menu5.gif); padding: 8px 0 0 35px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPrIurskrxsjW6dd0uZ0XxiO0hdmW86yZdWxpgROunygwMRe7D6hqHtc_jo4OLvaJL57s-dXdsdn7w94NxDxsuJw_F_s9KRLTRafJ8lqVzGF6guQTT3QJPYlljNrOprmFYSyizn05i7Q/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML :
<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>