Cara Membuat Navigasi Bar di Blog



Navigation Menu atau Menu Navigasi ini adalah sebuah tab yang berisikan link atau bahasa kerennya Shortcut ini berfungsi sebagai penunjuk arah tentang halaman-halaman mandiri yang ada di blog sobat untuk dipromosikan. Sebaiknya isi dari halaman yang ditunjukan di navigasi bar harus sesuai dengan judul tab navigasi barnya. Biasanya navigasi bar ini berada di header blog atau dimana saja. Screenshotnya bisa dilihat dibawah :

Pengen? Liat cara di bawah :

1. Login ke blogger
2. Masuk ke Tata Letak >> Edit HTML
3. Cari kode 
]]></b:skin> gunakan ctrl + F agar lebih mudah lalu paste-kan kode berwarna merah di bawah ini tepat di atas kode ]]></b:skin>
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
4. Save. Setelah Itu
5. Masuk ke Elemen Laman >> Tambah Gadget >> HTML Javascript
6. Paste-kan kode script di bawah

<div id='burasbar'>
<a class='burastabs' href='paste-kan url halaman di sini#'>Home</a>
<a class='burastabs' href='
paste-kan url halaman di sini#'>About</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Tutorial</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Widget</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Mobile</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Facebook</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Twitter</a>
<a class='burastabs' href='paste-kan url halaman di sini#'>Advertise</a>
</div>


7. Sekarang anda tinggal men-copy url halaman yang ingin ditampilkan pada tulisan yang berwarna biru di atas. Sobat bisa menambah atau mengurangi tab yang ingin ditampilkan di navbar dengan cara menghapus satu baris atau menambah satu baris yang ada di antara kode <div id='burasbar'> dan  </div>
Tulisan yang berwarna hijau boleh diganti sesuai keinginan sobat.

Jika semua sudah OK, Tinggal Di Save

Selamat mencoba.
Semoga berhasil....!

29 komentar:

  1. Thanks Bro untuk pelajaran sederhana dan bermanfaat ini.

    BalasHapus
  2. Kalo cara memasukkan artikel ke dalam menu bar-nya gimana ya?

    BalasHapus
  3. Terima kasih Bang, izin menerapkan... hehe

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

    BalasHapus
  4. ini dia tutorial yang saya cari, ber kali kali buka blog untuk masalah ini semuanya pada ga jadi untuk blog saya, setelah baca tutorial ini, blog saya langsung muncul navigasi menu blognya, makasih gan tutornya.
    Sekalian numpang ninggal jejak ya gan..
    http://fliestying.blogspot.com/

    BalasHapus
  5. terima kasih sangat bagus neh

    BalasHapus
  6. thanks broder hehe mampir yah hendrielber.blogspot.com

    BalasHapus
  7. terima kasih, sangat membantu :)

    BalasHapus
  8. Terimakasih, saya sangat terbantu

    BalasHapus
  9. apa sih yang diincar bagi pemain poker uang asli???kemenangan dan berharap bisa mendapatkan jackpot bukan??/
    tidak usah basa-basi lagi,ini solusi untuk anda..
    di oliviaclub memberikan kemudahan bagi anda dalam mendapatkan jackpot..
    jackpot yang ditawarkan ialah mega jackpot dan regular jackpot(double jackpot bisa anda dapatkan).
    jackpot ini merupakan andalan bagi situs oliviaclub sehingga oliviaclub menjadi situs yang sangat ramai bagi pemainnya.
    segera daftarkan diri anda dan coba meraih jakcpot anda..tidak dicoba maka tidak tahu...
    dapatkan juga promo bonus 100% nya,,,buruan karena promo bonus 100% akan berakhir sewaktu-waktu tanpa pemberitahuan sebelumnya/...

    untuk info dan tanya jawab bisa kunjungi fanspagenya di https://www.facebook.com/oliviaclubpk?fref=ts
    dan di blognya http://chaniaj.blogspot.com

    BalasHapus
  10. blog walking aja dah. makasih tutorialnya.. ane dah cari dr dulu tp gak ktmu :D
    ini baru. tak coba, hasilnya oke.
    cuman ane lagi nyari buat ganti tampilan menu navigasi barnya. warnanya item, gak sesuai banget dah sama selera ane. cek di www.mudijastin.blogspot.com

    BalasHapus
  11. Mantap bang, bermanfaat sekali
    Terima kasih ilmunya :D

    BalasHapus
  12. Mantap bang, bermanfaat sekali
    Terima kasih ilmunya :D

    BalasHapus
  13. makasih gan atas info nya .. mampir ke blog ane gan Ajibroziq.blogspot.com

    BalasHapus
  14. thanks ya min atas pembelajarannya dipostingan anda

    BalasHapus
  15. terima kasih ilmunya bang, smoga berpahala

    BalasHapus
  16. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    BalasHapus
  17. Sangat bermanfaat mas ilmunya, sekali coba langsung berhasil tinggal penyesuaian aja..
    mampir mampir yah ke http://mahapena07.blogspot.com/

    BalasHapus
  18. Thx Berat gan.
    jendeladunianeo.blogspot.co.id
    matadunia21.blogspot.co.id

    BalasHapus
  19. Thx Berat gan.
    jendeladunianeo.blogspot.co.id
    matadunia21.blogspot.co.id

    BalasHapus
  20. Thx,, gan bermanfaat bgt bsa buat bahan belajar.

    BalasHapus