10 Menu Horizontal Keren untuk Blogger

10 Menu Horizontal Keren. Membuat menu horizontal untuk link pilihan pada blog anda, misalnya link menuju Home atau kategory kategory tertentu. Bagaimana caranya? nah seperti yang saya posting sebelumya, yaitu cara membuat menu horizontal di atas header. Membuat menu horizontal ini sama dengan cara sebelumnya. Berikut ini cara memasang menu horizontal keren ini.

Cara membuat menu horizontal

  • Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
  • Cari Kode ]]></b:skin>  ( Gunakan CTRL + F untuk mempermudah pencarian )
  • Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
  • Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
  • Jika sudah ditemukan, Copy kode menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Menu Horizontal 1

Css

Kode


Menu Horizontal 2

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 3

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 4

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 5

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 6

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 7

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 8

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 9

Menu Horizontal Keren
CSS

Kode


Menu Horizontal 10

Menu Horizontal Keren
CSS

Kode


Catatan:
<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>
Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="http://bamz.us/" ><span>BLog Bamz</span></a></li>
10 Menu horizontal keren di atas terinspirasi dari mbt. Buat yang sudah sukses membuat menu tersebut jangan lupar komentar yah, kalau bingung tanyakan saja pada komentar. Mudah mudahan artikel ini bermanfaat untuk anda semua.

31 comments:

Gen7Software mengatakan...

Maturnuwun mas bamz ..
Mas Smpean wong Endi ??

BamZ Gz mengatakan...

@Gen7Software: iyo podo mas :). iso wong jember ato bondowoso kwkwkkw

AbeebAreedana mengatakan...

Meh cidek mbeg Nganjuk mas ,

BamZ Gz mengatakan...

heuheu g pernah ke nganjuk mas :)

Muro'i El-Barezy mengatakan...

mantabss dan keren mas bro..sampe bingung neh pilih yang mana, maturnuwun postingnya ...:)

ALEX SI BLOGGER GAPTEK mengatakan...

Keren abiz Mas...

BamZ Gz mengatakan...

@Muro'i El-Barezy: wkkwkw dipilih aja mas dari yang paling cocok

BamZ Gz mengatakan...

@ALEX SI BLOGGER GAPTEK: thanks gan dukungannya

Eka's Blog mengatakan...

mas, mau nanya, berarti menu horizontalnya ada di atas header ya? kalo dibikin di bawah header bisa ga?

BamZ Gz mengatakan...

bisa mas, tinggal ubah penempatan kodenya saja

Agil HP mengatakan...

copas css-nya di mana, kak?
mohooon bantuannya :)

BamZ Gz mengatakan...

itu kan sudah di sediakan css tiap2 menu mas

rezpector mengatakan...

cara masukin artikel di setiap menu gmna?? biar tampilan kayak menu home.. thanks :D

SOLUSI KESEHATAN ANDA mengatakan...

gan kl menu di sentuh terus membentuk vertikal gmn caranya ya ky web agan

ryotambenk mengatakan...

kaloo itu sudah dipasang trus klo mau nambah link dropdownnya gimana>>??????mas bamz

Andre Bhaskoro mengatakan...

Nice post mas Bamz :)

cara pasting di tiap menunya gmana .??
thx.

DAVE SALON mengatakan...

aku dr kmrn kgak bisa ngedit ada yang mau bantuin?

Simpel Tapi Menarik mengatakan...

saya gabisa nih, mohon bantuannya

Anonim mengatakan...

Halo salam kenal, saya coba terapkan ilmu ini, tapi gagal menemukan kode ini "div id='header'" dan juga menemukan kode "div id='header-wrapper'"

Gimana cara mengatasinya? Maklum ya, lagi pemula di dunia blogger. Sururi, email: ruriykpn@gmail.com

Anonim mengatakan...

yang bisa dwop down gmn

Rudy Hartono mengatakan...

apik-apik mas, bingung atene mile

ino edogawa mengatakan...

klo gak ada kode "div id='header'" atau "div id='header-wrapper'", gimna?

aneka souvenir mengatakan...

berhasil mas bams, saya juga pake template dari mas bams..??thanks

KoBaRkAn EkSpReSiMu mengatakan...

ngatur posisiny gmn ya mas biar pas.... terlalu ke kiri ni punya q

Eflianda mengatakan...

sob aq dah pake yg nomer 6.
klo mo d tambahkan menu dropdown macam mana..?

Jefry mengatakan...

menu horizontal diatas apa bisa juga ya dipasang untuk blog wp ?
terima kasih

agriculturproduct mengatakan...

Mantab nich gan...

tricajus herbal ajaib mengatakan...

mau saya coba.. semoga oke..

Si Dodon mengatakan...

mas bamz kok div id ='header-wrapper' g ada truz ane adanya div id ='heaper-inner..apakh hruz dsamain 'header-wreaper/header(aja)'coz kok g bsa k baca ama css y..??mnta sarannya mksih

supri sanjaya mengatakan...

saya baru coba, tp pada tahap ... id='header'> atau .. id='header-wrapper'> jika tidak di temukan trus kode nya kita copas dimana???terimakasih..apa yg harus kita lakukan mas? soalnya baru belajar mas,,,,thanks

supri sanjaya mengatakan...

kepada temen2 yg sudah berhasil...tolong share cara nya kalo gak ada kode div........ kode kita copas kmana???

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih