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 praktek kan.
Ok 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>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.
November 30, 2011 6:24 PM
keren coba ahhhh
December 5, 2011 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 5:23 PM
Lalu bagaimana cara mengelompokkan beberapa postingan sesuai dengan menu horisontal Gan?
December 7, 2011 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 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 6:34 AM
@MoshicutE : Silakan mba baca caranya di http://blog.ahmadrifai.net/2011/12/mencari-link-label-posting.html
December 11, 2011 2:02 PM
nice info, izin coba.
thank
December 14, 2011 10:56 PM
thx infonx ...
leh langsung coba nih... :D
December 16, 2011 3:38 PM
wah lumayan buat newbe...tqs kk
izin kopas y
December 17, 2011 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 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 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 2:09 PM
thx bgt akhi.... insya Alloh brmanfaat...
December 27, 2011 2:13 AM
wah mantep nich sob, info yang menarik kawan
December 29, 2011 4:16 PM
thanks infonya gan...........
klo udh trus g5na bkin sub menunya?
:)
December 31, 2011 3:10 PM
maksih banyak gan infonya ok banget smoga blog anda tetap jaya di udara heheheheheh
January 4, 2012 10:03 PM
tanks bgt gan sya cari2 nih hehe
January 4, 2012 10:46 PM
trims banget gan.. infonya sangat membantu
suskses sll untuk anda Gan....
January 7, 2012 5:00 PM
Bkin sub menunya gimana mas? thank, dbales diemail saya saja
January 9, 2012 2:12 PM
makasih sobat, dicoba dulu..
January 20, 2012 11:48 PM
betul2 sangat bermanfaat bro....
scriptnya betul2 bermanfaat trims ya bro....
January 22, 2012 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 12:41 AM
Terimakasih Gan.... Berhasil..........
February 2, 2012 3:36 PM
cara ngedit kode CSS nya diedit menjadi gimana gan..??
tolong bantuannya...
February 5, 2012 7:11 PM
Infonya menarik....perlu di kembangkan
February 7, 2012 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 9:41 AM
Thanks for skripnya, membantu sekali...
February 18, 2012 8:51 PM
tanks bgt gan infonya membantu skali
February 19, 2012 3:02 PM
masih belum paham dengan link labelnya, bisa beri pencerahan? tolong