Membuat Menu Dropdown Horyzontal

Untuk menghemat tampilan dan mempermudah pencarian artikel dalam blok kita selain dari daftar isi juga seluruh artikel kita dapat dibagi atas beberapa kelompok (label), dan kita juga dapat menggunakan dropdown horyzontal menu di blog kita

Dimana menu ini akan menampilkan sub menu saat anda mengarahkan mouse ke tombol menu tersebut, untuk membuat menu ini anda tidak perlu mengupload sebuh Theme, cukup dengan menambahkan script Css pada kotak widged

Cara melakukannya :

• Login ke blogspot anda
• Kemudian klik menu Rancangan
• Dari halaman Elemen Laman, klik Tambah Gadged, dan klik pilihan gadged HTML/Java Script, kemudian copy script dibawah ini didalam gadged tersebut

 <style type="text/css">
#dsr ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 12px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 12px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#dsr li .current{color: transparant;}#dsr li a:hover, #dsr li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 12px 8px;text-decoration: none;}#dsr {width: auto;float: left;margin: 0;padding: 0;}#dsr {margin: 0;padding: 0;}#dsr ul {float: left;list-style: none;margin: 0;padding: 0;}#dsr li {list-style: none;margin: 0;padding: 0;}#dsr li a, #dsr li a:link, #dsr li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 12px 8px;font: Bold 12px Georgia, Arial;}#dsr li a:hover, #dsr li a:active {background:transparant;color: #ffffff;margin: 0;font-size:15px;padding: 9px 12px 8px;text-decoration: none;}#dsr li li a, #dsr li li a:link, #dsr li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 150px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 20px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px Arial, Arial;}#dsr li li a:hover, #dsr li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:15px;font-family:Arial;text-align: center;padding: 7px 10px;}#dsr li {float: left;padding: 0;}#dsr li ul {z-index: 9999;position: absolute;left: -999em;height: 15px;width: 170px;margin: 0;padding: 0;}#dsr li ul a {width: 140px;}#dsr li ul ul {margin: -32px 0 0 171px;}#dsr li:hover ul ul, #dsr li:hover ul ul ul, #dsr li.sfhover ul ul, #dsr  li.sfhover ul ul ul {left: -999em;}#dsr  li:hover ul, #dsr  li li:hover ul, #dsr  li li li:hover ul, #dsr  li.sfhover ul, #dsr  li li.sfhover ul, #dsr  li li li.sfhover ul {left: auto;}#dsr  li:hover, #dsr  li.sfhover {position: static;}#footer-column-divide {clear:both;}#dsr{font-family:Comic Sans Ms;background:#000 url(http://lh3.googleusercontent.com/--yFvMZBnK48/TzmfWtqrwTI/AAAAAAAAAnM/0eNsFnXHcHo/s35/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:190px;right:190px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>

<div id='dsr'>
<ul id='dsr'>
<li><a href='Link Blog anda'>Home</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href='Link Label blog anda' target='_blank'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>
</li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>
</li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target="_blank">Nama Label</a></li>
<li><a href='Link Label blog anda' target='_blank'>Nama Label</a>
<ul class='children'>
<li><a href='Link Label blog anda' target="_blank">Nama Label</a></li>
<li><a href='Link Label blog anda' target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target="_blank">Nama Label</a></li>
</ul>
</li>
<li><a href='Link Label blog anda' target='_blank'><blink>Tukar Link</blink></a></li>
</ul>
</div>

• Ganti tulisan Link label blog anda dengan Link categori artikel anda, dan ganti Nama Label anda dengan nama Categori artikel anda
•  Pada script " left:190px;right:190px;position:fixed " anda bisa ganti nilai pxnya agar menyesuaikan dengan halaman page anda.
• Setelah selesai Klik tombol Simpan, dan arahkan tata letak gadged anda pada tempat yang anda sukai