Cara Membuat Menu Navigasi Bar Pada Blogger

Desain blog yang menarik merupakan kebanggan tersendiri bagi kita dan pengunjungpun tertarik pada blog kita Menu Navisagis atau menu Horizontal, Biasanya menu navigasi terletak dibawah header. Berikut cara membuat menu Navigasi
1. Login/Masuk ke blogger.
2. Pilih Tata Letak --> Edit HTML --> centang "Expand Templte Widget".
 
3. Tapi setiap melakukan perbaikan template, sebaiknya simpan Template engan meng-klik tulisan Download Template Lengkap. Kemudian simpan di file Komputer anda, Bila terjadi kesalahan pada Template anda sudah memiliki back-up untuk mengembalikannya kembali.
4. Cari kode ]]></b:skin>  atau dengan cara tekan Ctrl+F Ketik ]]></b:skin> Copy kode dibawah ini dan Paste diatas kode ]]></b:skin>

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

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

5. Ganti kode css yang berwarna merah diatas sesuaikan dengan blog kamu.

6. Cari kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
</b:section>

7.  Letakkan kode dibawah ini tepat dibawah kode </b:section>

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://pertamamedia.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->
8. Terakhir ganti text yang berwarna merah dengan Url blog anda kemudian simpan Template
lihatlah blog anda.

59 comments:

  1. Replies
    1. Artikelnya sangat bagus dan bermanfaat.....


      **** Kunjungi juga artikel menarik dan hot dibawa ini ****

      http://super-bagus.blogspot.com

      http://forum-telanjang.blogspot.com

      http://forum-bugil.blogspot.com

      http://tantegigolo.blogspot.com

      http://seounix.blogspot.com


      Balas Hapus

      Delete
  2. thanks atas informasinya yang sangat bermanfaat dan mudah dicerna, salam kenal ya gan, follow me

    ReplyDelete
  3. thanks atas informasinya,benar-benar sangat bermanfaat ??? sukses selalu yah ??^^

    ReplyDelete
  4. kk klo cara menambah halaman pada blog gimana.....???

    ReplyDelete
  5. halaman maksimal 10 halaman,,triknya postingan di jadikan halaman kalau tujuannya untuk menambah menu.catatan setelah membuat posting baru, posting jangan di tayangkan dibuat pratinjau aja,copy linknya di masukin ke menu yang dibuat.

    ReplyDelete
  6. di blog saya tidak ada kode yg di No.6. Cari kode seperti di bawah ini. kalau tidak ada gimana?

    ReplyDelete
  7. trims ats artikelnya... dan mohon ijin artikelnya saya manfaatkan.

    ReplyDelete
  8. kalau menubar sudah jadi cara posting ngisi menubar yang kosong bagaimana

    ReplyDelete
  9. bagaiman Cara Membuat Gadget Statistik pengunjung di blog seperti anda tapi menggunakan warna biru muda

    badronsky.blogspot.com

    ReplyDelete
  10. infonya sangat membantu saya yang masih newbi dalam membuat menu navigasi. ijin praktek

    ReplyDelete
  11. Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    ReplyDelete
  12. enggak mengerti saya :D
    maklum baru buat blogger

    ReplyDelete
  13. nice info ny gan trimaksih gan
    izin sedot

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Terima Kasih infonya. Saya masih belajar
    kunjungi blog saya (andromeda-id.blogspot.com_

    ReplyDelete
  16. makasih infonya gan .....kalo buat blog kita cantik tampilannya gimana gan.....nih bolg wa gan..gimana ya cara mempercantiknya...bingung nih....."rafirempak-david.blogspot.com"

    ReplyDelete
  17. contoh tampilannya gak ada ya gan,, ?
    http://puguhwidodo.blogspot.com

    ReplyDelete
  18. injin copy gann......thanks.......rendydevainfo.blogspot.com/

    ReplyDelete
  19. nice info gan

    www.artikelgwe.blogspot.com

    ReplyDelete
  20. Infonya sangat membantu mas thank ciu

    ReplyDelete
  21. Masih bingung ni..

    http://alfivsi.tk

    ReplyDelete
  22. makasih infonya gan, jangan lupa kunjung balik ya :)
    "biologi-12.blogspot.com"

    ReplyDelete
  23. gan, mau nanya nih kalau udah bikin menu bar terus mau ngehubungin dari menu ke postingan gimana caranya? makasih

    ReplyDelete
  24. Tnggl penrapn aja nh..
    Mga brhasil..
    Trmaksh dtnggu kunbalnya buat rekan2 blogger
    di
    chemicals-sandi.blogspot.com
    tolng berkn komentr2 anda untk kemajuan blog saya
    terimakasih..

    ReplyDelete
  25. mantap thanks infonya
    backlink ya gan
    http://thazbhy.blogspot.com/
    http://technogamecyber.blogspot.com/

    ReplyDelete
  26. kren banget sob, terimakasih ilmunya ya ini blog saya yang mau saya ganti http://www.sepatuimportmurah.com/

    ReplyDelete
  27. kok cuma bisa 5 tombol navigasi aja sih, kalo di tambah yang belakang ilang. gimana cara nambah menu navigasinya kak???

    ReplyDelete
  28. masih kurang ngerti bang ,,

    ReplyDelete
  29. cari posting di menu nya bagaimana boss

    ReplyDelete
  30. gan kalau mau mengatur posisinya gmna gan ?

    ReplyDelete
  31. makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    ReplyDelete
  32. gmna caranya nambahin klo ada post terbaru dlm salah satu menu bar td ???

    ReplyDelete
  33. gan numpang copy ya, bermanfaat sekali, makasih gan

    ReplyDelete
  34. wah keren artikelnya gan
    Bermanfaat banget
    ditunggu artikel selanjutnya..

    ReplyDelete
  35. pcgamebamboo.blogspot.com Mancay brooh

    ReplyDelete
  36. tengs info nya gan, silhkan kunjungi blog saya http://fauzanpostal.blogspot.com/

    ReplyDelete
  37. mantep buanget en bermanffat nih artikel,, jangan lupa mampir ya ke http://fadisa-indoinfo.blogspot.com

    ReplyDelete
  38. mantep gan makasih infonya kunjungi juga gan www.manworo.blogspot.com
    www.infocentang.blogspot.com

    ReplyDelete
  39. Terima kasih Bang, izin menerapkan... hehe

    Berbagi Informasi Lowongan Kerja Terbaru ni :
    http://expocpnsbumn.blogspot.com

    ReplyDelete
  40. http://indoanime12.blogspot.com/ sring sring main di blog aq

    ReplyDelete
  41. terimakasih banyak sob, sangat membantu sekali tutorialnya...

    http://landongobatherbal.com/obat-herbal-aterosklerosis/

    ReplyDelete
  42. terimakasih artikel nya bermanfaat ..

    www.jago-komputer.com

    ReplyDelete
  43. terimakasih artikel nya bermanfaat ..

    www.jago-komputer.com

    ReplyDelete
  44. masih bingung gan hehe...

    jurnalkesehatanku.blogspot.com

    ReplyDelete
  45. makasih mas kunjungi yaa http://hasanulinnuha.blogspot.com/

    ReplyDelete
  46. wah makasih gan....
    gan ada info nih..misalnya nih kalian download atau pakai template download yang navigasi lamat seperti aboutnya atau sub menu,kalian copy aja baut nav contohnya ada di blogku baru keikiran akucara ini

    khalifahotel.blogspot.com

    ReplyDelete
  47. Artikel Agan Sangat bagus
    Trims atas infonya gan
    kunjungi juga blog saya
    pcinfogratis.blogspot.co.id

    ReplyDelete