CSS3 Drop down Menu navigasi Horisontal V2

Lagi-lagi menu navigasi, sesuai permintaan teman yang ingin punya menu seperti blog ini maka saya akan membagikan menu navigasi blog ini. Menu navigasi kali ini murni menggunakan kode CSS jadi nggak ngeberatin loading blog sobat.

Silakan ikuti langkah-langkah berikut ini:

Masuk ke blogger > Dasbor > tata Letak > tambahkan Gadget > HTML/Javascript.

Masukkan kode berikut;

<style>


    /*------ CSS3 Horizontal Drop Down Menu---------*/


    #CSS3-menu, #CSS3-menu ul {margin: 0;padding: 0;list-style: none;}


    #CSS3-menu { width: 880px;margin: 40px auto;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;}


    #CSS3-menu:before,


    #CSS3-menu:after {content: "";display: table;}


    #CSS3-menu:after {clear: both;}


    #CSS3-menu {zoom:1;}


    #CSS3-menu li {
     float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;}


    #CSS3-menu a {
float: left;
padding: 8px 20px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;}


    #CSS3-menu li:hover > a {color: #fafafa;}


    *html #CSS3-menu li a:hover { /* IE6 only */
    color: #fafafa;}


    #CSS3-menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 9999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;}


    #CSS3-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;}


    #CSS3-menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);}


    #CSS3-menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;}


    #CSS3-menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }


    #CSS3-menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }


    #CSS3-menu ul a:hover {
    background-color: #0186ba;
    background-image: -moz-linear-gradient(#04acec, #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: -ms-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
    }


    #CSS3-menu ul li:first-child > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    }


    #CSS3-menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    }
    #CSS3-menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
    }
    #CSS3-menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    #CSS3-menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
    }


    #CSS3-menu ul li:last-child > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }


    </style>




    <ul id="CSS3-menu">
    <li><a href="http://blogbelajar2.blogspot.com/p/daftar-isi.html">Daftar Isi</a></li>
    <li>
    <a href="http://blogbelajar2.blogspot.com/p/blogger.html">About</a>
    <ul>
      <li><a href="http://blogbelajar2.blogspot.com/p/kontak-saya-yang-dapat-dihubungi.html">Contact</a></li>
      <li><a href="http://blogbelajar2.blogspot.com/p/etika-ketentuan-dan-komentar-di-belajar.html">Baca Ini</a></li>
    </ul>
    </li>
    <li><a href="http://blogbelajar2.blogspot.com/search/label/SEO">Tips SEO</a></li>
    <li><a href="http://blogbelajar2.blogspot.com/search/label/Widget">Widgets</a></li>
    <li><a href="http://blogbelajar2.blogspot.com/search/label/Panduan%20Dasar%20Blogspot">Basic</a></li>
    <li><a href="http://blogbelajar2.blogspot.com/search/label/Tombol%20Share">Sharing</a></li>
    <li><a href="http://blogbelajar2.blogspot.com/search/label/Menghias%20Blog">Menghias Blog</a></li>


    <li>
    <a href="#">Blogger Tools</a>
    <ul>
      <li><a href="http://blogbelajar2.blogspot.com/p/untuk-membuat-loading-blog-lebih-cepat.html">CSS Compressor</a></li>
      <li><a href="http://blogbelajar2.blogspot.com/p/backlink-generator.html">Backlink Generator</a></li>
      <li><a href="http://blogbelajar2.blogspot.com/p/kode-warna.html">Kode Warna</a></li>
      <li><a href="http://blogbelajar2.blogspot.com/p/submit-blog-to-search-engine.html">Blog submitter</a></li>
      <li><a href="http://blogbelajar2.blogspot.com/p/indexed-pages-checker.html">Page Index</a></li>


    </ul>
    </li>
    </ul>

Pengaturan:

1. Jika ingin meletakan di bawah header cari kode seperti di bawah di edit HTML template, jangan lupa centang expand template widget

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

kemudian ganti  angka 1 menjadi 2 atau 3 atau lebih, dan no menjadi yes sehingga menjadi seperti di bawah;

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Simpan template.  

2. Ganti url blog saya dengan url / alamat blog sobat yang ditandai dengan kode merah, untuk kode warna   biru harus diganti juga dengan kata-kata menu yang diinginkan. 

3. Untuk lebar menu lihat angka 880px  kurangi atau tambahkan nilai angka tersebut

Semoga bermanfaat .

Thanks for reading & sharing Kumpulan Artikel