How to add Vertical Menu to Blogger ? - Blogger Tricks

    How to add vertical Menu to Blogger ?

1. Go to your Blogger Account >Template>Edit HTML

2. Press ctrl+f and find </b:skin>

3. Paste CSS code just above the </b:skin>


CSS Code

#verticalmenu ul { list-style: none; margin: 0; padding: 0; } #verticalmenu img { border: none; } #verticalmenu { width: 200px; margin: 10px; } #verticalmenu li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #verticalmenu li a:link, #verticalmenu li a:visited { color: #FFF; display: block; background: url(https://7266f301-a-5dc851c5-s-sites.googlegroups.com/a/inditeches.com/wallpapers/android-wallpaper/btm1qt1.png); padding: 8px 0 0 20px; } #verticalmenu li a:hover { color: #FFF; background: url(https://7266f301-a-5dc851c5-s-sites.googlegroups.com/a/inditeches.com/wallpapers/android-wallpaper/btm1qt1.png) 0 -32px; padding: 8px 0 0 20px; }

4. Next step : If you have left sidebar so find <div id='sidebar-wrapper-left'> and paste HTML code just below <div id='sidebar-wrapper-left'>.
If you have right sidebar so find <div id='sidebar-wrapper-right'> or  <div id='sidebar-wrapper'> and paste HTML code Just below .

HTML Code

<div id="verticalmenu"> <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>

5. Now click on Save Template and check your vertical menu .


NOTE : Change #1,#2,#3,#4,#5 with your link and link1, ;ink2 , link3, link4 , link 5  Change with Link Name .

IT'S HELPFUL FOR YOU :

How to adjust sidebar width in blogger ?