Membuat Menu Dropdown di blog tanpa edit HTML

Membuat Menu Dropdown di blog tanpa edit HTML

2:56 PM
Menu dropdown merupakan menu yang ada turunannya, biasanya digunakan blog yang mempunyai label/kategori banyak. Pada tutorial blog kali ini akan membagikan menu dropdown tanpa kita mengedit HTML cukup ke TATA LETAK saja dan tambah widget -> HTML/JavaScript

Screenshot
Langkah - langkah
  • Masuk ke TATA LETAK
  • Tambahkan widget -> HTML/JavaScript
  • Copas sintax dibawah ini
<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://svshare7.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a> <ul> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul> </li> <li><a href='http://svshare7.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a> <ul> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a> <ul> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li> </ul> </li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul> </li> <li><a href='http://svshare7.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a> <ul> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li> <li><a href='http://svshare7.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li> </ul></li></ul>
  • Simpan dan lihat blog nya
Perlu Diingattt :
Apabila blog sobat menu nya tidak bisa turun, sobat ubah di edit HTML nya, cukup cari kode :
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
ganti di maxwidgets dari 1 menjadi 3 dan di showaddelement dari no menjadi yes
Sekian, sharing mengenai Membuat Menu Dropdown di blog tanpa edit HTML. Terima Kasih
Perlu Diingattt :
Apabila di arahkan ke halaman :
- shorte.st atau adf.ly, tunggu sejenak 5 detik dan mengklik tombol skip/lewati
- ke ouo, centang anda bukan robot dan tunggu 5 detik lalu get link, kemudian otomatis ke hosting download tersebut. Apabila sobat kesulitan ada panduan cara downloadnya klik >> disini <<
PERHATIAN!!!
- Jika kamu kesulitan mengunjungi halaman adf.ly, bisa atasi dengan cara INI
- Jika ada link mati atau bermasalah, laporkan saja langsung ya ke SINI. Terima Kasih. Enjoy...

Langganan Software Gratis

About

Blog ini lahir 5 Januari 2012 yang awalnya dikelola oleh Admin tunggal, kini sudah di kelola oleh beberapa pengurus. Tujuan ngeblog hanya untuk mengisi waktu luang dan hobby, tapi saya bersyukur apabila blog ini bermanfaat bagi teman - teman. Blog ini akan terus menyajikan informasi software, Cusrom Android, Tutorial, Game yang dibagikan secara gratis.

Next
« Prev Post
Previous
Next Post »