Link-Link Blog

Senin, 23 Juli 2012

Pasang Menu Navigasi Keren Bercabang


Trik Pasang Menu Navigasi Bercabang

Trisatya 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 ---> Tata letak ---> 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
Artikel Unik dan menarik lainnya :



SEO


TUTORIAL BLOG


WIDGET


 TOOL BLOG

ARTIKEL LAINNYA :


TRIK WINDOWS============================


DESIGN========================================

INTERNET==================================

SECURITY======================================



EARN $==================================






Posted by at
Labels: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)