Showing posts with label Menus for Blogger. Show all posts
Showing posts with label Menus for Blogger. Show all posts

Awesome CSS3 animated Menu for blogger Blog

By Unknown Posted On 2:31 AM // Leave a Comment
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.
View Demo
  • 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnJzgZ8QhQqu7O9ziTBk-1at_TgoaGsLDWRPRehSGCaM41Hgq4fWCO0_oM5v-kurB_ZreYW2nMzR74QsU44szFJEJIkYmWqUuMN1vapggpJt_Y4W9ZxDkoD38vBjVV_7xZ0vhEwjqjXA/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://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBUSUwdNvsrKvheFCPj4pYvP8j1ePZ9q_UiGjwKGC3ZJo_8VOSQxRhKFh4qFx4WPKZSBnA1T9ylvoSjxQfrtx1rbo9ZT1-8dFY1ZHhHAQ15UG9Xwik_bQSwNjKZJ3qqm1Ji-pm7UyV2Q/s1600/1x1juice.png" /></a>

<div class="noop-menu-blue">
    <ul class="menu">
        <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://netoopsblog.blogspot.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu8y_bf1ESQwCFqnxlAVR5CFzIHmkK9QjXDhb0AMvFOqdiW5JB26Xr8NT5ytiLahRM2VFbPgiQFUCRk6kowd2DIElijtHqZCGVpiytwa5C1gkBVZrtSUl4Enahl_UKKXhE9IZsdS1A7R0/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://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBUSUwdNvsrKvheFCPj4pYvP8j1ePZ9q_UiGjwKGC3ZJo_8VOSQxRhKFh4qFx4WPKZSBnA1T9ylvoSjxQfrtx1rbo9ZT1-8dFY1ZHhHAQ15UG9Xwik_bQSwNjKZJ3qqm1Ji-pm7UyV2Q/s1600/1x1juice.png" /></a>

<div class="noop-menu-green">
    <ul class="menu">
        <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://netoopsblog.blogspot.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5B_xCx3oZ2v5x3RiOMvguuJaNKvehAnLZSR02XCxvhsqpBnPhZXpJT0MpEq4rkx8idX2FMzUrxH3_1b6MQz6RMVL3o7H9oDezcnd9KetarVxQC-DGXpwX4q8hMZwnYSGW3sNRQY33Wc/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://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBUSUwdNvsrKvheFCPj4pYvP8j1ePZ9q_UiGjwKGC3ZJo_8VOSQxRhKFh4qFx4WPKZSBnA1T9ylvoSjxQfrtx1rbo9ZT1-8dFY1ZHhHAQ15UG9Xwik_bQSwNjKZJ3qqm1Ji-pm7UyV2Q/s1600/1x1juice.png" /></a>

<div class="noop-menu-purple">
    <ul class="menu">
        <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://netoopsblog.blogspot.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLxUFAEkTEERQFieSksqTbOO4UAv-iu7J0sUf26aWpYzsXXZ7OCbQtTM69abAMQXftJN3EX-ZNzWOcyohjRWl82H_Ft4cEsHbQ4sAQ38EKT3BOFVaG9KVt9_PaR6zDgCfLUCARUv_i8FU/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://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBUSUwdNvsrKvheFCPj4pYvP8j1ePZ9q_UiGjwKGC3ZJo_8VOSQxRhKFh4qFx4WPKZSBnA1T9ylvoSjxQfrtx1rbo9ZT1-8dFY1ZHhHAQ15UG9Xwik_bQSwNjKZJ3qqm1Ji-pm7UyV2Q/s1600/1x1juice.png" /></a>

<div class="noop-menu-skyblue">
    <ul class="menu">
        <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://netoopsblog.blogspot.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTVgTNZztMuR_45o1yJJMz53JGrz4j2dvZn68NOATD62ydMI90-x4JiOq06ZRhkqQHoqBPueKA2hl6IWN3ySRAKiwkwEiiigytxq3Txj0cpfI_FQIMGQxHptToHfnXDUYXDfpfLywBt0/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
border: 1px 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://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBUSUwdNvsrKvheFCPj4pYvP8j1ePZ9q_UiGjwKGC3ZJo_8VOSQxRhKFh4qFx4WPKZSBnA1T9ylvoSjxQfrtx1rbo9ZT1-8dFY1ZHhHAQ15UG9Xwik_bQSwNjKZJ3qqm1Ji-pm7UyV2Q/s1600/1x1juice.png" /></a>

<div class="noop-menu-brown">
    <ul class="menu">
        <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://netoopsblog.blogspot.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.
[Read more]
Click to go to top