Membuat menu navigasi untuk blog Anda

Pada kesempatan kali ini saya akan memberikan sedikit informasi yang saya ketahui tentang cara membuat menu navigasi pada blog. Menu navigasi bagus untuk memperindah blog kita saat orang lain mengunjungi jadi dapat memilih menu yang kita sediakan karena apabila blog tidak menggunakan menu navigasi pengunjung akan merasa bingung untuk melihat informasi yang lain dan kemungkinan besar pengunjung akan mencari blog lain tentang apa yang mereka cari karena di blog yang dia kunjungi hanya ada menu homenya saja jadi membuat bingung para pengunjung.

Oke langkah pertaman yang harus kalian lakukan adalah masuk blogger kalian masing-masing lalu klik rancangan kemudian edit html dan jangan lupa centang Expand Template Widgetnya.

Setelah itu anda copy paste script dibawah ini sebelum .

#NavbarMenu {
background:#8aba02;
width:828px;
height:32px;
color:#000;
font:bold 8px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0;
}

#NavbarMenuleft {
width:828px;
float:left;
margin:0 auto;
padding:0;
}

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

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

#nav li a:hover,#nav li a:active {
background:#d4e503;
color:#000;
text-decoration:none;
border-right:1px solid #296204;
border-bottom:1px solid #296204;
border-left:1px solid #296204;
margin:0 auto;
padding:12px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited {
background:#d4e503;
color:#000;
text-transform:capitalize;
float:none;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font:normal 14px Georgia, Times New Roman;
margin:0 auto;
padding:7px 10px;
}

#nav li li a:hover,#nav li li a:active {
background:#184303;
color:#000;
padding:7px 10px
}

#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 auto;
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 auto;
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 auto;
padding:0
}

*,#nav,#subnav {
margin:0 auto;
padding:0
}

Untuk warna silahkan anda ubah sendiri sesuai dengan template blog anda.

Kemudian anda masukkan script di bawah ini sebelum .

<div id="NavbarMenu">

<div id="NavbarMenuleft">

<ul id="nav">
<li>
<span style="font-size: 14px;"><a expr:="" href="data:blog.homepageUrl%20+%20%22?&max-results=5%22" title="This Blog Address">Beranda</a></span></li>
<li>
<span style="font-size: 14px;"><a href="http://www.thelastseconds.co.cc/search/label/Tips_and_Trick">Tips n Trick</a></span></li>
<li>
<span style="font-size: 14px;"><a href="http://www.thelastseconds.co.cc/search/label/News">News</a></span></li>
<li>
<span style="font-size: 14px;"><a href="http://deadbyarticle.com/list" title="Jasa Pembuatan Website">Website</a></span></li>
<li>
<span style="font-size: 14px;"><a href="http://billing.griyahosting.com/aff.php?aff=136" title="Hosting Murah">Hosting</a></span></li>
</ul>
</div>
</div>

dan sedah anda memasukkan script tadi selesai deh anda tinggal reload blog anda kemudian menu navigasi akan muncul pada blog anda.

Mudah-mudahan informasi singkat ini berguna untuk anda dan saya ucapkan selamat mencoba ya........
Sumber : Dunia Artikelmu

Membuat menu navigasi untuk blog Anda

Related Posts

No comments:

Post a Comment

Popular Posts Today