Recommended Article for you : get unlimited Freecharge Trick revealed

Awesome CSS3 animated Menu for blogger Blog

css3 sliding menus for blogger blog
There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.



Want to see demo??Click the link below.
  • Go to Design->Page Elements [Take Layout in new template]
  • Click on Add gadget just below the Header
  •  Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
  • You can change RED highlighted text with your Menu title and GREEN with LINK

Add Elemic Blue Menu


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("http://1.bp.blogspot.com/-e8VrFODNr7s/T2TK3jW0ZYI/AAAAAAAAALA/wH-oW-79nzA/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

<div class="noop-menu-blue">
    <ul class="menu">
        <li><a href="http://www.netoopsblog.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>


Add Green Menu


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("http://4.bp.blogspot.com/-d_8TPWrGfkA/T2cL1u8gsyI/AAAAAAAAALM/sAnVoDMV2g8/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;
border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

<div class="noop-menu-green">
    <ul class="menu">
        <li><a href="http://www.netoopsblog.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>




Add Grape Purple Menu


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("http://1.bp.blogspot.com/-dlSCwYWZiAs/T2cL2RK352I/AAAAAAAAALY/LIdrAsdP8FE/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;
border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

<div class="noop-menu-purple">
    <ul class="menu">
        <li><a href="http://www.netoopsblog.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>




Add Light-Dark SkyBlue Menu


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("http://4.bp.blogspot.com/-PCm-HXYZxoE/T2cL3ad5WfI/AAAAAAAAALc/QR31iFK7wmg/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;
border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

<div class="noop-menu-skyblue">
    <ul class="menu">
        <li><a href="http://www.netoopsblog.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>




Add Tree Brown Menu


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("http://1.bp.blogspot.com/-cgivpkT1QoM/T2cL0yWJS3I/AAAAAAAAALI/LMvRccXroxI/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
border1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://www.netoopsblog.com" style="position: absolute;z-index:-11;"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a>

<div class="noop-menu-brown">
    <ul class="menu">
        <li><a href="http://www.netoopsblog.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://www.netoopsblog.in/search/label/Blogger%20Tricks">Tricks</a></li>
        <li><a href="#">About</a></li>
    </ul>

</div>


I hope you enjoyed this Menu and also except more from us.
Close [x]

12 comments :

  1. i think brown menu wrong coded LoL.
    there is Light-Dark SkyBlue Menu

    ReplyDelete
    Replies
    1. Thanks Beben Koben for informing the bug in code...
      Your Blog Suppppeeeerrrbbbbb.........God bless you..

      Delete
  2. Your blog is much better that the site i always seen on the first page of google. Google is so unfair, you site is better yet i never found it on first page but good this is I found your blog and I will now visit it often.

    visit my TRAVEL blog too http://outravel.blogspot.com if you have time, ill search for tricks here in your blog to make my blog better too.

    ReplyDelete
    Replies
    1. Thanks Teejay Encarges for your comments...Keep visiting...:)

      Delete
  3. please have a tutorial of this type on drop down menus

    ReplyDelete
  4. "You can change RED highlighted text with your Menu title and GREEN with LINK"

    I think it should be RED as Links and Green as Text :)

    ReplyDelete
  5. PLEASE HELP ME
    HOW CAN I CHANGE THE LINKS FOR EXAMPLE WHEN I PRESS HOME BUTTON I GO TO YOUR BLOG
    :)

    ReplyDelete
    Replies
    1. goto Edit HTML and find(Ctrl+F) noop-menu-blue , you can see like this <div class="noop-menu-blue" just below inside the <li> tag you can see our blog link change it

      Delete

Ask your thoughts to us,We are happy to help you.


1.Please don't Spam
2.We strictly recommend to Click on Subscribe to email