Cara menambahkan Menu Navbar pada Blog

Cara menambahkan Menu Navbar pada Blog - Menu Navbar singkatan dari menu navigation bar. fungsinya yaitu memberikan sajian kategori penting dalam blog. Blog yang tidak memiliki menu navigasi sepertinya terasa kosong dan hampa. bagaimana mungkin, para pengunjung yang datang biasanya tinggal memilih menu yang ingin diingainkan. jika tanpa menu, pengunjung tersebut pun akan susah mencari artikel yang menarik. jika menu sudah ada, maka dengan mudahnya untuk memilih. diibaratkan menu itu sebuah menu makanan di restoran, jika
menunya sudah tersaji, maka tinggal pilih saja yang diinginkan. dan sebaliknya, jika tanpa adanya menu yang tersaji, maka pengunjung kebingungan mencari sajian yang diinginkan. oleh karena itu berikut adalah Cara menambahkan Menu Bar pada Blog :

1.login

2.Rancangan

3.Edit HTML

4.cari kode ]]></b:skin>

5.Letakkan kode berikut di atas kode no 4

#NavbarMenu{background:#333; width:880px; height:35px; color:#FFF; font:normal 8px 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:#fff; 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:#333; color:#FFF; text-decoration:none; border-right:1px solid #296204; border-bottom:1px solid #296204; border-left:1px solid #296204; margin:0; padding:12px 9px 8px}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#333; width:200px; color:#fff; 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; padding:7px 10px}
#nav li li a:hover, #nav li li a:active{background:#333; color:#fff; 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; 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:#333; 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.Cari kode <div id='NavbarMenu'>

7.Letakkan kode berikut di bawah kode no 6

<div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Islam' title='Islam'>Islam</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Internet' title='Internet'>Internet</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Kesehatan' title='Kesehatan'>Kesehatan</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Edukasi' title='Edukasi'>Edukasi</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Budaya' title='Budaya'>Budaya</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Sains' title='Sains'>Sains</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Teknologi' title='Teknologi'>Teknologi</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Olahraga' title='Olahraga'>Olahraga</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Psikologi' title='Psikologi'>Psikologi</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Otomotif' title='Otomotif'>Otomotif</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Properti' title='Properti'>Properti</a></li> <li><a href='http://sekedarwawasan.blogspot.com/search/label/Unik' title='Unik'>Unik</a></li> </ul></div> </div>

5.Edit alamat url sesuai alamat url blog sendiri.

6.Pratinjau

7.Setelah di pratinjau jika Berhasil langsung Simpan.

Maaf jika kodenya agak ribet karena hasil dari kompres, namun jika dicoba bukan masalah. Demikan Cara menambahkan Menu Navbar pada Blog, semoga bermanfaat.

Cara menambahkan Menu Navbar pada Blog ditulis Oleh Sekedar Wawasan pada 2012-03-03T12:34:00+07:00 dengan rating 4 oleh 95 voters on Sekedar Wawasan.

Tweet

Artikel terkait :