Friday, June 24, 2011

Cool CSS Vertical Menu For Your Blogger

 Cool Vertical Menu For Your Blogger
This is cool vertical menu. you can it to your blog as
side bar gadget. make your blog attractive.


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*/
#menu10 {
 background: #333;
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
 width: 12em;
}
#menu10 li {
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
}
#menu10 a {
 background: #333;
 border-bottom: 1px solid #393939;
 color: #ccc;
 display: block;
 margin: 0;
 padding: 8px 12px;
 text-decoration: none;
}
#menu10 a:hover {
 background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTy54QVl0wMvzGEif1OGUv56PlklmrXyRlYI_2PNpYFu7eGWaOCJN6H-EPNrrR1mT0gaxiL51-kx57nGHwyGOG6VS2W_UP_-IbfmQHa_3IP1g6jN3d9TW-SQwkcFkmgwATHCl1SafeJYm/s320/hover.gif") left center no-repeat;
 color: #fff;
 padding-bottom: 8px;
}


/* 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.

<ul id="menu10">
    <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>


* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.

10. Save it. you are done.

2 comments:

  1. really like this one, very clean and contemporary. need a little advice on how to make it bigger (font and dimensions). cheers

    ReplyDelete
  2. To doc;
    If you want to increase font size,
    Go to above CSS code and Find "menu10 li"
    Below that, you can see font: 67.5%
    SO change it as your like.(font size will increase [100%])

    Find "#menu10" and change width: 12em;
    value as your like.It will helps to increase width.
    cheers.

    ReplyDelete