Design 3D Effect Cool Looking Menu Bar for Blogger

Design 3D Effect Cool Looking Menu Bar for Blogger

3D Effect Menu Bar For Blogger Blog

Has you bored from your old menu bar? Don’t worry because today I’m here with another cool widget for your Blogger Blog. I’ve  name it 3D Effect Cool Looking Menu Bar for Blogger cause of it’s 3D features. A blogger always want their blog look like a professional Blog and you are also right? 🙂 ) Good looking Blogs get more traffic because they attract their visitors cause of his nice blogger widgets and plugins. If you got high traffic then your alexa rank is also improved and improving of alexa rank is a very good signal for your Blog because if you have a good alexa rank then you can attract more visitors. So come back on point now, This 3D Effect Menu Bar is very g0od looking and if you want to add it your blogger blog then read complete guide below which is How To Add 3D Effect Cool Looking Menu Bar To Blogger Blog. So now lets start adding this widget. Follow below steps one by one.

Before adding it your Blog first check Demo.

Note : First Download Backup Copy of Your Blogger Template.

How To Add 3D Effect Cool Looking Menu Bar To Blogger Blog.

  • Go to Blogger Dashoboard.
  • Now Go To Template and then Click On Edit HTML.
  • Now Search ]]></b:skin> by prssing CTRL+F
  • 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>

  • Now Find </head> tag and paste below code just below of this tag.

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

  • Now Click On Save Template..
  • That’s it. You have Added This menu Bar to your blog.

So above guide is about Design 3D Effect Cool Looking Menu Bar for Blogger and i hope by this complete guide you have easily added this widget to your blogger. If you have any query related to this article then drop a comment below. We will get back to you for answer your questions as soon as possible. Do share with your friends and on Blogging Communities.
Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: