Akhirnya saya putuskan untuk menuliskan panduan membuat menu horizontal untuk blogger yang menurut saya mudah, dan semoga tutorial ini dapat di fahami dan mudah di praktik kan.
Oke langsung saja.
- Login ke dashboard blogger
- Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
- Klik Add Gadget / Tambah Gadget.
- Pilih/klik opsi HTML/Javascript
- Kemudian masukkan kode menu horizontal yang saya tulis diakhir artikel ini.
- Klik Save / Simpan
- Selesai
Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Berikut kode menu horizontal yang harus di masukkan pada gadget HTML/JavaScript (no:4 - 5)
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>
Keterangan.ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.Selamat mencoba dan semoga berhasil
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.
Update 21 Mei 2012
Untuk mengatur lebar dan tinggi menu nya silakan edit pada bagian
.nav { background:#f5f5f5;width:100% z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;Nah silakan rubah lebarnya dengan merubah angka 100% dengan lebar yang kamu inginkan, biasanya ditulis dalam ukuran px (contoh : width: 900px).
Ganti angak 35 pada kode height:35px untuk mengatur tinggi menu.
Untuk mengedit yang lainnya silakan dicoba edit sendiri CSS nya. Yang saya maksud CSS itu adalah kode <style> sampai kode </style>
Update 13 Agustus 2012 Harap Dibaca
Bagaimana cara isi menu dengan artikel yang kita mau, agar lebih jelas silakan baca Cara Mengisi Menu Dengan Artikel Kita
November 30, 2011 at 6:24 PM
keren coba ahhhh
December 5, 2011 at 2:30 AM
sob di blog ane menu horizontal nya udah permanet dari template ny.
bagaimana ya mau ngilangin nya dan membuat bikin menu horizontal di posisi navbar
liat aja langsung http://jurnalsecience.blogspot.com/
ane cukup kerepotan juga mau menggantinya.
mohon pencerahan
December 6, 2011 at 5:23 PM
Lalu bagaimana cara mengelompokkan beberapa postingan sesuai dengan menu horisontal Gan?
December 7, 2011 at 8:18 PM
@Jurnal Secience : Kalo di templatenya udah ada menu horizontalnya maka cukup kode CSS nya saja yang di edit.
Coba cek templatenya dibagian edit html, cari kode css menu horizontalnya kemudian edit..
@MoshicutE : Untuk mengelompokkan beberapa posting maka di setiap posting harus ada label nya. Jika label udah ada maka link label yang di masukkan di sana (contoh link label : http://blog.ahmadrifai.net/search/label/blogger%20template). Dengan begitu jika ada yg mengklik menu tersebut akan dibawa kehalaman label dan di sana nantinya akan ditampilkan beberapa posting yang labelnya sama.
December 8, 2011 at 6:49 PM
Aku sudah buat label, tapi ga ngerti gimana cara lihat link label-nya. Bisa kasih pencerahan lagi Gan? TnT
Thanks A Lotz!!!! ^__^
December 9, 2011 at 6:34 AM
@MoshicutE : Silakan mba baca caranya di http://blog.ahmadrifai.net/2011/12/mencari-link-label-posting.html
December 11, 2011 at 2:02 PM
nice info, izin coba.
thank
December 14, 2011 at 10:56 PM
thx infonx ...
leh langsung coba nih... :D
December 16, 2011 at 3:38 PM
wah lumayan buat newbe...tqs kk
izin kopas y
December 17, 2011 at 6:20 PM
bang kalo pd menu1 contohnya, itu masukin lebih dr 1 postingan gmn?? apa link nya kita masukin semua ke tanda #
mohon bantuannya bang
December 18, 2011 at 9:17 PM
saya sudah coba mas, menu sudah berhasil muncul tapi waktu kita klik kenapa tidak ada postingan yang muncul (tidak ada entri) ? mohon bantuan nya. Thx.
December 19, 2011 at 8:42 AM
@DannyDayven : 1 menu hanya bisa untuk satu link saja. kalau ingin menampilkan lebih dari 1 posting maka sebaiknya yang mas pasang di sana link Label, bukan link postingnya.
@hendrowibowo : Kode pagar (#) pada kode <a href='#'> harus diganti dengan link yang akan dituju, jangan lupa cek dulu linknya apa sudah benar atau salah.
December 25, 2011 at 2:09 PM
thx bgt akhi.... insya Alloh brmanfaat...
December 27, 2011 at 2:13 AM
wah mantep nich sob, info yang menarik kawan
December 29, 2011 at 4:16 PM
thanks infonya gan...........
klo udh trus g5na bkin sub menunya?
:)
December 31, 2011 at 3:10 PM
maksih banyak gan infonya ok banget smoga blog anda tetap jaya di udara heheheheheh
January 4, 2012 at 10:03 PM
tanks bgt gan sya cari2 nih hehe
January 4, 2012 at 10:46 PM
trims banget gan.. infonya sangat membantu
suskses sll untuk anda Gan....
January 7, 2012 at 5:00 PM
Bkin sub menunya gimana mas? thank, dbales diemail saya saja
January 9, 2012 at 2:12 PM
makasih sobat, dicoba dulu..
January 20, 2012 at 11:48 PM
betul2 sangat bermanfaat bro....
scriptnya betul2 bermanfaat trims ya bro....
January 22, 2012 at 2:50 PM
Makasiih banyak yaa atas bantuannya,,hasilnya memuaskan!!
udah lebih dari seminggu aku muter" nyari info ini tapi Html-nya makin rusak
thanks sobat
January 29, 2012 at 12:41 AM
Terimakasih Gan.... Berhasil..........
February 2, 2012 at 3:36 PM
cara ngedit kode CSS nya diedit menjadi gimana gan..??
tolong bantuannya...
February 5, 2012 at 7:11 PM
Infonya menarik....perlu di kembangkan
February 7, 2012 at 12:15 AM
Wah...makasih banyak nih Gan...akhirnya ane berhasil juga bikin menu di Blog...cuma yg ane masih blom paham gimana caranya masukin entri yg lebih dari satu?...
February 16, 2012 at 9:41 AM
Thanks for skripnya, membantu sekali...
February 18, 2012 at 8:51 PM
tanks bgt gan infonya membantu skali
February 19, 2012 at 3:02 PM
masih belum paham dengan link labelnya, bisa beri pencerahan? tolong
March 10, 2012 at 9:24 AM
Keren ...., saya sudah coba, terima kasih banyak. Tetap berkarya...
March 18, 2012 at 3:42 AM
tips nya bagus ,,,,,
semoga tambah maju,,,
March 18, 2012 at 12:05 PM
makasih banget ya infonya :)
March 19, 2012 at 2:00 PM
isi menunya gimana yah gan ?????
March 25, 2012 at 3:31 PM
Terima kasih infonyaa :)
March 31, 2012 at 2:29 PM
mantaff bener tutornya mas broo, ijin sedoot nih
April 6, 2012 at 12:46 PM
Ass.kum, tak ambil code htmlnya ya akhi.. trims
Wassalam
April 12, 2012 at 1:42 AM
tengkeyuuuuuu berattt broooo...infonya membantu sekali blogger saya juga banyak di ambil dari tulisanmu..sekali lagi terima kasihh banyak..NAMBAH ILMU NIEEE
April 15, 2012 at 6:36 PM
wow thank bro i learn so much
May 1, 2012 at 8:49 PM
kalau nambah sub menu gimana ya?
tq
May 4, 2012 at 1:50 PM
makasih om, izin copy tutorial nya.
May 8, 2012 at 9:21 AM
berhasil
May 14, 2012 at 8:44 PM
permisi agan"&sis" ane mau nanya nich gimana ya cara mengisi artikel atau apalah yang sudah dibuat menu horizontal ini? mohon bantuannya ya terimakasih
May 17, 2012 at 9:24 AM
thanxs ya mas bro
May 19, 2012 at 12:59 AM
Berhasil!
Tutorialnya bermanfaat banget, makasiiih..
May 20, 2012 at 7:38 PM
Cara biar menunya agak lebar gimana yak?
May 21, 2012 at 8:10 PM
TERIMAKSIH GAN... ANE DAH PRAKTEKIN DI BLOG HASILNYA MANTAAAAPP... TAPI ANE EDIT-EDIT DIKIT YA GAN.. HE..HE... MAKLUM ANE MASIH TAHAP BELAJAR...
May 21, 2012 at 11:33 PM
Siiip, saya dah mencoba. Thanks. Tapi bingung mengganti warna dasarnya :)
May 24, 2012 at 2:58 AM
terimakasih artikelnya sangat membantu :)
May 27, 2012 at 5:46 PM
Thanks Mas Bro..ilmunya sangat bermanfaat..sekalian mohon izin klo sdikit edit..insya..Allah SWT selalu menambah ilmu buat mas Bro...
May 29, 2012 at 3:02 AM
Makasih Boss..
Ku coba step by step
Koreksi dong blog ku
May 30, 2012 at 11:06 PM
tutorial bagus nih gan, ane ijin link d menu ane ya...
May 31, 2012 at 5:42 PM
keren bgt bro...thx bgt ya kawan ^_^
June 5, 2012 at 8:47 AM
hey bro bagaimana cara mengedit warna pada menu bar? biar kelihatan keren....
June 5, 2012 at 3:22 PM
Okay Sipsip!! nice info
June 26, 2012 at 5:20 PM
TRIMS GAN atas informasi nya,maklum msh nubie..
jd sangat manfaat ni info nya...hiihihh
sukses truss gan
July 3, 2012 at 7:55 PM
prakteknya gimana ya membuat menu horisontal di blogger.. biar gga ribet
July 4, 2012 at 5:51 PM
Ngebantu banget! Thanks
July 8, 2012 at 1:30 PM
ne baru mantap terima kasih gan...moga tambah sukses
July 8, 2012 at 2:39 PM
gan contohnya yg tanda # (warna merah seperti apa ? )
July 9, 2012 at 4:27 PM
it's work ... tapi buat web mobile ga berjalan..,mohon di bantu..please help... kalo ada solusi email saya... andrianstarigan@gmail.com
July 9, 2012 at 8:29 PM
thanks gan !
July 14, 2012 at 7:27 PM
Terimakasih gan atas ilmunya... Semoga tambah sukses
July 17, 2012 at 1:20 PM
Gan, kalo horizontal menunya mau dibikin ada submenunya gimana caranya gan? Biar bisa drop down gitu.
Makasih :)
August 22, 2012 at 9:08 PM
thanks gan, nambah lg nih ilmu.
tak coba dulu ya