Latest News
Sunday, September 30, 2012

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(http://3.bp.blogspot.com/-d-aYQ9Wn-bg/UDj-R3vNmeI/AAAAAAAAIhw/dC5tXMDtp-8/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(http://2.bp.blogspot.com/-h_vz_AuEcQg/UDj-795v5fI/AAAAAAAAIh4/f4AiOVMtOm4/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:
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!.

INCOMING SEARCH TERM :

Cara Membuat Menu Bar Drop Down Di Blog, cara buat menu bar, menu bar, html menu bar, css menu bar drop down
  • Blogger Comments
  • Facebook Comments

11 comments:

  1. nah potia untuk potia

    untuk kamu http://paripariputih.blogspot.com/2012/09/jangan-abaikan-entri-aku-ini-baca-la.html

    ReplyDelete
  2. saya punya yg second tu x boleh la...kenapa ekk??mcm error je..apa silap??

    ReplyDelete
  3. Masa mula2 berblogging dulu aida pernah try buat menubar nie.. dua hari jugak buat tak menjadi. last2 give up sebab time tu tak pandai sangat coding2 nie..haha. tuto amy step by step mudah nak faham.. good jobs amy :)

    ReplyDelete
  4. aku buat nanti2 la keje tgh byk ni kang poning den kang

    ReplyDelete
  5. bertuah bagi blogger yg guna blogspot kalu jumpa blog ni, penuh sesak dengan info terbaik.

    banyak rahsia yg korang boleh dapat, tapi bagi yang WP @ self hosting tak boleh nak komen, tolong beri laluan...

    ReplyDelete
  6. Dah try tapi kuar menu tab jer,xde dropdown menu,,asal eh?

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. Ι гeаllу like loоκіng through an aгticle thаt саn make men
    and women thіnk. Alѕo, thanκs for permitting mе to сomment!


    Αlso νіѕіt my sitе ... SEO Wordpress Plugin

    ReplyDelete
  9. ]] xjumpa pun kode nie??

    ReplyDelete

Sebarang Komen yang tidak berkaitan dengan artikel / SPAM akan Di PADAM. Terima Kasih.

Item Reviewed: Cara Membuat Menu Bar Drop Down Di Blog Rating: 5 Reviewed By: potia casadelarossa