Cara membuat Tab Menu Drop Down

1. Login ke account blogger Anda

2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget

Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget

Sebelum kita muali untuk menambah kode tab menu dropdown ini saya sangat menganjurkan kepada Anda untuk mendownload lengkap template Anda dulu. Hal ini dilakukan untuk membeckup template lama dan berjaga-jaga jika nanti terjadi kesalahan. Untuk dasbor blogger baru tombol untuk mendownload template ada pada opsi Cadangkan/Pulihkan yang berada pada kiri atas dasbor blog Anda. Jika sudah saya Akan melanjutkan tutorial berikutnya.

3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)

4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>

/* Menu Live ----------------------------------------------- */ #Live ul, li{ padding: 0px; margin: 0px; } #Live ul.dropmenu{ position: relative; margin: 0px; padding: 1px 0px 0px 0px; background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0; display:block; height: 35px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; } #Live .dropmenu li{ position: relative; list-style: none; float: left; margin: 0px; padding: 0px; } #Live .dropmenu li a{ height: 22px; padding: 9px 30px 0px 15px; display: block; cursor: point; border-right: solid 1px #4a779d; color: #FFFFFF; text-transform: uppercase; text-decoration: none; } #Live .dropmenu li span{ display: block; float: right; height: 10px; width: 10px; background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0; position: absolute; top: 12px; right: 10px; } #Live .dropmenu li a:hover span{ background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0; } #Live .dropmenu li:hover ul, .dropmenu li:hover div{ display: block; } #Live .dropmenu ul{ position: absolute; display: none; width: 140px; padding: 0px; margin: 0px; border-bottom: 1px solid #ccc; background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0; } #Live .dropmenu ul li{ border: 0; float: none; } #Live .dropmenu ul a { border: 1px solid #ccc; border-bottom: 0; white-space: nowrap; display:block; color: #0657AD; text-transform: none; } .dropmenu a.selected, .dropmenu a:hover{ color: #0657AD !important; background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0; } #Live a.selected span{ background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0; } #Live .dropmenu ul a:hover { color:#F67A00 !important; text-decoration: none; background-color: #F0F0F0; background-image: none; } #Live .dropmenu div ul{ position: relative; display: block; } #Live .dropmenu li div{ background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; } #Live .dropmenu li div ul{ border: none; background: none; position: relative !important; } #Live .dropmenu li div a{ border: none; border-bottom: 1px solid #ccc; } #Live .dropmenu li div div{ display: block; position: relative; background: none; border: none; } #Live .dropmenu li div div a{ display: inline; border: none; color: #0657AD; padding: 0px; margin: 0px; text-transform: none; /* text-decoration: underline; */ } #Live .dropmenu li div div a:hover{ color: #F67A00; text-decoration: none; border-bottom: 1px dashed #000; } #Live ul.left{ float: left; width: 145px; } #Live ul.right{ float: right; width: 145px; } #Live .small{ color: #666; font-size: 11px; padding: 10px 5px 8px 5px !important; display: block; clear: both; } #Live .products{ width: 300px; padding: 15px !important; } #Live .products ul{ width: 100%; } #Live .products ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } #Live .products h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } #Live .products p{ color: #666; font-size: 10px; padding: 0px; margin: 0px; } #Live .products img{ float: left; padding-right: 10px; } #Live .products ul li a{ display: inline; border: none; color: #666; padding: 0px; margin: 0px; text-transform: none; /* text-decoration: underline; */ } #Live .products ul li a:hover{ color: #000 !important; text-decoration: none; background: none !important; border-bottom: 1px dashed #000; } #Live .tutorials{ width: 300px; } #Live .profile{ width: 300px; padding: 15px !important; } #Live .profile ul{ width: 100%; } #Live .profile ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } #Live .profile h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } #Live .profile p{ color: #666; font-size: 10px; padding: 0px; margin-left: 120px; } #Live .profile img{ float: left; padding-right: 10px; border: 1px solid rgb(226, 226, 226); width: 100px; height: 100px; padding: 5px; margin-top: 17px; margin-right: 10px; } #Live .profile a:hover { background:none; } #Live .login{ padding: 15px !important; width: 180px; } #Live input{ border:1px solid #4A779D; padding: 3px 8px; margin-bottom: 8px; width: 164px; } #Live label{ padding: 0px 0px 4px 0px; display:block; } #Live button{ background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0; color: #FFF; border:1px solid #4A779D; padding: 4px 10px; width: 180px; }

5. Kemudian Anda lanjutkan dengan mencari kode </head> jika sudah dapat, masukkan kode berikut ini tepat diatasnya

<!-- Live Menu by Super-Bee -->
<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>

6. Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> namun ada beberapa template yang memiliki struktur kode yang berbeda seperti template blogger standar pada demo, saya meletakkan kode berikut ini dibawah tag penutup </header> (masing-masing template berbeda).

<div id='Live'>
<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li>
<a href='#item3'>Downloads</a>
<ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li>
<a href='#'>Services</a>
<div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png' width='40'/><h2>Design Template</h2><p><a href='#'>Desig Template Blogger</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png' width='40'/><h2>Gallery Blogger</h2><p><a href='#'>View and Download Template</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png' width='40'/><h2>Blogger Help</h2><p><a href='#'>Can Help Blog Problem</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png' width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>
</ul>
<div class='small'><a href="http://www.5-cm.blogspot.com/"> Panduan dan Cara Membuat Blog</a></div>
</div>
</li>
<li>
<a href='#'>Tutorials</a>
<div class='tutorials'>
<ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href='#'>Links</a>
<ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
</ul>
</div>

Perhatikan tanda pagar yang saya beri warna merah pada kode diatas, tanda pagar tesrsebut dapat Anda ganti dengan url/link yang Ada pada blog Anda dan sesuaikan juga textnya dengan yang anda inginkan.

7. Klik pratinjau untuk melihat hasil sementara, jika tidak mengalami masalah, kemudian save dan lihat hasilnya.