Cara Membuat Menu Horizontal Pada Blog di Blogspot (NAVIGASI)

Cara Membuat Menu Horizontal Pada Blog di blogspot (NAVIGASI) seperti Menu kolom Home, Daftar isi, Komputer, HP Dll secara mendatar. Sebenarnya Banyak sekali jenis menu horizontal yang bisa anda variasikan, seperti dengan script dropdown CSS ,Nanvigasi slide dan dengan html jquery.nah kali ini saya akan berikan Panduan singkat tentang bagaimana cara Membuat Menu Horizontal pada blog di Blogspot Blogger, dan berikut ini adalah cara2nya :

► Seperti biasa silahkan anda Login dulu ke blogger.com, lalu pilih Design .
► Pilih Edit HTML, dan silahkan Download dulu full template untuk menjaga bila nanti ada kesalahan, dan dengan cara ini Nanti template bisa dikembalikan seperti semula.
► Lalu jangan lupa untuk mencentang kotak expand template widget pada template Anda, dan kemudian cari kode: </b:skin> dan untuk mempermudah pencarian silahkan tekan CTRL + F Pada keybord anda.
► Bila </b:skin> tersebut sudah ketemu Hapus kode itu dan ganti dengan kode di bawah ini:

</b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>

► Setelah sobat sudah mengganti kode tersebut sekarang cari lagi kode : <div id='content-wrapper'> dan gantilah kode tersebut dengan Kode script di bawah ini :

<div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://caramembuatada.blogspot.com/' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://caramembuatada.blogspot.com/' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://caramembuatada.blogspot.com' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://caramembuatada.blogspot.com' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://caramembuatada.blogspot.com' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>

Keterangan Kode:

Kode Background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, silakan ubah warna latar sesuai keinginan sobat. dan untuk Kode width: 860px : adalah panjang horizontal dari menu nya, Monggo/silahkan di ATUR/di sesuaikan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper pada blog sobat.
Kode {color:#fff;background:#306 no-repeat top center} adalah : warna text dan warna background pada saat disorot dengan pointer mouse. Dan Jangan lupa Untuk Mengganti url link http://caramembuatada.blogspot.com dengan Link sobat .

Tips :
Sebelum anda meletakkan script/kode diatas ke Template, sebaiknya anda copy/paste Kode di Notepad terlebih dahulu, setelah anda taruh di notepad barulah anda copy lagi dan Masukkan kode tersebut kedalam TEMPALE ANDA.

Dan akhirnya sekian dari saya, semoga panduan Cara Membuat Menu Horizontal Pada Blog di blogspot (NAVIGASI) ini dapat bermanfaat bagi anda semua.

Rizqi R Kamis, Maret 15, 2012 tips blog