Vertical Navigation Tab Menus For Blogger
Here we going to tell how to install Vertical Tab Menus in blogger there are around 25 styles install them in your blog and Customize to attract users.
Its very easy to add CSS code in blogger 2012 Click here how to place css code in your blogger.
In Old blogger interface place should search for ]]></b:skin> and place the CSS code just above this code.
To insert HTML code in your blogger fallow the steps. If you have right sidebar, if you want Vertical Tab Menu at right side paste the HTML code just below of this code <div id='sidebar-wrapper'> or this <div id='sidebar-wrapper-right'>
If you want at left side paste HTML code just below of this code <div id='sidebar-wrapper-left'>
How to Edit Links In Navigation Menu :
Your Menu code looks like this
<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="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
To insert URL Link in this code place specific URL in yellow color and Name of the link change violet color.
Green Menu Style :
CSS code :
violet #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLjHznANLDH2veO0cXyD35Pk9si_IYvYNyBszXhx2sR145eirY5lNHek1__tiKrQW58edxCL7XrLEypPpqtm4pOp4qK2ierBdDF-8-EBGWH1qKweUnD31nmeNXV4kw1WmHJfTacerpUM0/s200/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLjHznANLDH2veO0cXyD35Pk9si_IYvYNyBszXhx2sR145eirY5lNHek1__tiKrQW58edxCL7XrLEypPpqtm4pOp4qK2ierBdDF-8-EBGWH1qKweUnD31nmeNXV4kw1WmHJfTacerpUM0/s200/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML code :
<div id="menu6">
<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>
Gray Menu Style :
CSS code :
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #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: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXgmNmvl_z-2Hmz4Q6OA2yrD68jNJA5UfFWPW1U5H6FxGQZarKE5GJaXFe4KRRwikRb5QvoP-OqzhajsjeYOwj497stbfFT6ZhIWlcDdr9KSyHyIufikm0lD7dOkAGP0hqSPLQZoLep0/s200/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXgmNmvl_z-2Hmz4Q6OA2yrD68jNJA5UfFWPW1U5H6FxGQZarKE5GJaXFe4KRRwikRb5QvoP-OqzhajsjeYOwj497stbfFT6ZhIWlcDdr9KSyHyIufikm0lD7dOkAGP0hqSPLQZoLep0/s200/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML code :
<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>
Light Green Menu Style :
CSS code :
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 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; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT84C7swJc3trgAuJPqtCrnezURlByGBX65SGbkTRdsdo3Qz6vRHLIRwWzDe8aLR6JB1ASlKI9Vb8sSPv-7GPsYRH40ZtN9unoD5rS1LQyoetpw2NPVceVuaPuf6bUiEIxVQ1pDwlqS7s/s200/menu%25206.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT84C7swJc3trgAuJPqtCrnezURlByGBX65SGbkTRdsdo3Qz6vRHLIRwWzDe8aLR6JB1ASlKI9Vb8sSPv-7GPsYRH40ZtN9unoD5rS1LQyoetpw2NPVceVuaPuf6bUiEIxVQ1pDwlqS7s/s200/menu%25206.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML code :
<div id="menu6">
<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>
Comments
Post a Comment