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.

41 komentar:

  1. Balasan
    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

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

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

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

    BalasHapus
  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.

    BalasHapus
  6. thanks banget infonya :)

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

    BalasHapus
  8. trims ats artikelnya... dan mohon ijin artikelnya saya manfaatkan.

    BalasHapus
  9. kalau menubar sudah jadi cara posting ngisi menubar yang kosong bagaimana

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

    badronsky.blogspot.com

    BalasHapus
  11. infonya sangat membantu saya yang masih newbi dalam membuat menu navigasi. ijin praktek

    BalasHapus
  12. Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    BalasHapus
  13. enggak mengerti saya :D
    maklum baru buat blogger

    BalasHapus
  14. nice info ny gan trimaksih gan
    izin sedot

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

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

    BalasHapus
  17. 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"

    BalasHapus
  18. contoh tampilannya gak ada ya gan,, ?
    http://puguhwidodo.blogspot.com

    BalasHapus
  19. injin copy gann......thanks.......rendydevainfo.blogspot.com/

    BalasHapus
  20. nice info gan

    www.artikelgwe.blogspot.com

    BalasHapus
  21. Infonya sangat membantu mas thank ciu

    BalasHapus
  22. Masih bingung ni..

    http://alfivsi.tk

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

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

    BalasHapus
  25. 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..

    BalasHapus
  26. mantap thanks infonya
    backlink ya gan
    http://thazbhy.blogspot.com/
    http://technogamecyber.blogspot.com/

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

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

    BalasHapus
  29. masih kurang ngerti bang ,,

    BalasHapus
  30. cari posting di menu nya bagaimana boss

    BalasHapus
  31. gan kalau mau mengatur posisinya gmna gan ?

    BalasHapus
  32. makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    BalasHapus
  33. gmna caranya nambahin klo ada post terbaru dlm salah satu menu bar td ???

    BalasHapus
  34. Makasih ilmunya...bermanfaat...

    BalasHapus
  35. gan numpang copy ya, bermanfaat sekali, makasih gan

    BalasHapus
  36. wah keren artikelnya gan
    Bermanfaat banget
    ditunggu artikel selanjutnya..

    BalasHapus