Yogaware blogspot , Kali ini saya akan mencoba menulis tutorial / cara mudah bikin menu horizontal di blogger. Sebenarnya ada banyak cara untuk membuat menu horizontal di blogger, sehingga saya bingung mau menuliskan tutorial menu horizontal blogger yang bagaimana.
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.

Panduan membuat menu horizontal blogger
- 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)
Keterangan.<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.
mas yoga ane mau nanya thema yang mas yoga pake di blog ini apa.?kog bagus bener putih mengkilat.. :D
ReplyDeleteklo template aku cari di http://btemplates.com/
ReplyDeleteklo tulisan yogaware blogspot di atas yg mengkilat aku buat di http://cooltext.com/
hi!,I love your writing so much! percentage we be in contact more about your post on AOL? I require a specialist on this house to solve my problem. May be that's you! Looking forward to peer you.
ReplyDeleteAlso see my web page - Preisvergleich Strom
Agan, ane jadi pengikut blognya.... ane nunggu followbacknya agan ya ke blog ane www.tempat-bersinggah.blogspot.com. makasih gan ditunggu blogwalkingnya..
ReplyDelete