• Add Simple CSS3 Menubar For Blogger Blogspot


    In this article we are going to see how to add a beautiful css3 menubar for blogger which looks like a jquery menubar, But it is not.Here we have used some new css3 features to make it more lively and catchy . To install this widget in your side bar please follow the steps given below .
    Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

    Step 2:
    Go to >> Dashboard>> Design >> Add a Gadget >> Html/Javascript
    and paste this code

    <style>  .navbox {
     position: relative;
     float: left;
    }
    
    ul.nav {
     list-style: none;
     display: block;
     width: 200px;
     position: relative;
     top: 100px;
     left: 100px;
     padding: 60px 0 60px 0;
     background: url(http://1.bp.blogspot.com/_XQm2Bew_4mE/TI4OL51l7-I/AAAAAAAAC_Y/kNHEhVj2lxE/s1600/shad2.png) no-repeat;
     -webkit-background-size: 50% 100%;
    }
    
    li {
     margin: 5px 0 0 0;
    }
    
    ul.nav li a {
     -webkit-transition: all 0.3s ease-out;
     background: #cbcbcb url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4OXas9o0I/AAAAAAAAC_g/jHOY2WIbuU4/s1600/border.png) no-repeat;
     color: #174867;
     padding: 7px 15px 7px 15px;
     -webkit-border-top-right-radius: 10px;
      -webkit-border-bottom-right-radius: 10px;
     width: 100px;
     display: block;
     text-decoration: none;
     -webkit-box-shadow: 2px 2px 4px #888;
    }
    
    ul.nav li a:hover {
     background: #ebebeb url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4OXas9o0I/AAAAAAAAC_g/jHOY2WIbuU4/s1600/border.png) no-repeat;
     color: #67a5cd;
     padding: 7px 15px 7px 30px;
    }
    
    </<span class="end-tag">style</span>>
    
    <<span class="start-tag">div</span><span class="attribute-name"> class</span>=<span class="attribute-value">"navbox"</span>>
    <<span class="start-tag">ul</span><span class="attribute-name"> class</span>=<span class="attribute-value">"nav"</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">XHTML</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">C++</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Mootools</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">HTML5</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">CSS</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">jQuery</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Ajax</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">PHP</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    <<span class="start-tag">li</span>><<span class="start-tag">a</span><span class="attribute-name"> href</span>="<a href="view-source:http://development.tobypitman.com/css/menu.html#">#</a>">Perl</<span class="end-tag">a</span>></<span class="end-tag">li</span>>
    </<span class="end-tag">ul</span>>
    </<span class="end-tag">div</span>>
     
    Save It.Its Easy... 

    1 comments: