Cara Membuat Menu Dropdown Keren Untuk Blog

navbar menu ini sangat penting sekali untuk di pasang di blog kita , agar memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi pinti masuk googlebot dalam menelusuri link yang ada di dalam blog. pada kesempatan kali ini saya akan membagikan tips Cara membuat menu dropdown yang gambarnya saya ambil dari blognya artikel komputerku. jadi nya nanti akan seperti gambar di bawah ini :

1. login ke blogger 

2. pilih rancangan - edit html

3. backup dulu template anda dan centang expand template widget

4.  kemudian cari kode ]]></b:skin>

5. letakan kode dibawah ini , tepat di atas kode ]]></b:skin> tadi

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

 catatan : silahkan ukuranya sesuaikan sendiri dengan template anda 

6. kemudian simpan template anda , dan segera menuju elemen laman

7. pada elemen baru dibawah header klik tambah gadget, kemudian pilih gadgetjavascript .

catatan : apabila anda belum memiliki elemen baru dibawah header ,

sliahkan klik Cara memasang element baru di bawah header

8. lalu copykan script dibawah ini kedalam javascript tadi

<div id="container">
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" >Notebook</a></li>
<li><a href="#" >Modem<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">GSM Modem</a></li>
<li><a href="#">CDMA Modem</a></li>
</ul>
</li>
<li><a href="#">Desktop PC</a></li>
<li><a href="#">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#">VGA Card</a></li>
<li><a href="#">Sound card</a></li>
<li><a href="#">TV Tuners</a></li>
<li><a href="#">Modem</a></li>
<li><a href="#">Mainboard</a></li>
<li><a href="#">Firewire</a></li>
<li><a href="#">Hardisk</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Amazon</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#"> Computer Articles<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">My Computer Dummies</a></li>
<li><a href="#">Dummy Blog</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

catatan : ganti icon # dengan link tujuan anda sendiri 

9. kemudian simpan , dan lihat hasil nya ^_^

Loading