Memasang Menu Page Full Down Di Blog

Tips dan trik kali ini adalah memasang menu Page Full Down Di Blog seperti yang ada di blog saya ini, nah perhatikan deretan tulisan warna biru, nah itu dia !!!

Gampang cara masangnya kok, nih ...


pertama : Cari kode </head>

Lalu copy code dibawah ini dan taruh diatas code </head>


<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #FF0000;width:100%; border:solid 1px #808080;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: #FF0000;
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 #808080; border-left:solid 1px #808080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #FF0000;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: #FF0000; width:1px}
.pd_menu_01 ul li:hover a {background-color:#800000; 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 #808080; border-bottom: solid 1px #808080; background-color:#400000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#804040; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#800000; 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:#400000; 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 #808080; border-bottom: solid 1px #808080; background-color:#400000; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#804040; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Lalu ini code widgetnya yang bisa kamu rubah dan edit sesuka hatimu deh... :

<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>

<ul><li><a href="#">About me</a>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" class="lastone">edit</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" class="lastone">edit</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" >edit</a></li>
</ul>
</li></ul>

</div>

Kalau ada masalah silahkan konsultasi deh ..Insya Allah akan saya bantu, tapi bersabar ya...jangan lupa copaskan link yang akan kamu masukkan kedalam menu tersebut, agar saya bisa mengeditnya langsung dan menjadikannya di postingan nanti, okeh ...