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.

40 komentar:

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

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

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

    BalasHapus
  4. 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
  5. thanks banget infonya :)

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

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

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

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

    badronsky.blogspot.com

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

    BalasHapus
  11. Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

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

    BalasHapus
  13. nice info ny gan trimaksih gan
    izin sedot

    BalasHapus
  14. Komentar ini telah dihapus oleh penulis.

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

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

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

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

    BalasHapus
  19. nice info gan

    www.artikelgwe.blogspot.com

    BalasHapus
  20. Infonya sangat membantu mas thank ciu

    BalasHapus
  21. Masih bingung ni..

    http://alfivsi.tk

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

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

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

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

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

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

    BalasHapus
  28. masih kurang ngerti bang ,,

    BalasHapus
  29. cari posting di menu nya bagaimana boss

    BalasHapus
  30. gan kalau mau mengatur posisinya gmna gan ?

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

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

    BalasHapus
  33. Makasih ilmunya...bermanfaat...

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

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

    BalasHapus