Tips Membuat Menu Horizontal dan Navigasi Bar Pada Header

Tips Membuat Menu Horizontal dan Navigasi Bar Pada Header

Membuat simple menu navigasi pada header, dimana menu ini sebagai penunjuk seperti catagori dan sebagainya disamping itu untuk lebih memudahkan pengunjung mengetahui letak serta artikel yang diinginkan. Biasalah creasi blogwalking dengan sedikit modifi HeHeHe.
Wis langsung aja seperti biasanya.

Langkahnya : ( sorii gak sempat ngasih contoh gambar )
1. Login blog
2. Layuot + Edit HTML + centang Expand Widget Templates
3. Cari kode --> /* header dan tambahkan kode dibawah ini :


Untuk simple navigation bar / text link


a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}


b. Kemudian kode :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='
3'
showaddelement='
yes'>

c. sava template
d. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1">Keterangan1</a></li>
<li><a href="Alamat Keterangan2">Keterangan2</a></li>
<li><a href="Alamat Keterangan3">Keterangan3</a></li>
<li><a href="Alamat Keterangan4">Keterangan4</a></li>
<li><a href="Alamat Keterangan5">Keterangan5</a></li></ul></div>


Text Link dengan Hover Effect

a. Tambahkan kode dibawah :

/* Header */
#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
#newnavbar li a{
color:#dfffed;
}
#newnavbar li a:visited {
color: #57E964;
}
#newnavbar li a:hover {
color: #F88017;
background: #ffff66;

}


Langkah (b), (c), (d) sama seperti diatas


Image navigation bar / image link

a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
padding:30px;
border:0px solid;
}


b. sava template
c. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image1"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image2"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image3"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image4"></a></li>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image5"></a></li></ul></div>


Image navigation bar dengan hover effect / image link dengan efek hover

a. Cari dan tambahkan kode berikut :

/* Header */
#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
#newnavbar li a img{
height:30px;
width:30px;
}
#newnavbar li a:hover img{
height:40px;
width:40px;
background: #
FF0000;
}
#newnavbar li a:visited img{
height:40px;
width:40px;
background: #
00FF00;
}


b. sava template
c. Buka Page Elements + Add a Page Element + add HTML/JavaScript, tambahkan kode dibawah :

<div id='newnavbar'>
<ul>
<li><a href="Alamat Keterangan1"><img
src="Alamat Image1"></a></li>
<li><a href="Alamat Keterangan2"><img
src="Alamat Image2"></a></li>
<li><a href="Alamat Keterangan3"><img
src="Alamat Image3"></a></li>
<li><a href="Alamat Keterangan4"><img
src="Alamat Image4"></a></li>
<li><a href="Alamat Keterangan5"><img
src="Alamat Image5"></a></li></ul></div>



Source : http://dhuwuh.blogspot.com/2008/11/tips-membuat-menu-horizontal-dan.html



Related Posts by Categories :


61 comments:

pay per lead said... on July 14, 2010 at 11:21 AM  

wah lumayan ribet juga ya caranya hhehe,
klo pake wordpress bisa ga ya???

tentang pendidikan said... on July 22, 2010 at 1:26 AM  

Kunjungi artikel kami tentang pendidikan dan filsafatnya yah.. terima kasih.. daripada ribet ribet programming mending belajar filsafat sebagai refreshing.. heuehuehuee

technology reviews said... on July 29, 2010 at 5:48 AM  

ini alternative yang bagus untuk page di blogger. Kelebihannya adalah custom jadi kita bisa ngelink ke mana aja. paling ideal sih ke URL label atau posting2 penting/menarik. sy bookmark dulu artikelnya mas :)

free microsoft word download said... on August 1, 2010 at 6:37 AM  

makasih ya kang, bisa dicoba nih. kebetulan dulu di blogku ada tabnya tapi udah dihapus. mo balikin lagi nggak tau caranya.

pulsa murah said... on October 3, 2010 at 6:08 AM  

bener manteb ini masss,, ini yang saya lagi cari2. muter sana muter sini, ehh ketemu juga disini.. trims banget pokoknya.. smoga ilmu2nya bermanfaat utk semua.

KITAS said... on October 15, 2010 at 10:28 AM  

Pengaturan Navigasi sangat dibutuhkan oleh pengunjung yang mau menelusuri blog kita. Sayangnya banyak yang tidak memanfaatkan fasilitas ini. Terima kasih atas ilmunya, Mas..

Belajar SEO said... on October 15, 2010 at 10:34 AM  

Numpang komentar, Bro... Tipsnya sangat berguna.. Thx ya.. BTW, banyak artikelnya yg saya butuhkan ada di blog ini...

Wayan said... on December 8, 2010 at 9:30 PM  

teng-kyu Info'nya mas,, klo mau buat tulisan berjalan(kayak tulisan kuning diatas) gemana caranya?

Emzeth said... on January 15, 2011 at 3:33 AM  

wah, makasih banyak mas code2nya, lumayan buat developing blog-ku...

jaket doble resleting said... on January 23, 2011 at 1:08 PM  

Bos inponya manteb, ditambah hasil visualisasi hasil codingnya dunk...jadi tahu gambarannya...

otak kiri said... on February 8, 2011 at 9:16 AM  

sepertinya sekarang udah ada menunya ya di blogspot, tinggal klik aja

Javahostindo Web Hosting Indonesia said... on February 23, 2011 at 9:20 PM  

Mantap artikelnya sob, ini bisa membantu para blogger pemula untuk membuat blog yang lebih keren lagi

QSEW said... on April 6, 2011 at 5:59 PM  

ternyata cara Membuat Menu Horizontal dan Navigasi Bar Pada Header begini ya gan, thanks ya buat tips nya

CCTV Surabaya said... on June 24, 2011 at 10:47 AM  

saya coba dulu codingnya semoga berhasil :D
thanks atas sharenya...

Obat Alami Penyakit Asma said... on March 17, 2012 at 10:03 PM  

wahh terima kasih atas infonya, sangat berguna bagi saya.
langsung saya coba gan.

CHI Flat Iron said... on October 5, 2012 at 7:56 AM  

hot curly hair to straight hair, making a beautiful natural radians. 17 hot radians length about two-thirds of the length of their hair.

UGG Boots UK said... on October 9, 2012 at 1:30 PM  

flowing chiffon skirts, black T-shirt as within the ride, then put on a British style plaid small suit, losing individuality in soft, a ladies hat,

Dreamland Beach said... on March 24, 2013 at 4:27 AM  

wah..ajib ni ilmunya...makasih udh berbagi mas..langsung saya praktekkan... dan berhasil..

cara memperbesar penis terbaik said... on April 6, 2014 at 7:24 PM  

Extender jilq adalah cara memperbesar dan memperpanjang penis terbaik.
memperbesar penis menggunakan extenderjilq sangat mudah, cepat dan aman.
anda tidak perlu cape mengurut seperti produk2 teknik urut arab yg dijual oleh website2 yg lain.

info lengkap silahkan kunjungi:
www.extenderjilq.com

Post a Comment

"Using DOFOLLOW System. Pease don`t SPAM!!!"

Thanks To Comment My Articles. God Bless You People.

Add to Technorati Favorites

Technorati Ping To Your Blog
Including Yours E-Mail Address To Subscribe New Tricks