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


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.

@import url(;
#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 > 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 > > 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 {
  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 {
  background: #dff2fa;

<script src="" type="text/javascript"></script> <script charset='utf-8' src='' type='text/javascript'/> 

4. Now go to blogger Layout
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.
<div id='cssmenu'>
   <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>

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 .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


  1. All Blogging Tutorial and Trick 2015 Plz Visit Our Site-

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

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

  4. I alway's find your articles helpful.
    Cheer's to your work.
    Regards :

  5. Thanxxx a lot........very helpful for me i tried on

  6. This post is good.
    thank you give it us for improving knowledge of us.

  7. okay the problem is ho i mainten my pages to this menu bar check my site and suggest me

  8. Works very well on 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.

  9. works very well on But i wish to edit it or add a few. Any ideas on where to start?

    Anyway awesome tutorial.

  10. Hi,

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

    by vani,

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

    By Avani,

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

    its my blog

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

  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

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

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

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

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

    Have a nice day

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

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

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