Wednesday, February 22, 2012

Menu Horizontal Drop Down Yang Keren

Menu Horizontal Drop down

Menu Navigasi Horizontal adalah menu yang ditampilkan secara mendatar. Biasanya Menu Navigasi Horizontal diletakkan di atas atau di bawah header blog. Akan tetapi, tidak sedikit juga blog yang memasang Menu Navigasi Horizontal di atas footer. Horizontal Navigation yang Rinjani Lovers share malam ini adalah Menu Navigasi yang sangat bagus. Menu Navigasi ini sangat mudah untuk diterapkan atau di pasang di blog karena sobat blogger tidak perlu melakukan Edit template. Menu Horizontal ini merupakan Menu Horizontal Drop Down tanpa gambar dan scripts. 

Cara buat Menu Navigasi Horizontal :
  • Silahkan Sobat blogger log in terlebih dahulu di blog sobat
  • Klik Design dan klik Add a gadget.
  • Copy kode yang ada di bawah ini dan paste pada kolom yang tersedia :

    <style>

    /*------ CSS3 Drop Down Menu By RL (rinjanilovers.blogspot.com)---------*/

    #rl-menu, #rl-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #rl-menu {

    width: 960px;

    margin: 60px 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;

    }

    #rl-menu:before,

    #rl-menu:after {

    content: "";

    display: table;

    }

    #rl-menu:after {

    clear: both;

    }

    #rl-menu {

    zoom:1;

    }

    #rl-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;

    }

    #rl-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #rl-menu li:hover > a {

    color: #fafafa;

    }

    *html #rl-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #rl-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;

    }

    #rl-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #rl-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);

    }

    #rl-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;

    }

    #rl-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #rl-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #rl-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);

    }

    #rl-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;

    }

    #rl-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;

    }

    #rl-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;

    }

    #rl-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #rl-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #rl-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="rl-menu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#">Categories</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
    </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
  • Klik save

Tambahan :
Jangan lupa mengganti tanda # dengan Link blog sobat

Kalau sobat blogger merasa tutorial blog kali ini bermamfaat, tolong tinggalkan pesan sobat pada kolom komentar di bawah ini.

Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



40 comments:

  1. wah... paannjaaaang nyooo... pusing gan ;-)

    ReplyDelete
  2. kalo cara ganti isi categories gimana gan?? soalnya disitu cuma ada graphic design,development tool sama web design....
    mohon pencerahannya

    ReplyDelete
    Replies
    1. Bobby Holocaust...
      Kata Home,CSS,Graphic, design dll tinggal di ganti sesuai dengan kata yang kita inginkan...
      Ingat ganti tanda # dengan link Bobby.
      Thanks atas pertanyaannya

      Delete
  3. gan,, kurang ke kiri menu nya gan... gi mana caranya ??

    ReplyDelete
    Replies
    1. ane tau caranya gan. . .
      ganti aja kode ( margin: 60px auto; ) ama kode ini ( margin-left:0px; ) kalo belum sesuai tinggal ganti angka 0 dengan angka sesukanya. . .
      .maaf yha mas.rosidi. . .cma mau nambahin aja kok. . .
      .Drop Down nya keren. . . .

      Delete
    2. Tinggal Ganti width: 960px; menjadi width: auto;

      Delete
  4. mantap gan,,,
    ijin sedot ya ilmunya .. :D
    happy blogging...

    ReplyDelete
  5. gan,, buat kan ane tampilan blog kayak ente gan.. mauu gak ?? kalau mau, bls

    ReplyDelete
    Replies
    1. Sanggar Temasek... langsung saja download templatex...
      Trs tinggal butuh sedikit modifikasi utk diperindah

      Delete
  6. kok menu yang kebawah gk bisa muncul gan. .??
    gmna yha cra'nya. .??
    pdhal udah keren banget. . .

    ReplyDelete
    Replies
    1. Fajar Triantono...
      Terkadang jenis template kita tidak mendukung...

      Delete
    2. ya ganti tempelate by http://neos-share.blogspot.com/

      Delete
  7. mantap ni gan indonya, mau di coba ahhhh

    ReplyDelete
  8. Knapa ga ada sub menu drop downnya ya ??
    Tolong banti ane gan...

    ReplyDelete
  9. Gua juga mengalami hal yang sama dengan bung Andy..
    Kenapa kok blum ada tampilan submenu drop down di script agan ?
    Mohon pencerahannya gan.. Makasih..

    ReplyDelete
  10. CHECK YA MAS BRO BLOG SAYA 'BANYAK TIPS2 YNG PERLU ANDA KETAHUI TERIMA KASIH ..
    CHECK TKP http://putrapatiwara.blogspot.com/

    ReplyDelete
  11. Halo kawan.
    Saya dah coba, tapi anak menunya kok gak keliatan

    Tolong ya...

    http://www.bataica.com

    ReplyDelete
  12. Sangat membantu sobat..

    Langsung ke TKP.

    ReplyDelete
  13. kerennn http://ade-nophiette.blogspot.com/

    ReplyDelete
  14. Gan gmana caranya supaya posisinya ad d tengah..:)
    Thx..

    ReplyDelete
  15. gan saya sudah paraktekan ni bisa si tp koq ga muncul ya menu drop down.a mohon penverahan.a gan thanks x)

    ReplyDelete
  16. GAN CARA MEMBUAT DI SAMPINGNYA TO KAN KISONG GMN CARANYA DI BUAT MESIN PENCARINYA AGAR LEBIH RAPI
    DI TUNGGU JAWABANYA
    http://andryunib.blogspot.com/

    BLOG PEMULA

    ReplyDelete
  17. mampir ya !!!
    berbagaidownload.blogspot.com

    ReplyDelete
  18. makasih daaahhhh ,

    kunjungi juga adiptasmansapati.blogspot.com untuk tips dan trik menarik :)

    ReplyDelete
  19. saya ijin nyoba ya sob. terimakasih sob tutorialnya...

    ReplyDelete
  20. gan,,,
    mohon bimbingan'a gan
    ane pengen kayak gan...
    yg mau bagi'' ilmu....
    nanti klo ane udh bs kayak..ane psti bagi'' ilmu jg
    buat yg laen
    maksih gan...

    ReplyDelete
  21. setelah menunya jadi cara ngisi kontennya gimana bos......

    ReplyDelete
  22. makasih
    tp klo mw ngisi home,categories,work,about,contact ny gimana?
    truss panjang -,-
    gimana ksh kecil nya?

    ReplyDelete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template