Cara Buat Menu Horizontal dibawah Header Blog

Menu horizontal menjadi sangat penting untuk mengoptimalkan isi atau content dari suatu blog atau wap. Dengan menu horizontal di suatu blog atau wap pengunjung / visitor akan dengan mudah menemukan artikel yang sesuai yang di harapkan. Tak ayal dengan menu horizontal seluruh isi atau content suatu blog atau wap akan dengan mudah tersentuh oleh pengunjug.

menu navigasi
Klik Untuk Memperbesar Ukuran
Mengingat pentingnya widget ini tak ayal sobat Patah Online bertanya lewat komentar di salah satu artikel  yang berjudul Buat Menu Melayang dengan Effect Mouseover berikut adalah pertanyaan dari sobat Patah Online.





Dan berikut Cara Buat Menu Horizontal di bawah Header Blog
1. Masuk ke blogger => Rancangan => Edit HTML
2. Contreng expand widget tamplate
3. Cari kode ]]></b:skin> lalu tempatkan kode di bawah ini tepat di atas kode tersebut.
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left;
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #222222;
color: #ffffff;
}
.basictab li a:visited{
color: #ffffff;
}
.basictab li a:hover{
background-color: #00ff00;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{
position: relative;
top: 1px;
padding-top: 4px;
background-color: #222222;
color: white;
}
4. Lalu klik simpan tamplate
5. Langkah selanjutnya klik elemen halaman => tambah widget => pilih HTML/ Javascript => Copy Paste kode di bawah ini => Langkah terakhir klik Save
<ul class="basictab">
<li class="selected"><a href="http://pattah12.blogspot.com/">Home</a></li>
<li><a href="http://pattah12.blogspot.com/p/about-me.html">My Profil</a></li>
<li><a href="http://pattah12.blogspot.com/p/kontak.html">Kontak</a></li>
<li><a href="http://pattah12.blogspot.com/p/link-exchange.html">Tukar Link</a></li>
<li><a href="http://pattah12.blogspot.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Blogger">Blogger</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Trik%20Internet">Trik Internet</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Tutorial">Tutorial</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/My%20Award">Award's</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Aplikasi%2F%20Software">Software</a></li>
<li><a href="http://pattah12.blogspot.com/search/label/Download%20Mp3">Mp3 India</a></li>
</ul>
Selesai lihat apa yang terjadi,oya jangan lupa untuk menempatkan widget persis dibawah header blog sobat.
NB :
- Ganti tulisan yang berwarna hijau dengan Url Homepage blog sobat
- Untuk yang berwarna merah silahkan ganti dengan URL label pada blog sobat
- Dan untuk URL yang berwarna biru silahkan ganti dengan URL halaman statis pada blog sobat.

Cukup sekian postingan saya tentang  Cara Buat Menu Horizontal di bawah Header Blog, moga bisa bermanfaat. Rasanya kalau katagori artikel kita banyak, menu yang semacam ini kurang maksimal, solusinya adalah buatlah menu dropdown di blog anda.
Previous
Next Post »

72 Komentar

Write Komentar
April 25, 2012 at 1:22 AM delete

Izin bookmark untuk diterapkan nanti sob.

Reply
avatar
KangFarhan
AUTHOR
April 25, 2012 at 6:12 AM delete

huebat banget dan simple bang ya ternyata caranya... ajib saya ijin nyontek nih bang

Reply
avatar
Kang Asep
AUTHOR
April 25, 2012 at 10:01 PM delete

Cukup bagus sob,
kalau bisa ditambahkan sub menu nya lebih bagus lagi sob ,,,

wilujeng ngeblog

Reply
avatar
weblog ask
AUTHOR
April 26, 2012 at 8:20 AM delete

mantap neih infonya..

Reply
avatar
SR11
AUTHOR
April 28, 2012 at 2:02 AM delete

Menarik Kang. tapi sayangnya udah bikin duluan. hehe
Ditunggu komentar balasannya.

Salam dari SR11 :)

Reply
avatar
April 28, 2012 at 1:41 PM delete

@Agriculturproduct
uke bang, silahkan bang, moga bermanfaat aja bang :)

Reply
avatar
April 28, 2012 at 1:42 PM delete

@KangFarhan
uke bang, silahkan aja bang, moga bermanfaat bang :)

Reply
avatar
April 28, 2012 at 1:43 PM delete

@Kang Asep
hehhe... iya c kang asep, kyaknya lebih mantep kw ada sub menu nya kang :)

Reply
avatar
May 2, 2012 at 6:25 PM delete

izin sedot bozzzz,,
tks info nya

Reply
avatar
May 3, 2012 at 10:39 AM delete

@habibie mustafa
uke silahkan boozz, moga bermanfaat n sama2 bozz

Reply
avatar
Tri Pudji
AUTHOR
May 3, 2012 at 11:56 PM delete

Mo tanya bang,aq udh bikin menu horisontalnya,tp wkt aq sorot menu td warnanya hitam utk merubah warna ketika disorot itu d mana ya bang?

Reply
avatar
May 4, 2012 at 2:15 AM delete

@Tri Pudji
coba untuk warna hovernya di ganti bang, tapi kw untuk mempermudah,kw tamplate sobat pakai tamplate bawaan blogger, coba di ganti lewat perancangan tamplate =>advanceed/lanjutan=>latar tab .
tinggal di edit aja bang.

Reply
avatar
Blogger BNA
AUTHOR
May 4, 2012 at 10:01 AM delete

thanks, nice info sob.
jangan lupa berkunjung ke
http://dedyhtl.blogspot.com
Hidden Technology Lengkong

Reply
avatar
Tri Pudji
AUTHOR
May 4, 2012 at 1:58 PM delete

Oke bang udh aq edit warna tab nya, trimakasih byk infonya.

Reply
avatar
sundaboy
AUTHOR
May 6, 2012 at 1:48 AM delete

mantap kang bos, tengkyu ya

Reply
avatar
Zoele
AUTHOR
May 7, 2012 at 4:01 PM delete

mantap gan, terimaksih ya gan infonya. Sangat bermanfaat (y)

Reply
avatar
May 7, 2012 at 10:04 PM delete

@Zoele
uke sama2 bang senang bisa bermanfaat :)

Reply
avatar
SDM YAPI
AUTHOR
May 9, 2012 at 6:04 PM delete

Ijin bookmark gan, sekalian copy script nya buat di blog ane, tegkyuh....

Reply
avatar
mahfoedz
AUTHOR
May 19, 2012 at 8:40 AM delete

wah mantap beut gan,, ijin kopas gan.... menu-menu dauh jadi, tapi cara ngisinya masing-masing label gimana bang.... coz, setiap posting masukknya di halaman depan tyus

Reply
avatar
May 20, 2012 at 6:31 AM delete

@SDM YAPI
uke silahkan gan, moga makin mantap aja blognya , hahhayyy

Reply
avatar
May 20, 2012 at 6:35 AM delete

@mahfoedz
sebelum artekel di publish silahkan di katagorikan ke label tertentu bang, terus tambahkan gadget label, lalu ambil link label dengan cara, misal ingin mendapatkan link label KOMPUTER, klik kanan=> copy link adress, nah kw dah dapet tinggal pastekan di widgete mene horizontalnya sob :)

Reply
avatar
Androidtan
AUTHOR
June 5, 2012 at 8:03 PM delete

Terima kasih atas informasi penting ini mas.

kebetulan saya lagi nyari tutorial ini.

Reply
avatar
June 5, 2012 at 8:34 PM delete

@Androidtan
sama2 sob, moga bisa jadi manfaat sob :)

Reply
avatar
June 13, 2012 at 7:52 PM delete

oh begini caranya..kebingungan saya setiap pasang menu pasti diatas header..hehehe thanks sob tutornya

Reply
avatar
June 16, 2012 at 6:34 PM delete

terima kasih info yg sangat bermanfaat ini..


#Semoga sehat selalu

Reply
avatar
i Post
AUTHOR
June 16, 2012 at 9:12 PM delete

mau gan thanks yagh hehehe

Reply
avatar
June 16, 2012 at 9:30 PM delete

@i Post
silahkan gan, moga bermanfaat aja gan :)

Reply
avatar
onta unta
AUTHOR
June 17, 2012 at 4:10 PM delete

makasih bang, follow blog gue juga yaa www.kandangontaunta.blogspot.com

Reply
avatar
sulham syahid
AUTHOR
July 2, 2012 at 10:56 PM delete

apakah ini tidak merusak template standar kalau misalnya kita gagal pas masangnya? mohon di balas. terima kasih

Reply
avatar
July 3, 2012 at 6:53 PM delete

@sulham syahid
tidak sob, asal kita nempatin kode css nya benar yakni di atas kode
]]>
saya kira tidak akan merusak tamplate

Reply
avatar
Wandi Twenty
AUTHOR
July 5, 2012 at 2:57 PM delete

Akhirnya ketemu juga cara ini..
Terimakasih banyak sobat, sudah saya terapkan di blogku. Dan akhirnya JADI..! :)
Baru belajar ngeblog nih sob, kalo gak keberatan follow balik yah..
Terimakasih..

Reply
avatar
July 5, 2012 at 9:26 PM delete

@Wandi Twenty
sama2 sob, moga bisa bermanfaat ya sob :)

Reply
avatar
August 10, 2012 at 3:12 PM delete

Thanx infonya, sangat membantu.. (fourseis.blogspot.com)

Reply
avatar
August 10, 2012 at 3:45 PM delete

@Fourseis Seishin
sama2 sobat, moga bisa bermanfaat aja

Reply
avatar
Noeriel Anwar
AUTHOR
August 13, 2012 at 5:07 PM delete

oo ia..
boleh di copast ngak gan artikelnya di blog saya..?

Reply
avatar
August 13, 2012 at 5:20 PM delete

@Noeriel Anwar
boleh kox sob, link sumbur jangan lupa di serakan yaa :)

Reply
avatar
October 2, 2012 at 3:24 PM delete

saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca tentang buat menu horizontal header blog.... saya berharap bisa berkunjung lagi

Reply
avatar
smartpulsa-88
AUTHOR
October 6, 2012 at 5:17 PM delete

Makasih banyak Gan atas tutornya...
Dah aku terapkan cuma masih saya display:none;
Salam Kenal and Sukses Slalu...

Reply
avatar
October 7, 2012 at 1:25 AM delete

@Obat Keputihan
mkasih banyak, semoga bisa bermanfaat :)

Reply
avatar
October 7, 2012 at 1:25 AM delete

@smartpulsa-88
salam kenal juga sebot, senang bisa bermanfaat.. :)

Reply
avatar
October 18, 2012 at 10:05 AM delete

Sangat membantu buat aku yang baru ada Home saja selama ini. Hehehe

Reply
avatar
Baju Kartun
AUTHOR
October 19, 2012 at 9:50 AM delete

Hasilnya warna baground hijau apa bisa diganti sobat? Thks

Reply
avatar
October 19, 2012 at 4:05 PM delete

@Harga Mobil Bekas
senang bisa membatu,n home yang ada di blog sobat, moga ada temanya,hehhehe

Reply
avatar
October 19, 2012 at 4:06 PM delete

@Baju Kartun
bisa sobat, sobat bisa ganti kewat perancangan tamplate atau langsung ke css nya... :)

Reply
avatar
October 22, 2012 at 7:35 PM delete

@goyang patah patahMaklum ane masih gaptek ... pernah ganti theme semuanya hilang jadi mulai dari awal lagi hehehe ... Biar standar aja kali ya ?

Reply
avatar
October 23, 2012 at 12:47 AM delete

@Harga Mobil Bekas
blog ini sebenarnya juga cuman pakai tamplate bawaan sobat, lebih baik sebelum ganti tamplate hendaknya template lama di beckup dulu sobat

Reply
avatar
October 23, 2012 at 8:36 PM delete

@goyang patah patahKalau ditambahkan menu drop down bagian mana yang mesti diotak atik ? trus script nya gimana ya ? Thks

Reply
avatar
October 23, 2012 at 10:39 PM delete

@Harga Mobil Bekas
kw pembuatan menu dropdown coba ke postingan ini aja sobat, moga bisa membantu :)

Reply
avatar
allvan brik
AUTHOR
October 30, 2012 at 12:08 AM delete

mau nanya gan..klo kita buat menu trus masukin banyak url gmn ya?maksudnya gini..seumpama kita buat menu "TIPS N TRIK" trus kita buka ada banyak postingan kita tentang tips n trik itu gmn ya gan?maklum masih gaptek alias newbie.mohon pencerahannya

Reply
avatar
October 30, 2012 at 4:15 AM delete

@allvan brik
yang di masukin Url label Tips n Trik gan, misal menu "Photoshop" url label photoshop "http://www.patahonline.com/search/label/Photoshop"

Reply
avatar
November 10, 2012 at 3:08 PM delete

info yang bermanfaat kawan, salam kenal dari saya.

Reply
avatar
sandy
AUTHOR
November 24, 2012 at 1:33 AM delete

thanks banget yah atas infonya kerasa orang pintar gue

Reply
avatar
Irma Yunia
AUTHOR
March 22, 2015 at 7:38 AM delete

Terimakasih atas informasinya sangat membantu :)
http://grosirprodukgreenworld.com/

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon