Mohon Maaf Atas Segala Kekurangan Blog ini. Blog Dalam Tahap Pembangunan kembali 11-03-2011
Posted by : Rahmat E. Tuesday, March 22, 2011


Cara membuat Menu Navigasi bercabang di Blog

Menu Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi untuk menghubungkan link satu dengan link lainnya, biasanya diletakan dibawah atau diatas header, seperti contoh berikut :

untuk membuatnya sebagai berikut :
1. Login ke dasbor —> tata letak —>  edit HTML (centang : expand template widget)
2. Cari kode berikut :
]]></b:skin>
3. Kopy paste kode dibawah ini diatas kode tadi :
   /* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}
4. Simpan lalu masuk ke —&gt; Tata letak —&gt; klik  tambah gaddget  yang ada dibawah header blog.
Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :
<div id=”menu”>
<ul>
<li><a class=”active” href=”/”> Home</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu 2.1</a></li>
<li><a href=”#”>Menu 2.2</a></li>
</ul></li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Menu 3.1</a></li>
<li><a href=”#”>Menu 3.2</a></li>
<li><a href=”#”>Menu 3.3</a></li>
<li><a href=”#”>Menu 3.4</a></li>
</ul></li>
<li><a href=”#”>Menu 4</a></li>
<ul>
</ul>
</ul></div>
Lalu Simpan, tanpa diberi judul diatasnya.
catatan untuk kode “#” isi dengan alamat url target anda (lihat gamabar paling bawah), tanda petiknya jangan di hilangkan dan tulisan Menu,  menu 1, menu 2 dst silahkan isi sesuai kehendak.  misalnya :
a. untuk yang tunggal (Tulisan ‘Menu1″ saja)
<li><a href=”#”>Menu1 </a></li> dirubah kodenya, menjadi :
<li><a href=”http.www.mapasanda.co.cc/2010/01/tentang-saya.html”>Tentang Saya</a></li>
b. untuk yang bercabang (tulisan “menu2, menu3 dst)
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu 2.1</a></li>
<li><a href=”#”>Menu 2.2</a></li>
</ul></li>
 dirubah kodenya menjadi :
<li><a href=”http.www.mapasanda.co.cc/”>Tutorial</a>
<ul>
<li><a href=”http.www.mapasanda.co.cc/2010/05/tutorial-blog”>Tutorial Blog</a></li>
<li><a href=”http.www.mapasanda.co.cc/2010/10/tutorial-komputer”>Tutorial Komputer</a></li>
</ul></li>dan seterusnya lalu simpan
untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :
semoga bermanfaat

Related Post:

Leave a Reply

Silahkan Komentarnya,satu kata sangat berharga bagi saya.

Subscribe to Posts | Subscribe to Comments

Translate

Followers

Facebook Followers

Berlangganan

Enter your email address:

Delivered by FeedBurner

My Community

Komunitas Blogger Indonesia
Powered by Blogger.

- Copyright © EvendieBlogger'z -Metrominimalist- Powered by Blogger - Designed by Rahmad Evendie -