2 Cara Membuat Navigasi Menu di Blogger

Hari ini saya mau share info tentang Cara Membuat Navigasi Menu di Blogger, trick ini saya dapatkan setelah cari info sana-sini ketika saya pertama kali menggunakan blogger, Pernah dengar Navigasi Menu? oke saya jelaskan Navigasi Menu adalah sebuah tools untuk memudahkan pengunjung untuk mengakses/menjelajah suatu blog/website agar dapat melihat posting sesuai dengan label yang diinginkan. Navigasi Menu biasanya berisi menu seperti Home, Contact, About, dll, bisa juga berisi label-label posting.



Screenshot:

DEMO

Cara Membuat Navigasi Menu di Blogger:

• login ke blogger anda
• klik ikon ini  , lalu pilih Template.
• Template > Edit HTML > Lanjutkan
• lalu cari kode ]]></b:skin> (gunakan Ctrl+F, untuk memudahkan pencarian)
• lau letakan CSS Code berikut, tepat di atas code ]]></b:skin>

/* Menu */
a.tabsnavi, a.tabsnavi:link, a.tabsnavi: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.tabsnavi:hover {color:#FFFFFF; background:#666666;}
#navibar {width:auto; margin:0 auto;}

•  Save Template, lalu pilih Tutup 
• setelah itu pilih menu Tata Letak, tepat di atas menu Template
• Pilih Tambah Gadget, setelah pop up windows muncul, pilih opsi HTML/Javascript
• Letakan HTML code berikut

<!-- Menu -->
<div id='navibar'>
<a href="#" class="tabsnavi">Home</a>
<a href="#" class="tabsnavi">Facebook</a>
<a href="#" class="tabsnavi">Twitter</a>
<a href="#" class="tabsnavi">Sitemap</a>
<a href="#" class="tabsnavi">Advertise</a>
<a href="#" class="tabsnavi">Contact</a>
<a href="#" class="tabsnavi">About</a>
</div>

• Ganti # dengan URL yang diinginkan, dan ganti juga Home, Facebook, Twitter, Sitemap, Advertise, Contact, About dengan Judul Tabs yang diinginkan
  Contoh: <href="www.rickyfumi.com" class="tabsnavi">Home</a>
• Simpan 
• Drag/geser gadget  ke atas / bawah header (letakan pada slot gadget)
• Simpan Setelan

Semoga Bermanfaat

Posted by Ricky Kurniawan at Wednesday, June 13, 2012

Anda sedang membaca artikel tentang Cara Membuat Navigasi Menu di Blogger dan anda bisa menemukan artikel Cara Membuat Navigasi Menu di Blogger ini dengan url http://rickyfumi.blogspot.com/2012/06/cara-membuat-navigasi-menu-di-blogger.html,anda boleh menyebar luaskannya jika artikel Cara Membuat Navigasi Menu di Blogger ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Navigasi Menu di Blogger sebagai sumbernya.