Membuat Menu Horisontal di Blogspot

Sebelumnya saya sudah membuat artikel tentang hal ini diblog saya disebelah yg sudah lama saya tinggalkan. saya aktifkan lagi karena untuk mempraktekkan membuat menu horisontal di blogspot.. dan hasilnya bisa dilihat di bahrielive.blogspot.com dan dibawah ini adalah caranya..
petama masuk Login ke blogspot dulu, lalu masuk ke Perancangan, lalu masuk ke Edit HTML. Masukkan kode dibawah ini diatas kata

 ]]></b:skin> 

. di Control F saja dan masukkan kata disamping supaya lebih gampang dalam pencarian..

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } 
#NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } 
#nav li { list-style: none; margin: 0; padding: 0; } 
#nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

setelah dicopikan kode diatas. lalu di Simpan dengan cara klik simpan templete.

setelah itu masuk ke Rancangan, Element Laman. lalu tambah gadget, pilih HTML/JavaScript dan masukan kode seperti dibawah ini. untuk kode dibawah ini nanti bisa diganti yg perlu diganti. intinya adalah formatnya harus sama.

<div class="menuhorisontal">
<ul id="nav">

<li><a href="http://bahrielive.blogspot.com/">Home</a> </li>
<li><a href="http://bahrielive.blogspot.com/search/label/IT">Teknologi informasi</a></li>
<li><a href="http://bahrielive.blogspot.com/search/label/sastra">Sastra</a> </li>

</ul>
</div>
<li><a href="http://bahrielive.blogspot.com/">Home</a> </li>

baris yang ini untuk menu home dan diletakkan disamping paling kiri nomor pertama.. Kata Home bisa diganti sesuka anda.. dan untuk link tujuan

<a href="http://bahrielive.blogspot.com/">

diantara tanda petik bisa diganti alamat blog anda..

<li><a href="http://bahrielive.blogspot.com/search/label/IT">Teknologi informasi</a></li>

baris ini berada di urutan ke dua dari kiri dan untuk linknya di isi dengn letak label yg pernah dibuat. untuk mendapatkan link label cukup mudah. cukup dg cara menaruh diatas label yg pernah dibuat dan klik kanan lalu copy link location. dan dipastekan di dalam

<a href=" ">

linklocation

dan untuk menu yg ketiga caranya sama seperti yg kedua. bedanya ada di link labelnya..

bila ingin membuat menu lagi.. tinggal diperbanyak code ini

<li><a href="isi dg link yang menuju label">isi judul menu</a></li> 

ditempatkan dibawahnya

</li>

selamat mencoba.. bila ada yg ingin ditanyakan bisa tinggalkan comment atau bisa add ym saya di : bahrie127 untuk chat langsung.. terimakasih..🙂

2 Komentar (+add yours?)

  1. mint
    Feb 19, 2011 @ 13:07:19

    Pusing edit kode….

    Balas

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: