This is cool vertical menu. I was posted first part earlier.
You can see the DEMO of vertical menu
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.
You can see the DEMO of vertical menu
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*/ .outer{ list-style:none; margin:0px; padding:0px; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-width: 0px; } #menu2 ul{ list-style:none; margin:0px; padding:0px; } #menu2 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; font-weight:normal; } #menu2 li a:link, #menu li a:visited { color: #FFFFFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBl_UFpIIWOXkJdlctCTDRBpRjz4jzosp3Eh3zQQMwuqeo43UmObZmgoK0vtaLutQ2pZQLlhdxcOLnopFC9laiFYxfBnnc8C5TyrrwMieNFi8HhtQdyvhcUmYilKhY3mNUmx9-F9OdeBkq/s1600/image.gif); background-repeat:no-repeat; padding: 8px 0 0 50px; } #menu2 li a:hover { color: #666666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBl_UFpIIWOXkJdlctCTDRBpRjz4jzosp3Eh3zQQMwuqeo43UmObZmgoK0vtaLutQ2pZQLlhdxcOLnopFC9laiFYxfBnnc8C5TyrrwMieNFi8HhtQdyvhcUmYilKhY3mNUmx9-F9OdeBkq/s1600/image.gif) 0 -32px; background-repeat:no-repeat; padding: 8px 0 0 50px; } #menu2 li a:active { color: #666666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBl_UFpIIWOXkJdlctCTDRBpRjz4jzosp3Eh3zQQMwuqeo43UmObZmgoK0vtaLutQ2pZQLlhdxcOLnopFC9laiFYxfBnnc8C5TyrrwMieNFi8HhtQdyvhcUmYilKhY3mNUmx9-F9OdeBkq/s1600/image.gif) 0 -64px; background-repeat:no-repeat; padding: 8px 0 0 50px; } /* 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 class="outer">
<div id="menu2"><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>
</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