Ozan Blog: Januari 2012
Welcome In Here Yeah!
Follow @ozanfauzaan ,mention please for followback ,sorry if not update this blog

Senin, 02 Januari 2012

Cara Membuat Menu Bar Pada Blog


   Halo bertemu lagi dengan gua, ohiya sebelumnya HAPPY NEW YEAR 2012 cowok, cewek, maho, lekong, banci, waria, dan semuanya. maafin ya kalo ada salah salah di tahun 2011 lalu. lanjut ke inti, nih gua mau berbagi ilmu yang pastinya sama elu elu semua. gua mau berbagi cara membuat menu bar pada blog. nih dia cara caranya:
1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. cari kode ]]></b:skin>
5. Copy kode di bawah ini dan pastekan di atas kode  ]]></b:skin>
 
#NavbarMenu
{
background:#000000;
width:900px;
height:35px;
color:#33FF00;
font:bold 10px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{

width:955px;
float:left;
margin:0;
padding:0
}

#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}

#nav li a,#nav li a:link,#nav li a:visited
{
color:#33FF00;
display:block;
text-transform:capitalize;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}

#nav li a:hover,#nav li a:active
{
background:#ABABAB;
color:#000000;
margin:0;
padding:11px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#000000;
width:200px;
color:#FFCC00;
text-transform:capitalize;
float:none;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:7px 7px
}

#nav li li a:hover,#nav li li a:active
{
background:#ADADAD;
color:#fff;
padding:7px 7px
}

#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}

#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}

#nav li ul a
{
width:140px
}

#nav li ul ul
{
margin:-75px 0 0 171px
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
left:-999em
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
left:auto
}

#nav li:hover,#nav li.sfhover
{
position:static
}

#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}

#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}

#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}

#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}

*,#nav,#subnav
{
margin:0;
padding:0
}
 
6. Selanjutnya, Cari kode
<b:section class='header'id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ozan Blog (Header)' type='Header'/>
</b:section>
 </div>

Agar tidak kebinggungan, cari saja tulisan <b:section class='header'
7. Copy kode di bawah ini dan pastekan di bawah kode no 6
 
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='Ozan Blog'>Home</a></li>
<li><a href='http://www.blogger.com/profile/12532829146849005925'>My Profil</a></li>
<li><a href='https://twitter.com/oznfzn'>My Twitter</a></li>
<li><a href='http://www.facebook.com/profile.php?id=100000137141334'>My Facebook</a></li>
<li><a href='http://heello.com/oznfzn'>My Heello</a></li>
<li><a href='http://ozanallinfo.blogspot.com/2011/11/is-all-about-delapan-empat.html'>Delapan Empat</a></li>
</ul>
</div>
</div>
    </div>
    </div>

8. Simpan dan selesai

KET :
-Agar mudah mencari ]]></b:skin> dan <b:section class='header' lu semua bisa mencarinya dengan CTRL +F
-Ganti tulisan yang berwarna merah dengan link yang ingin lu masukin
-Ganti juga tulisan yang berwarna biru dengan judul label nya
   
         Nah gimana? semoga bermanfaat untuk lu semua. karena NEW YEAR 2012 gua izinin buat copas sama dipaste. tapi jangan lupa menyertakan sumbernya http://www.ozanallinfo.blogspot.com . Sekian terima kasih.


»» READMORE...