Glossy Red-Grey Tabs Menu

This new menu has two different variations. The color combination can either be red in active mode and grey on mouse hover or vice versa. It is a shiny navigation menu that is mainly created for including blogger pages such as Home, Contact, About. That's why I ignored adding a drop down column to it. Very soon we will also learn how to create mega menus with multi columns in drop down view. But first lets see a demo first,

Grey-Red Theme

blogger menu

Red-Grey Theme

glossy tabs menu

 


Live Demo

Add This Menu To Blogger

  1. Go to Blogger > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it,

<style>
.mbt-red-grey-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}

.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6SfyxBNdk5olhwAAboar47NCzJZgOSq6QN-A05jCgGVi3Rizhyphenhyphen4AlPAan675d1VmuackW2SW_HikFyW8JFf8ONuX4oHgEvOAUXzC2-J48FjySDV7pKm2XhfpKXe6y4W6RZDeGxBBiIA/s400/blockdefault.gif) center center repeat-x;
}

.mbt-red-grey-menu li{
display: inline;
}

.mbt-red-grey-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.mbt-red-grey-menu li a:visited{
color: #fff;
}

.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWxAsiU8ikkBLOrX2GOtUALHD3YprRBAXm1VIICwsGSob5aYr6D0P9PsYclGDhBvfhB6E1d-WCGfV7Qm_ZkjJ7tb4cOaA7c_ySqSUrVYMKsdAK8uLpBRGm2BYpDcefqUSVtZLDbqkguA/s400/blockactive.gif) center center repeat-x;
}

</style>

 

<ul  class="mbt-red-grey-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >About Us </a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

  

      Make these changes:

Replace the # sign in each case with related Page URL.

The above code is for Red-Grey theme if you wish to use the other theme instead then simply swap the position of the two image links in the above code (shown in purple).

To add a new link then paste the following code each time you want just before </ul>

<li><a href="#">page-name</a></li>

     4.   Save your widget and drag it just below your blog header. (Blog header is the widget where you add blog title and description)

     5.   Hit the Save button at the top-right corner of Page Elements page

     6.   You are all done!

Visit your blogs to see it working just perfectly. If you would like to select a different menu out of 30-40 menus created by MBT then you can search our blog to find something more exciting. Feel free to let me know if you needed any help. I am sure this menu will let you better organize your blog. Peace brothers. :>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

13 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks for that
    http://howtolearnblog.blogspot.com

    ReplyDelete
  2. Thanks For Sharing :)
    I Like Every Tutorial I Read On This Blog :)

    Latest Tricks

    ReplyDelete
  3. Superb Mustafa!

    I like to add submenu and tooltip. Is possible?

    Regards
    Hari

    ReplyDelete
  4. hi mustafa!
    I would like to know how i could make my blog accomodate my banner image. i dont want to reduce its size. thanks. the blog is here http://www.techbase.infohi mustafa!
    I would like to know how i could make my blog accomodate my banner image. i dont want to reduce its size. thanks. the blog is here http://www.techbase.info

    ReplyDelete
  5. hi mustafa!
    I would like to know how i could make my blog accomodate my banner image. i dont want to reduce its size. thanks. the blog is here http://www.techbase.info

    ReplyDelete
  6. nice...



    go here

    www.mediafirerockz.blogspot.com
    or
    www.mediafirerockz.co.cc


    for free Hd movies,mediafire downloads,games,software

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Mohammad Bhai Please Keep Sharing Today I Didn't Receive Email For New Updates Hope You Will Write Soon :)

    ReplyDelete
  9. nice articel and very helpful

    http://internetricks4u.blogspot.com/

    ReplyDelete
  10. Good one brotha!!
    I had seen this on your MBT LAB (zailab.blogspot.com) long back. :)

    Any-how, Good-Useful one! :) Keep going. ;)

    M.Pinto from www.ProHacker.IN.

    ReplyDelete
  11. thanks for sharing. This is what I've been looking for. Will try to use this in my blog.

    Techie Agent - Basic Blogging Tutorials

    ReplyDelete
  12. If we add this and we are on any page and we click on home then it did'nt redirect it open the same page why????

    ReplyDelete