beautiful css animated menu for blogger

Today we are going to discuss about navigation menus in blogger . Navigation menu is one of the most important part of our blog, because with this our readers can find pages they want i.e contact us, feedback us, etc And if menu is animated then reader cant wait to click on it . creating a beautiful menu is not hard in these days but make it compatible with all major is browser is one of the question on these menus. But we are giving you the most beautiful menu for your blog and website the one more thing is that it is also work with html site so you can use it in both . It is a beautiful menu with animation effect and there is no effect of it on your blogs loading time because there is no jquery used in it. It is created with pure css So be free to use it in your blog . Now i,m going to tell you that how to add this beautiful css menu in your blogger blog but first you have to check its demo so you can easily take decision of adding it.
Some Previous posts about menu's:

• Floating menu for blogger
• Beautiful menu with search box

Demo Click Here

Installation:

1. Goto blogger and select your blog in which you want to add menu
2. now select layout tab and add a gadget 
3. The select html/javascript and paste below Code in it .

<style type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.exespotlightmenu li:hover a{

color: white;

background: #a71b15; /* background color of spotlight */

-webkit-border-radius: 50%; /* large radius to create circular borders */

-moz-border-radius: 50%;

border-radius: 50%;

}

.exespotlightmenu li a exespan{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

</style>

<div class="exespotlightmenu">

<ul>

<li><a href="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>Portfolio</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>

</ul>

</div>

 Now Replace RED colour to your desire text And replace ######## with your desire link
Thank you very much for visiting my blog hope you like it if Yes then please share it with your friends

Read More

Floating menu for your blogger blog

Now i,m going to tell you that how to create floating menu for blogger i posted about many menu's in my previous post's But this one is really good and beautiful because it float in left sidebar and whenever user scroll down the page it automatically float with it and it create and ease for user to go on any page and it make easy to navigate any thing on your blog . It make your site user friendly . below we added demo picture and demo link also you can easily take decision for adding it.

Floating blogger menu 

You can also check out this widget's demo on our demo site 

So, you seen that how beautiful it is . I know you want to add it to your blog. Follow my steps to add it to your blog.

Steps

1. Goto your blogger dashboard > Teamplate

2. Edit html and find    ]]></b:skin>

3. now add below code just above the ]]></b:skin>

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVjOU78EJEOuL7mGvuqIRUn0Q-q-EcFzUa3aBEkM54PcoPzHxDAxXYNwquSX0QvkX30W9XRwvv1O_98zEag4bybjMEFSl3G_GxoVkLwXTTnW2EpbX7l1-3mW-cbvw2_9Reiktm9EpOnw/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCli-4BwSR_auEAYkApGKYmORXPnL1QxrrwpmOvkg2R_eXicDyLUKu9F1kxtqZR6ic06kcaWvURQ9xcfhCeyj7leTqc4bLyrw0qg8_Car-lA7J5lqiyzLggkURDp01aCWsrAAKEGYMqZA/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81P3pTtx8U8NSasLWJntYPmchjuc-27qiGL5f01kflFVFmb5ig5nVVOBSzoN2HA0xKIX2D5Vl2lQQXuGxQH6knUBZFj_twzGQ7vPLu6TJbUiPy5ybXR-k8dtK2fTof3kKU5jffx6UKqc/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALfE3O0mIF5dabBSUPJ1xNaAhjNC2DJLg79GBO39R7No-MvjtnJqV7KEG3T11PATN5y6hN9qh6fLaScrylrsEvPO_4J9QQexxb6dhKXVistL9juaT9kENNhc70XYchyAOOtGZT32KUJ0/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtXxqAHvgwBEa8H0AGdiBAThE2aAbNvhq6TVq8JuVbRnAbI_zP7d3igUsCyZMkeq_X7Y4m1PHcXOiPnPqtzXW5bZOIXFc4jVjJnnZRTtgfuh_12kBSJ1rIazIycFIouCpn-0W2b_tws2o/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwlU7t5r7F0Uz6wsiTUR0_z7hFmBTEYa9haXpj3fx6tHkglH5JryaXXbbv9XR81LjbQPcjqrK8dsqnE5-CMWJ5TCyUBdH4ZPTa_BEcmf3rfzvxPx1B7UMM2_qL3o8lnZ_WvZdczZwEYVM/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibXQUyrkHGLmwd5YoT01_cfJKLZPrkeH20Gudf7crwsdUDAG8D2vqfS33e06rZHjjY-a2J4UZWGkKPA34uxv8cPF-JqKufXhfZPWRZANY-RxQnG0d3skhULxO2qBiVCHke_yu9qm8ez8o/s1600/mail.png);
}

4. now find </HEAD>  and paste below code just above </HEAD> tag

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

5.  Now find <BODY> and paste below code just below it.

<ul id="navigation">

            <li class="home"><a href="#" title="Home"></a></li>

            <li class="about"><a href="#" title="About"></a></li>

            <li class="search"><a href="#" title="Search"></a></li>

            <li class="photos"><a href="#" title="Photos"></a></li>

            <li class="rssfeed"><a href="#" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="#" title="Podcasts"></a></li>

            <li class="contact"><a href="#" title="Contact"></a></li>

        </ul>  

Now replace # with your links and Replace there titles also.

Note : please share it with your friends

Read More

beautiful menu for blogger with search box

Add menu with search box in blogger

Today i,m going to tell you that how to add beautiful simple menu in blogger with a beautiful search box. This menu create a better impression on your reader and it make ease to search any thing in your blog.the menu look very simple and search box is looking very beautiful in it .

You can also check my previous posts about menu's and search box.

• Menu
• Search box

Watch Demo of this menu in my demo blog so you can easily understand about this menu 

Now Follow my steps to add menu with search box in you blog.

Steps

1. Goto your blogger dashboard 

2. Now click on Edit html and Find  ]]></b:skin>

3. Now paste the below code just above  ]]></b:skin>

#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px} #Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none} #Menu ul{height:30px;list-style:none;margin:0;padding:0} #Menu li{height:30px;float:left;margin:0;padding:0} #MSA{width:960px;margin:0 auto;} #MSD{width:960px;} #Menu{height:30px;width:700px;float:left;} #SearchBox {height:35px;float:right;width:220px;} #SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px} #SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}

4. Now save the template 

5. Now goto page layout  and add a gadget 

6. Select html/javascript and paste below code in it 

<div id='MenuBar'> <div id='MSA'> <div id='MSD'> <div id='Menu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#' rel='author'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Advertise</a></li> <li><a href='#'>Write For Us</a></li> <li><a href='#'>Privacy Policy</a></li> <li><a href='http://www.haseebnet.blogspot.com/'>Add This</a></li> </ul> </div> <div id='SearchBox'> <form action='/search' method='get'> <input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/> <input type='submit' value='Go'/> </form> </div> </div> </div> </div> <!--MenuBar Ends--!>

7. Atlast save it 

Note : i did not create this menu i find it on internet and i think that it is useful for you So, i share it with you  Thanks

Please share it with your friends 

Read More