In this post i will show you how to create a vertical navigation bar for
blogger. Creating a vertical navigation bar can be most important thing to your
blogger. It is a simple process. It easier for your visitor to search any page
that relates to your blog. It helps to keep organized your site. If you want to create a vertical navigation bar for blogger....
Just Follow These Steps and Enjoy:-
1. first sign in to your blogger account.
2. Then select design and click Edit HTML.
3. By using Ctrl+f search this tag
]]></b:skin>
4. And paste below code before above code.
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border:
none; } #menu9 { width: 200px; margin: 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: #FFF; display: block; background:
url
(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU
PAM/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF;
background: url
(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU
PAM/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
none; } #menu9 { width: 200px; margin: 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: #FFF; display: block; background:
url
(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU
PAM/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF;
background: url
(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU
PAM/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
5. Select Save Template.
6. Now again select design and go to Page Element.
7. Then click Add a Gedget
8. Go to HTML/JavaScript and paste below code.
<div id=”menu9″>
<ul>
<li><a href=”#”>Title 1</a></li>
<li><a href=”#”>Title 2</a></li>
<li><a href=”#”>Title 3</a></li>
<li><a href=”#”>Title 4</a></li>
<li><a href=”#”>Title 5</a></li>
</ul>
</div>
<ul>
<li><a href=”#”>Title 1</a></li>
<li><a href=”#”>Title 2</a></li>
<li><a href=”#”>Title 3</a></li>
<li><a href=”#”>Title 4</a></li>
<li><a href=”#”>Title 5</a></li>
</ul>
</div>
9. # must be replaced with your page link and Title must be replaced with your
page title name.
10. click on Save button.
11. You have Done it.
Enjoy With..............
Solution Bux
0 comments:
Post a Comment