Add Horizontal CSS Menu Bar in Blogger

Sunday, 8 January 2012

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

/*NavBar --------------*/
#navbar{
        width: 780px;
        height: 48px;
        overflow: hidden;
        margin: 0px 0px 20px 0px;
        padding: 0px;
}

.navbar-top{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
 
}

.navbar-bottom{
        width: 910px;
        height: 9px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
       
}

.navbar-mid{
        width: 910px;
        height: 30px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
     
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirz5yCTm4CUa8emB0T3JjaFurVhP-oUsAa_WdTmNHSIoVtX3bwXPq4B0JVEgjVi4EkbphU3G3d1t1QkWFfQMbETO9o6J301hD2j0Fox1Cv02D9qx5d52FTYpEjpgAigY9SjfqUxkK4Qqw/s1600/black1.png);
}

.navbar-mid ul{
        padding: 0px;
        margin: 0px;
        list-style-type: none;
        display: inline;
}

.navbar-mid ul li{
        height: 30px;
        float: left;
        padding: 0px;
        margin: 0px;
        display: inline;
        border-left: 1px solid #292929;
        border-right: 1px solid #555;
}

.navbar-mid ul li a:link, .navbar-mid ul li a:visited{
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFFFFF;
}

.navbar-mid ul li a:hover{
        font-color: #FFFFFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCimXjfsaVu3CzwuD31mAallGJHqGEW5JqUA7LG38mBXaDBondjOTFQ9kqooZ5Ww7oSlgqNHVu6JVH_ArgmF4Ni-LnIoVjyZRidHRx-eoEhiKsAMw6kzIwyHekyPXjbk5uE9dVFjfdWBo/s320/hover.png);
}

.single-black-bar{
        float: left;
        width:1px;
        height: 30px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        background: #292929;
}

.navbar-mid ul li.current_page_item a:link, .navbar-mid ul li.current_page_item a:visited, .navbar-mid ul li.current_page_item a:hover {
        display: block;
        margin: 0px;
        padding: 8px 10px 8px 10px;
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        color: #FFF;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaiEFzomq5urW2gdYMF71RYmIRSfWfrolccom5p-8tv64u5aLNJI1VDZCqBhFKugHrktRhQKj9NLmLWiCFEwM6vDw8xfNwdP9rs1eDIak_JuKuQ9ABqC8da8zyz-BLBQY9tWYHMVjAUio/s320/black2.png);
}
/*Bloggertrix.com --------------*/

5. Now Go to Design >>page Element

6.Click Add gadget (under your header)  and Select HTML/JavaScript  

7. Now paste paste below code

<div id="navbar">
            <div class="navbar-top">
            </div>
            <div class="navbar-mid">
                <ul>
                    <li class="page_item">
                        <a href="Homepage URL" title="Home">Home</a>
                    </li>

<li class="page_item page-item-2"><a href="URL" title="About">About</a></li>
<li class="page_item page-item-18"><a href="URL" title="Contact">Contact</a></li>
<li class="page_item page-item-20"><a href="URL" title="Portfolio">Portfolio</a></li>
<li class="page_item page-item-22"><a href="URL" title="Make Money">Make Money</a></li>
<li class="page_item page-item-24"><a href="URL" title="Themes">Themes</a></li>
<li class="page_item page-item-26"><a href="URL" title="Comments">Comments</a></li>
<li class="page_item page-item-28"><a href="URL" title="Links">Links</a></li>
<li class="page_item page-item-30"><a href="URL" title="Forum">Forum</a></li><li class="page_item page-item-32"><a href="URL" title="Download">Download</a></li>
                </ul>
<div class="single-black-bar">
                </div>         
            </div>
            <div class="navbar-bottom">
            </div>
        </div>

Replace URL With your URL
Replace Blue color words with any names you want to put as menu name.

8. Now save  HTML/JavaScript  
You are done.

Continue Reading | comments

Add CSS Vertical Menu to blogger

hello friend in this posts we know how we can add css  menu button in you blog follow this simple step and add css vertical menu button in your blog


1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Find (Ctrl +F) </head> tag .
3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
ul {list-style: none;
margin: 0;
padding: 0;
}

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;
    voice-family: &quot;\&quot;}\&quot;&quot;;
    voice-family: inherit;
    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/AVvXsEhYozZ4rOZ_z51USUTUxKqbZ49RvBhKVWCYfju8jXGg2FovqSYp5PE4G1pBeBvDGOoKOY_33YccnqjjsDD6JzVjLL9mkOXAvm7P8oe7vGNWAyHxzuENmNKVa09KoKLnWRMp99PH6vEpeQsb/);
  padding: 8px 0 0 10px;
  }

#menu4 li a:hover, #menu4 li #current {
  color: #FFF;
  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYozZ4rOZ_z51USUTUxKqbZ49RvBhKVWCYfju8jXGg2FovqSYp5PE4G1pBeBvDGOoKOY_33YccnqjjsDD6JzVjLL9mkOXAvm7P8oe7vGNWAyHxzuENmNKVa09KoKLnWRMp99PH6vEpeQsb/) 0 -32px;
  padding: 8px 0 0 10px;
  }
</style>

Note : Please Host image yourself.
4.Save your template.
5.Now Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.

<div id="menu4">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>

7.Now you are done.It will look like this:

CSS Black Vertical Menu

Demo

Continue Reading | comments