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

    2 comments:

    1. thank you very much. it's what i am searching

      ReplyDelete

    2. ارخص شركة نقل اثاث بجدة ارخص شركة نقل اثاث بجدة
      فني تركيب ورق جدران بالرياض فني تركيب ورق جدران بالرياض
      شركة نقل عفش من الدمام الى الاردن شركة نقل عفش من الدمام الى الاردن
      شركة نقل عفش من المدينة المنورة الى جدة شركة نقل عفش من المدينة المنورة الى جدة
      شركة نقل عفش من المدينة المنورة الى مكة شركة نقل عفش من المدينة المنورة الى مكة
      شركة نقل عفش من المدينة الى ينبع شركة نقل عفش من المدينة الى ينبع
      اسعار نقل العفش بجدة اسعار نقل العفش بجدة

      ReplyDelete