Matt Black Tabs ( Horizontal CSS Menus ) For All Websites

Posted by محمد On Monday, August 6, 2012 1 comments
 matt black tabs
There's often beauty in simplicity. Matt Black Tabs is a clean CSS list menu that uses no images, and very small in footprint. Each tab is floated left to achieve its look and all contained in a wrapper that negate the need to manually clear "float" for the contents that immediately follow.Matt Black is a Cool Horizontal Menu With Css. To Add This Menu To Your Blogger Follow These Simple Below steps :


  • Go to blogger.com > Design > Edit HTML



  • check on the box “Expand Widget Templates“



  • add The  below CSS code just above/before ]]></b:skin> tag in your template,
    <style type="text/css">
    .mattblacktabs{
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
    }
    .mattblacktabs ul{
    margin: 0;
    padding: 0;
    padding-left: 10px; /*offset of tabs relative to browser left edge*/
    font: bold 12px Verdana;
    list-style-type: none;
    }
    .mattblacktabs li{
    display: inline;
    margin: 0;
    }
    .mattblacktabs li a{
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 7px 8px; /*padding inside each tab*/
    border-right: 1px solid white; /*right divider between tabs*/
    color: white;
    background: #414141; /*background of tabs (default state)*/
    }
    .mattblacktabs li a:visited{
    color: white;
    }
    .mattblacktabs li a:hover, .mattblacktabs li.selected a{
    background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
    }
    </style>
    • Now go to Page/Edit Layout.
    • Click on Add a Gadget > HTML/Javascript.
    • Paste below code and save it.
    <div class="mattblacktabs">
    <ul>
    <li><a href="http://www.Tutosforblogger.blogspot.com/">Home</a></li>
    <li><a href="http://www.Tutosforblogger.blogspot.com/">Templates</a></li>
    <li><a href="http://www.Tutosforblogger.blogspot.com/">CSS</a></li>
    <li><a href="http://www.Tutosforblogger.blogspot.com/">Blogger tutorials</a></li>
    <li><a href="http://Tutosforblogger.blogspot.com/">My blog</a></li>
    </ul>
    </div>

    That’s All


  • 1 comments:

    Anonymous said...

    Your way of describing the whole thing in this piece of writing is truly
    nice, all be able to without difficulty be aware of it, Thanks
    a lot.

    Also visit my web-site - best diet plans

    Post a Comment

    Facebook Page

    Followers