This is cool vertical menu. I was posted first part earlier.
click here to visit first part
Demo here
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code before ]]></b:skin> tag
5. Now Go to Design >> Page Element
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below one of below code.
* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.
10. Save it. you are done.
click here to visit first part
Demo here
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code before ]]></b:skin> tag
/* vertical menu*/ *{ list-style:none; margin:0px; padding:0px; } #menu { width: 200px; border-style: solid solid none solid; border-color: #0e69be; border-size: 0px; border-width: 0px; } #menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #0e69be; display: block; background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg); background-repeat:no-repeat; padding: 8px 0 0 30px; } #menu li a:hover { color: #0e69be; background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg) 0 -32px; background-repeat:no-repeat; padding: 8px 0 0 10px; } #menu li a:active { color: #0e69be; background: url(http://1.bp.blogspot.com/-1MihNvKwQCQ/TdE0wUij1-I/AAAAAAAAAXo/vf4Ib3QS1UE/s1600/Bloggertrix.jpg) 0 -64px; background-repeat:no-repeat; padding: 8px 0 0 10px; } /* www.bloggertrix.com*/
5. Now Go to Design >> Page Element
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below one of below code.
<div id="menu">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Download</a></li>
</ul>
</div>
* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.
10. Save it. you are done.
0 comments:
Post a Comment