Cara Membuat Menu Horizontal Drop Down di Blog

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 yang lebih baik.

• 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 memberikan tutorial tentang cara pembuatannya, bagi sobat yang berminat untuk memasang di blog sobat silahkan ikuti langkah-langkah berikut dengan seksama, tidak sulit kok.

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 (amyvista.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></b> <br /> <b style="font-family: arial; font-size: 14px; line-height: 21px; text-align: justify;"><br /></b><br /> <br /> <br /> <br />
Ketterangan:
Silahkan ganti #  dengan alamat menu yang sobat inginkan.
Dan untuk " MENU, CATEGORIES " dan lainnya adalah nama menu yang akan di tampilkan di blog sobat, silahkan ganti sesuai keinginan sobat.

4. silahkan save, untuk judulnya di kosongkan saja.

Sekian dulu untuk Cara Membuat Menu Horizontal Drop Down di Blog. semoga ini bisa bermanfaat bagi sobat Blogger. terimaksih..