Follow by Email

Powered by Blogger.

Tuesday, March 30, 2010

Membuat Menu Horizontal Dropdown




Menu Horizontal merupakan komponen yang sangat penting dalam blogging , agar pengunjung di blog kita bisa nyaman dalam memilih kategori yang ada . apalagi jika menu itu dilengkapi dengan dropdown . menarik bukan ? mari kita bahas cara membuatnya



1. Pertama , Log In ke Blogger Sobat .

2. Masuk Menu Tata Letak >> EDIT HTML

3. Jangan Lupa centang "EXPLAND WIDGET TEMPLATE" agar semua kode dalam template kita keluar .

4. Kemudian , Cari Kode



** JIKA SUSAH MENCARINYA , TEKAN CTRL + F . LALU , TULIS KODE YANG INGIN KITA CARI

5. Pastekan kode di bawah ini di atas kode tadi .

<style media="screen" type="text/css">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/


6. Klik SIMPAN TEMPLATE

7. Lalu , kita pergi ke ELEMEN HALAMAN

8. Klik ADD GADGET >> JAVA SCRIPT

Copy kode di bawah ini dan pastekan di java script tadi

<div class='widget-content'>
<div class="pd_menu_01 ">
<ul><li><a href="#">BLOGGER</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Trik%20Blogging" class="lastone">TRIK BLOGGER</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Blogger%20Template" class="lastone">TEMPLATE BLOGGER</a></li>
</ul>
</li></ul>

<ul><li><a href="#">WORDPRESS</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Trik%20Wordpress" class="lastone">TRIK WORDPRESS</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Wordpress%20Template" class="lastone">WORDPRESS TEMPLATE</a></li>
</ul>
</li></ul>

<ul><li><a href="#">DOWNLOAD</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Software">SOFTWARE</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Game%20Flash">GAME FLASH</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Anti%20Virus">ANTI VIRUS</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Film">FILM</a></li>
</ul>
</li></ul>

<ul><li><a href="#">KOMPUTER</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Komputer" class="lastone">TRIK KOMPUTER</a></li>
</ul>
</li></ul>

<ul><li><a href="#">SEPAK BOLA</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Inggris">LIGA INGGRIS</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Italia">LIGA ITALIA</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Jerman">LIGA JERMAN</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Perancis">LIGA PERANCIS</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Spanyol">LIGA SPANYOL</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Belanda">LIGA BELANDA</a></li>
</ul>
</li></ul>

<ul><li><a href="#">BOLA DUNIA</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Piala%20Dunia%20FIFA" class="lastone">PIALA DUNIA 2010</a></li>
<li><a href="http://fattah-blog.blogspot.com/search/label/Liga%20Champions" class="lastone">LIGA CHAMPIONS</a></li>
</ul>
</li></ul>
<ul><li><a href="#">FACEBOOK</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/search/label/Trik%20Facebook" class="lastone">TRIK FACEBOOK</a></li>
</ul>
</li></ul>

<ul><li><a href="#">PASANG IKLAN</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/2010/02/pasang-banner-gratis.html?showComment=1266674480689">BANNER (GRATIS)</a></li>
</ul>
</li></ul>
<ul><li><a href="#">TELEVISI ONLINE</a>
<ul>
<li><a href="http://fattah-blog.blogspot.com/2009/11/powered-by-www.html">ANTV</a></li>
</ul>
</li></ul>
</div>
</div>


* Silahkan edit link nya sesuai yang ada di blog kalian

oke, selamat mencoba !!


4 comments:

  1. kapan kapan ajari seng lebih detail
    neng sekolah ae ok

    ReplyDelete
  2. wah mantep gan, perlu nech untuk di coba..

    ReplyDelete
  3. @ oshama : iyo .... sak karepp ..
    @ rasta : iya sob , makasi uda berkunjung

    ReplyDelete

Sampaikan pendapat, pertanyaan, atau kritik anda!