Cara Membuat Menu Drop Down Tanpa Edit HTML

Cara Membuat Menu Drop Down Tanpa Edit HTML Pada kali ini saya akan membahas seputar Cara Membuat Menu Drop Down Tanpa Edit HTML dimana pada pembahasan singkat ini saya akan menjelaskan bagaimana kita membuat suatu menu navigasai yang dimana saya rasa tidak perlu ada keahlian khusus dalam penerapannya dan sangat tergolong cukup mudah sekali.

Cara Membuat Menu Drop Down

Sebelum Saya lanjutkan ada baiknya anda baca juga postingan saya sebelumnya menyangkut tentang Kesalahan Dalam Optimalisasi Blog serta tentang Perbedaan Dofollow dan Nofollow , serta saya juga sudah bahas tentang produk review dari Decoder ulasannya ADA DISINI , nah pada kesempatan kali ini saya hanya akan share tutorial yang singkat saja tanpa banyak ini itu, yuk kita simak bagaimana cara buat menu navigasi dropdown tersebut?

Langkah Membuat Menu Navigasi Drop Down

1.Langkah yang pertama silahkan login ke akun blog sobat masing-masing cari menu TATA LETAK  lalu TAMBAHKAN GADGET dan pilih HTML/JAVASCRIPT lalu pasangkan kode dibawah ini tepat dikolom kosong tersebut, silahkan simpan dan lihat hasilnya, saran saya pasangkan pada TAMBAHKAN GADGET yang paling atas pada menu TATA LETAK yang ada pada pengaturan tata letak tersebut, saya sarankan silahkan ujicoba dulu untuk melihat hasilnya.

<style>#menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #000000; background: -moz-linear-gradient(#444, #000000); background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #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-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 0px #9c9c9c; -webkit-box-shadow: 0 2px 0px #9c9c9c; box-shadow: 0 2px 0px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; 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 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 2px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 12px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style><ul id="menu"><li><a href='/'>Home</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Drop menu</a><ul><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 1</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 2</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 4</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 5</a></li></ul></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Drop menu 2</a><ul><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 1</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 2</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3</a><ul><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3.1</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3.2</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3.3</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3.4</a></li></ul></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 4</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 5</a></li></ul></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Drop menu 3</a><ul><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 1</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 2</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 3</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 4</a></li><li><a href='http://www.jasaseoblog.com/' target='_blank'>Menu 5</a></li></ul></li></ul>

Kode diatas Bisa AMBIL DISINI

2.Keterangan tambahan nama situs saya silahkan ganti dengan link tujuan anda dan tanda menu silahkan sesuaikan dengan kebutuhan anda, jika kesulitan untuk copy paste kode di blog ini silahkan BACA DISINI caranya ,nah bagaimana?

Ok itu saja tutorial sederhana kali ini dari Blog SEO Tutorial tentang Cara Membuat Menu Drop Down Tanpa Edit HTML semoga informasi ini bermanfaat buat anda semuanya dan atas kunjungannya saya ucapkan terima kasih.