Adsense Link 728 X 15;

Cara Membuat Menu Horizontal Drop Down di Blog

Space Iklan Disini, silahkan Hubungi kami !


Membuat Menu Horizontal Drop Down di Blog, sebenarnya ini bukan cara sih, lebih cenderung jadi memasang, tapi yasudahlah intinya tetap sama yaitu membuat/ memasang menu navigasi di blog kita. sebenarnya apa sih fungsi kita memasang Menu Horizontal Drop Down di Blog itu. Banyak manfaat yang kita dapatkan dari memasang menu Tersebut.
  • Pertama, Pasti akan membuat tampilan blog kita terlihat Lebih Profesional, walaupun blog kita masih baru atau masih dalam pencarian jati diri blog kita itu apa, untuk ingin info tentang bagaimana membuat tampilan blog lebih profesional silahkan baca di sini.

  • kedua, Memudahkan para pengunjung untuk mencari artikel yang ada di blog kita, jadi pengunjung tidak perlu membuka halaman blog kita satu persatu, tinggal mencari menu dan sub menu lewat menu horizontal drop down tadi. atau juga sobat bisa pasang Navigasi halaman di Blog Sobat.
  • Ketiga, Denger-denger sig Juga bisa buat blog kita jadi SEO loh sobat, kok bisa, selain tampilan kita profesional pasti akan lebih di sukai oleh Google, dan akan memudahkan pengunjung membuka artikel kita senhingga page view akan meningkat.

nah sekarang saatnya Bang Gopar memberikan tutorial tentang cara pembuatannya, bagi sobat yang berminat untuk memasang di blog sobat silahkan ikuti langkah-langkah berikut dengan seksama, tidak sulit kok.

Cara Memasang Menu Horizontal Drop Down

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. silahkan sobat tambahkan kode diwah ini ke Elemen di bawah header blog sobat.



<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: 905px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #000;

    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="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>


Ketterangan:
Silahkan ganti #  dengan alamat menu yang sobat inginkan.
Yang saya beri warna merah adalah nama menu yang akan di tampilkan di blog sobat, silahkan ganti sesuai keinginan sobat.

Catatan : selain di bawah di bawah header juga bisa, tapi tempat paling efektif adalah di elemen di bawah header. jika di bawah header sobat tidak ada elemen. sobat bisa baca tutorial Cara membuat Elemen Di bawah Header.

4. silahkan save, oh ya untuk judulnya di kosongkan saja.

Gimana sobat? mudahkan. nah sekian dulu ya Cara Membuat Menu Horizontal Drop Down di Blog. semoga ini bisa bermanfaat bagi sobat Blogger. terimaksih

Description: Cara Membuat Menu Horizontal Drop Down di Blog Rating: 3.5 Reviewer: Gopar Bastian ItemReviewed: Cara Membuat Menu Horizontal Drop Down di Blog

29 comments:

Anonymous said...

keren sob...

Didin Supriatna said...

saya yang simple aja deh sob..

Gopar said...

ini juga udah simpel sob,, tinggal nambah di gadget elemen pada blog sobat..

ICAH BANJARMASIN said...

Wuihhhhhhhh..lagi ngetren warna HITAM ya,nah ini mantef bang tutornya soalnya buat mempercantik blog biar kaya AURA KASIH gituuuuuuuu....hahahahyyy

alice said...

tutorialnya bagus2 disini hhh btw aku juga pingin belajar bikin menu dropdown...mantab sob :D

EYSurbakti said...

mantap, ane ijin copas ya ..
bermanfaat nih

LUSTY SAE said...

Info yang bagus sob...
Pingin buat menu horison kaya gini

Thanks

Sri Efriyanti Az-zahra Harahap said...

Izin copast ya mas:)
Udah lama mau buat tampilan kayak gitu ^^

Gopar said...

silahkan aje, moga bermanfaat ya?

Gopar said...

silahkan sobat.

Gopar said...

ikuti saja tutorial di atas sob, mudah kok

Gopar said...

iya sob, malah ngalah-ngalahin si Aura Kasih ini

Darmawan Saputra said...

Jangan lupa sumbernya ya :D

saya dulu pernah pakai ini tapi sepertinya bikin blog kita loadingnya lama.
nice info

Gopar said...

ini gak bikin loading lama. ini kan cuma pakek CSS bukan java script..

ini tulisan saya sendiri masak iya saya kasih alamat blog saya sendiri, ntar di kira narsis lagi..

Agusgt said...

thanks sob...........

Agusgt said...

tapi knapa menu drop down ku nggk bisa keluar????


tolong di jlasin dob???

Gopar said...

apa sobat sudah melakukannya dengan benar, jika sudah mungkin template sobat ada yang gak suport, atau sobat bisa memasangnya lewat edit HTML templatenya saja..

Hobeeku said...

waw nice info, tapi saya belum tau cara mengatur tata letaknya.. hehehe

Gopar said...

caranya sudah di jelaskan di atas sob, apalagiyangkurang paham

Muhammad Syakur said...

sob kalo ditaro digambar header gimana ya sob?

Gopar said...

maksudnya gimana? maaf pertanyaannya kurang jelas

Handdhrry Ekka said...

sob, su meNunya gk mau keLuar keNapa ?

Gopar said...

mungkin template sobat tidak mendukung sob..

fajar firmansyah said...

mantep mampir ya ... fajar196.blogspot.com

Mister Complete said...

keren kang menu horizontal droupdownnya. makasih banyak sudah share tutorialnya.

pradipta paksi said...

makasih banyak bro..

100% WORK PERFECTLY!!!

salam..

Ka Akira said...

Gan sub menunya gk keluar... kalo templatenya gak pas, template mana yang pas ?

SEO Killer said...

Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer

Paling Asik said...

wiih keren nih, ane coba dulu yah gan

Post a Comment