Wednesday, June 10, 2015

Awesome 3d Effect Css Menu bar for Blogger

Today i came up with new blogger widget, its a smooth 3d effect menu bar with jquery.You can add it to your blogger and make it some more nice.From the beginning, i gave lot of menu bar collection for blogger.
Did you check them  all?

If not Click below link
Awesome CSS Menubar For blogger

3d_Effect_Css_Menu



Awesome 3d Effect Css Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find ]]></b:skin>
3. Paste below code just below it.

<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none;}
#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}
#cssmenu > ul {background: #3db2e1;}
#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}
#cssmenu.align-center > ul {font-size: 0;text-align: center;}
#cssmenu.align-center > ul > li {display: inline-block;float: none;}
#cssmenu.align-right > ul > li {float: right;}
#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;
  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);
  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before { background: #3db2e1;}
#cssmenu.small-screen {width: 100%;}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}
#cssmenu.small-screen #menu-button:after {
  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}

  </style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/> 
       

4. Now go to blogger Layout
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>


7. Now save your HTML/Javascript'.You are done. If you have any problem related to this 3d Effect Css Menu bar. Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter

26 comments:

  1. All Blogging Tutorial and Trick 2015 Plz Visit Our Site- http://www.hackpower.org/

    ReplyDelete
  2. your post is good coding for developing.
    thank you for share it.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. I alway's find your articles helpful.
    Cheer's to your work.
    Regards : http://bloggingchimp.blogspot.com

    ReplyDelete
  5. This post is good.
    thank you give it us for improving knowledge of us.
    http://3d-architectural-rendering.com/3D-Floor-Plan.html

    ReplyDelete
  6. how can i edit it to add more

    ReplyDelete
  7. okay the problem is ho i mainten my pages to this menu bar check my site http://trickspot.in and suggest me

    ReplyDelete
  8. Works very well on http://eplscout.blogspot.com/. But i wish to change the naming or add more. Because i don't have products to sell and /or neither am i a company (yet).

    Any ideas? Any awesome job.

    ReplyDelete
  9. works very well on http://eplscout.blogspot.com/. But i wish to edit it or add a few. Any ideas on where to start?

    Anyway awesome tutorial.

    ReplyDelete
  10. Hi,

    the blog posted by you is good.
    thank you for post this blog.

    by vani,

    http://www.3d-architectural-rendering.com/3D-Floor-Plan.html

    ReplyDelete
  11. hello,
    You article giving this info about blogger to create 3d effect in blog.
    Thank you.

    By Avani,
    http://www.3d-architectural-rendering.com

    ReplyDelete
  12. hello,Good and helpful stuff. keep it up. thanks

    its my blog
    http://protechpk.blogspot.com

    ReplyDelete
  13. Hello,
    It is a nice tutorial,you explained it very well....Thank You.

    ReplyDelete
  14. Hello
    This is very nice information on 3d menu it will be useful for blogger to make attractive landing page.your article is really helpful to new blogger.Thank you

    ReplyDelete
  15. Hello,
    You shared the helpful post. Thank you for sharing this post. Keep sharing useful post.

    ReplyDelete
  16. how to change the name of these menu bars ?? how to extend this bars??
    how to add contents in this bar

    ReplyDelete
    Replies
    1. Check 6th step and change menu names as your like.
      if you want to extend,add li tags as your needs.

      Delete
  17. Thanks for this best how to guide on adding CSS to my blog.

    Have a nice day

    ReplyDelete
  18. Can u suggest me now..
    how i create more stylish pages and menu bar...

    ReplyDelete
    Replies
    1. Let me know your blog URL. ill suggest a good menubar

      Delete
  19. Thanxxx a lot........very helpful for me

    ReplyDelete