Meski sudah menyatakan aktif diblogdetik tapi aku juga kadang masih main-main diblogspot. Terakir kemarin bikin blog baru, terus ditambah-tambah menu navigasi gitu. Untuk kode html-nya dikasih sama teman pesbuk sih. Kebetulan aku minta kode templatenya eh dikasih juga kode untuk nambahin menu navigasinya. Kalo untuk blogku yang ini kan sementara pakai template bawaan dari blogspot dan itu menu home sama infonya pasang dari page dari fasilitasnya blogger. Terus bagaimana cara membuat menu navigasi blogspot seperti pada gambar diatas? Contoh untuk membuat menu navigasi seperti gambar diatas adalah tinggal menambahkan kode digadget baru.
Kode yang ditambahkan adalah seperti dibawah ini:
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>
Taruh kode diatas digadget posisi atas bawah judul blog. Gampang kan?
salam hormat dariku,
@mbak_widha
Home »
Belajar BLOG
» Cara Membuat Menu Navigasi Blogpsot
Cara Membuat Menu Navigasi Blogpsot
Posted by widha utawi idha
Posted on Tuesday, July 24, 2012
with 22 comments
simpel banget mas caranya, nanti saya coba yah, ada live demonya enggak?
ReplyDeletejumpa lagi :) keren mbak wid
ReplyDeleteAssalamu 'alaikum
ReplyDeleteApakah semuanya kita copy ???
kenapa selalu muncul dialog URL salah..?
cool gan
ReplyDeletesudah saya coba mbak, udah jadi.. tapi cara masuk ke menu2nya gimana ya? saya udah bikin postingan "tentang saya" terys mau aku masukin ke menu "tentang saya" juga kok ga bisa ya? gimana caranya mb, maaf saya anak baru, mohon bantuannya..
ReplyDeleteini link blog saya http://meimeiwulandari.blogspot.com/
terima kasih
haduh saya juga gagal
ReplyDelete:(
Maaf gan,koreksi dikit,
ReplyDeletekayanya penaruhanya kurang di pahami.
salam blogger.kunjungi blog ane jg gan di blog inside
"Atas bawah judul blog"?
ReplyDeleteUraiannya tentang cara membuat menu sangat bermanfaat Sob. Ringkas dan padat namun sangat jelas. Oh ya, tidak lupa saya sampaikan salam kenal serta salam berbagi. :)
ReplyDeleteterima kasiiiiiiiiiiiiiiiiiiiiiiiihhhhhhhhhhhhhhhhhhhhhhhhhhhhh
ReplyDeleteok bro dicoba dulu
ReplyDeletecara yang paling gampang menurut saya..
ReplyDeletemudah diterapkan dari pada cara yang lain..
makasih sob.
gan mksih,,,,n q mau tanya cara membuat isi menu gmn ?,,,q kan udah posting,postingnya itu mau q link kan ke menu gima caranya
ReplyDeletethanks..
kunjangannya y ahkam-alin.blogspot.com
Mantap gan...
ReplyDeletesudah saya aplikasikan di blog saya thanks....
menu tabnya simpel dan keren nih,
ReplyDeletemakasih uda berbagi
mantabs om
ReplyDeleteTRIM ATAS BANTAUANYA
ReplyDeletebagus itu :)
ReplyDeletekalau di kasih marque untuk bergoyang - goyang bisa nggak :)
Eh jadi malu, saya udah coba tuh caranya si bos ini
ReplyDeletehttp://mandut.blogspot.com
mksh gan info'x sangat bermanfaat sekali..
ReplyDeletesukses terus buat blog'x...
wah bagus gan sharenya ane mau coba gan
ReplyDeletetutorialnya simpel dan sangat jelas.salam kenal
ReplyDelete