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.

60 comments:

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

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

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

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

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

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

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

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

    badronsky.blogspot.com

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

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

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

    ReplyDelete
  12. nice info ny gan trimaksih gan
    izin sedot

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

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

    ReplyDelete
  15. 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
  16. contoh tampilannya gak ada ya gan,, ?
    http://puguhwidodo.blogspot.com

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

    ReplyDelete
  18. nice info gan

    www.artikelgwe.blogspot.com

    ReplyDelete
  19. Infonya sangat membantu mas thank ciu

    ReplyDelete
  20. Masih bingung ni..

    http://alfivsi.tk

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

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

    ReplyDelete
  23. 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
  24. kren banget sob, terimakasih ilmunya ya ini blog saya yang mau saya ganti http://www.sepatuimportmurah.com/

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

    ReplyDelete
  26. cari posting di menu nya bagaimana boss

    ReplyDelete
  27. gan kalau mau mengatur posisinya gmna gan ?

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

    ReplyDelete
  29. Makasih ilmunya...bermanfaat...

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

    ReplyDelete
  31. pcgamebamboo.blogspot.com Mancay brooh

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

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

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

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

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

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

    ReplyDelete
  37. terimakasih artikel nya bermanfaat ..

    www.jago-komputer.com

    ReplyDelete
  38. terimakasih artikel nya bermanfaat ..

    www.jago-komputer.com

    ReplyDelete
  39. masih bingung gan hehe...

    jurnalkesehatanku.blogspot.com

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

    ReplyDelete
  41. 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
  42. Artikel Agan Sangat bagus
    Trims atas infonya gan
    kunjungi juga blog saya
    pcinfogratis.blogspot.co.id

    ReplyDelete
  43. Makasih atas artikel yang nice.
    jendeladunianeo.blogspot.co.id
    matadunia21.blogspot.co.id

    ReplyDelete
  44. Makasih atas artikel yang nice.
    jendeladunianeo.blogspot.co.id
    matadunia21.blogspot.co.id

    ReplyDelete
  45. kunjungan balik gan yang mau rambutnya lurus https://abangjarothz.blogspot.co.id/2013/03/cara-meluruskan-rambut.html

    ReplyDelete
  46. Soorry nih aku pemula rada bolot mas, ktk klik 'edit HTML' dan keluar program, klik cntrl-F keluar ujung atas kanan bar kosong. Mslh ktk diketik ]]> keluar bunyi 'cling' ga mau nyari bmn ya mas??? Pusing pemula3...

    ReplyDelete
  47. thx mas infonya, ditunggu kunjungannya di www.haurgaluh.com

    ReplyDelete