Membuat menu dropdown menggunakan css script (menu navigasi horisontal)

Menu navigasi yang terpasang diblog dimaksudkan untuk memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi pinti masuk robot search engine dalam menelusuri link yang ada di dalam blog.

Tampilan menu navigasi bisa dilihat pada gambar di bawah ini

Untuk membuatnya login ke akun blogger



1. Pilih Dashboard - Tataletak - Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

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; }

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

6. Pilih gadget html/javascript

masukkan script berikut :

<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:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.

Contoh blog yang memakai menu horisontal bisa dilihat disini menu horisontal

Categories: Trik Blogger