Cara Membuat Menu Bar Drop Down Di Blog

Di atas permintaan ramai (ramailah konon..) Berikut adalah cara menbuat menu bar drop down yang mudah seperti contoh bergambar di bawah :

Sila perhatikan pada gambar di ruangan Blog Links, apabila anda halakan pointer mouse di menu tersebut secara automatik drop down akan keluar, seperti contoh tersebut saya letakkan nama-nama links sebagai "coming soon" sebab belum ada lagi links yang saya ingin masukkan di situ.

Cara Membuat Menu Bar Drop Down adalah seperti berikut: Masuk ke ruangan Template > Edit HTML > Proceed kemudian Expand Widget Templates.
Lepas tu cari kod ni dengan menekan (crtl + F serentak): ]]></b:skin>

Bila dan jumpa sila paste kan kod di bawah ini betul-betul di atas ko di atas kod ]]</b:skin>
Kod css nya seperti berikut :

 <!-- Menu Bar css silenceblogz.blogspot.com Start-->
.menuku{height:41px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDrsPfL1xqPbeN3Th06rorZUfyGSYW7PoP5_LFlNHVmihrAA_eqzqRsufflIIYT55XspTL-nzl-BiM4K1dOm8n7KXEK7GHub7vhdJSNQJFwZn5VTuKSZSIDNlq-PRqFBXUswsxuvJV2A/s1600/menuwrapper.png) repeat-x top;font:normal 12px Arial;line-height:normal;width:960px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0;padding:0;border-bottom: 3px solid #356aa1}
.menuku ul{margin:0;padding:0}
.menuku li{list-style:none;color:#FFF;float:left;display:inline;position:relative;margin:0;padding:0}
.menuku li a{display:block;background:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt8Pk-Eed_b3O9rSlVydPx-3H25MjbkiffNaPKOaqjWQeC0l43db0N595NryyD9w9SB47mPvPd0MrOt4nkMsejO7GDRB7DGxP2eutWf8ugAfIoM-qDmQMX2WJd79vaBaiOtfPFXt6PtXU/s1600/menuku+batas.png) no-repeat center right;color:#FFF;text-decoration:none;font:bold 14px Arial;text-shadow: -1px -1px 0 #254b71;outline:none;margin:0;padding:12px 13px}
.menuku li a:hover{background:#2a2a2a;text-shadow: -1px -1px 0 #000}
.menuku li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0}
.menuku li ul a{background:#2a2a2a;border-left:none;font:12px Arial;border-right:none;border-top:1px solid #484848;border-bottom:1px solid #000;display:block;padding:6px 10px;text-shadow: -1px -1px 0 #000}
.menuku li ul a:hover{background:#484848;}
.menuku li ul li{float:none;display:block;width:auto}
.menuku li ul ul{top:0;left:100%}
.menuku li a:hover,.menuku ul li a:hover{color:#ccc}
<!-- Menu Bar css silenceblogz.blogspot.com End-->

Kemudian cari kod ni pula dengan menekan (crtl + F serentak): </body>
Bila dah jumpa kod sila gantikan (replace) dengan kod ini:

<script type="text/javascript">
$(function() {
    $(&#39;.menuku li&#39;).hover(function() {
        $(this).children(&#39;ul&#39;).filter(&#39;:not(:animated)&#39;).show(200);
    }, function() {
        $(this).children(&#39;ul&#39;).hide(400);
    });
});
</script>
</body>

Kemudian save.. kalau tiada error dan pergi ke Layout lakukan langkah yang biasa iaitu Add a Gadget > HTML/Javascript kemudian pastekan kod ini menggunakan HTML (bukan compose). Kodnya seperti di bawah:

<div class="menuku">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Lain-Lain Link </a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2.1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 3</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 4</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 5</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/" target="_blank">Dashboard</a></li>
</ul>
</div>

Link-link tersebut anda edit masukkan link-link anda sendiri dan mesti bermula dengan http:// . Untuk Contoh menu bar drop down berdasarkan kod di atas ianya akan lelihatan seperti di bawah:

• Home
• Menu 1
  • Link 1
  • Link 2
  • Lain-Lain Link
    • Link 2.1
    • Link 2.2
• Menu 2
  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5
• Dashboard

Nampak tak? cuba mouse pointer anda halakan di di Menu 1 atau Menu 2. Secara automatik dia akan drop down link-link yang berada di Menu 1 dan di Menu 2.

Anda masih boleh mengubah warna Menu bar drop down ini dengan menggunkan image background anda sendiri. apa yang perlu anda tukar seperti link image yang berwarna merah di atas. Jika terdapat kemusykilan sila tinggalkan pertanyaan anda di ruangan komen. Selamat mencuba!.

css html tutorial tutorial blog 9/30/2012 10:44:00 pm