How To add Vertical Navigations Menu With CSS in blogger ?

 The purpose of made this menu is to facilitate the visitors to navigate our blog. Usually, some people fill it with "Home", "About Me", "Disclaimer", "Services", etc. But, if you want to make difference, it's OK. Well, before I give the steps, you must backup your template first, because we will make some changes!

1. Go to Design --> Edit HTML 
2. For HTML code, you can paste under :
    => If you have right sidebar, you have to find this code : <div id='sidebar-wrapper'> or <div id='sidebar-wrapper-right'>
    => But, if you have left sidebar, you can find this code : <div id='sidebar-wrapper-left'>
3. For CSS code you can paste above ]]></b:skin> 
4. After that, before I give the CSS code and HTML code, I will teach you how to edit the links and the titles.

<li><a href="Title 1" >Link 1</a></li>
<li><a href="Title 2" >Link 2</a></li>
<li><a href="Title 3" >Link 3</a></li>
<li><a href="Title 4" >Link 4</a></li>
<li><a href="Title 5" >Link 5</a></li>

=> Change with word that you want to display
=> Change with links that you want to open

example :

<li><a href="Easy Blogging Tricks" >http://easybloggingtricks.blogspot.com/</a></li>

Now, I will give you 10 choice (CSS Style)


1.

HTML CODE

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

CSS CODE

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 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; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqoS8Y9VS3S2GoSXQ3CwK34YMP6ezZQYIpJiPIciK2r6CwXvF7GIEkzYLqe5pleJaCEDW39uJk6yewwDVVM3SmxdihkLGfBdf5ZKYvC1giKCY3r27huVs_zQtqUHXiWH4mqXBDkO6x7U/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqoS8Y9VS3S2GoSXQ3CwK34YMP6ezZQYIpJiPIciK2r6CwXvF7GIEkzYLqe5pleJaCEDW39uJk6yewwDVVM3SmxdihkLGfBdf5ZKYvC1giKCY3r27huVs_zQtqUHXiWH4mqXBDkO6x7U/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

2.

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>

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/AVvXsEhzR81h49xe7yF3tZfLWi0OYvB6ObWkyk0l9MeYq4Ln7CR4Qw3LMn1aXZM72ueGVRgsE6RY5deU-HluH2cmjVw7G79dPwvuY4xbv2P5Yec62TjoBRm7o1ioKthUyec4Wsb2Mqt6kOBbNK8/s800/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/AVvXsEhzR81h49xe7yF3tZfLWi0OYvB6ObWkyk0l9MeYq4Ln7CR4Qw3LMn1aXZM72ueGVRgsE6RY5deU-HluH2cmjVw7G79dPwvuY4xbv2P5Yec62TjoBRm7o1ioKthUyec4Wsb2Mqt6kOBbNK8/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

3.

HTML CODE:

 <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>

CSS CODE:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #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: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5bdFpAs3Msqirt7Kqv2AdWPwvaifQ_tNsKOYF6AhyphenhyphenUrBS8BomaFTikzQvxqS_XT8WojFhHuGQ8hsOSR_OLXwyNd8w-Vn6nv52KIEFMSZIfT-XzJhDHj0GqYM0igz7QcMLGKxDMERplg/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5bdFpAs3Msqirt7Kqv2AdWPwvaifQ_tNsKOYF6AhyphenhyphenUrBS8BomaFTikzQvxqS_XT8WojFhHuGQ8hsOSR_OLXwyNd8w-Vn6nv52KIEFMSZIfT-XzJhDHj0GqYM0igz7QcMLGKxDMERplg/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

4.

HTML CODE:

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

CSS CODE:

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 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; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxGtgbe6LBfcy46LpM6qiVUIRi4ooKEBdmpM7PkeIt9oSm4Xt6-sfdPBKRkj9xDcbmxcrRZjlGu7TuJ3WrToJVaCsq9L8i4HXZB_fhmFe_52LzybgsY8up91WD0m-RsQhU6UXye0Tb90/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxGtgbe6LBfcy46LpM6qiVUIRi4ooKEBdmpM7PkeIt9oSm4Xt6-sfdPBKRkj9xDcbmxcrRZjlGu7TuJ3WrToJVaCsq9L8i4HXZB_fhmFe_52LzybgsY8up91WD0m-RsQhU6UXye0Tb90/s800/menu14.gif); padding: 8px 0 0 10px; }

5.

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>

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/AVvXsEhcUqq7cWVgsgp8C8PkoAZu3d_OmptLdHMt1k927qykHYC4xjoHCnf52aeRhqeE9kJcIelO85Bh06GWj1p7ncM2PsFfpFiVFMp631k4I_R-nYFuJ17z8254PCLRs_16ZIOk-KZJLUj_rUM/s800/menu6.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/AVvXsEhcUqq7cWVgsgp8C8PkoAZu3d_OmptLdHMt1k927qykHYC4xjoHCnf52aeRhqeE9kJcIelO85Bh06GWj1p7ncM2PsFfpFiVFMp631k4I_R-nYFuJ17z8254PCLRs_16ZIOk-KZJLUj_rUM/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

6.

HTML CODE:

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

CSS CODE: 

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo-WEdDibfrHOnJlc-f09TWrvIHEHNjjk8sq2MVgTfYE9ERSj3fydKn59Il6__dT_DDJp0aAEWUgCGWkWjIMksjciHlmobSJL3RkXfIGboS4Lpyt5tDZo7cqmJ22AEcsp_I8AmatJ-Xo/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo-WEdDibfrHOnJlc-f09TWrvIHEHNjjk8sq2MVgTfYE9ERSj3fydKn59Il6__dT_DDJp0aAEWUgCGWkWjIMksjciHlmobSJL3RkXfIGboS4Lpyt5tDZo7cqmJ22AEcsp_I8AmatJ-Xo/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIo-WEdDibfrHOnJlc-f09TWrvIHEHNjjk8sq2MVgTfYE9ERSj3fydKn59Il6__dT_DDJp0aAEWUgCGWkWjIMksjciHlmobSJL3RkXfIGboS4Lpyt5tDZo7cqmJ22AEcsp_I8AmatJ-Xo/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

7.

HTML CODE:

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

CSS CODE:

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01dWMrVFlZvqNqAksnqe9prqBKulNNvZEAe0nsaN11ySzQZSRscCQPrRGyGlp0843qqy9L1MTJrdsfb1rmJCYkJfYuOjyQEu-D0hvdHdmTQJaAM-MjctUlU1GU6AKvav5tdWRErMINeQ/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01dWMrVFlZvqNqAksnqe9prqBKulNNvZEAe0nsaN11ySzQZSRscCQPrRGyGlp0843qqy9L1MTJrdsfb1rmJCYkJfYuOjyQEu-D0hvdHdmTQJaAM-MjctUlU1GU6AKvav5tdWRErMINeQ/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } 

8.

HTML CODE:

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

CSS CODE:

 #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 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; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6O_-ppOpvfxO0x24UP_r2JwEzYnhIzN27yAvp5t-7BVPhMz3Myppekc3CcM5QlR0Fu1adgkc8VVpaeqsCIsYVUoyAz5pagfznrY43jIBSWMrQ83YOES0Hojp2hwejECtFnlRERRYYOuU/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6O_-ppOpvfxO0x24UP_r2JwEzYnhIzN27yAvp5t-7BVPhMz3Myppekc3CcM5QlR0Fu1adgkc8VVpaeqsCIsYVUoyAz5pagfznrY43jIBSWMrQ83YOES0Hojp2hwejECtFnlRERRYYOuU/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

9.

HTML CODE:

 <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>

CSS CODE:

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; 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: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhzHj6wJ0Wxy5w8FgZxD1ROt-BTpRDOB4FOOsg34VPN0_ZTwScxUXiwIy7l_b6xRnCyJIWkeYlg5mywvvvM-ao9B1u_X5TjDxTJnn-ACU3f-gI7vOf8LOMGGcGlqjHiZvJzdj5VmW7Zg/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhzHj6wJ0Wxy5w8FgZxD1ROt-BTpRDOB4FOOsg34VPN0_ZTwScxUXiwIy7l_b6xRnCyJIWkeYlg5mywvvvM-ao9B1u_X5TjDxTJnn-ACU3f-gI7vOf8LOMGGcGlqjHiZvJzdj5VmW7Zg/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhzHj6wJ0Wxy5w8FgZxD1ROt-BTpRDOB4FOOsg34VPN0_ZTwScxUXiwIy7l_b6xRnCyJIWkeYlg5mywvvvM-ao9B1u_X5TjDxTJnn-ACU3f-gI7vOf8LOMGGcGlqjHiZvJzdj5VmW7Zg/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

10.

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>

CSS CODE:

 #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/AVvXsEhPO1ZTK0y-98MN2CROHUxnBvP8GdcSBx-xb2oC_HhhIvlNHgH7a1Sh-SBp5avwn-W7wcVAuCsqOjJdR8q8PcaDVW4jm7A6cALhYQoNFKhFHJI9o0rkAMLe4fezWtEOl__SbKGPy9C2HaA/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPO1ZTK0y-98MN2CROHUxnBvP8GdcSBx-xb2oC_HhhIvlNHgH7a1Sh-SBp5avwn-W7wcVAuCsqOjJdR8q8PcaDVW4jm7A6cALhYQoNFKhFHJI9o0rkAMLe4fezWtEOl__SbKGPy9C2HaA/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; } 

5. Then, if you've finished, you can save now!