Membuat Menu Horizontal Sederhana di Header
Beberapa saat yang lalu ada yang menanykan bagaimana membuat menu di bawah judul blog seperti yang ada di Belajar Ngeblog di BLOG ini. Sekarang baru ingat dan sempat menjawabnya. Layaknya header, adalah salah satu tempat yang sering dilihat. Ada judul blog kita, dan bisa kita beri menu di bawahnya, seperti yang saya lakukan.
Sekarang kita akan belajar membuat menu horizontal yang sederhana di header. Yang perlu ditekankan adalah kesederhaan itu. Karena memang menu itu saya buat hanya menggunakan kode HTML yang sederhana berupa deretan link-link. Menu navigasi yang mudah akan memberikan pengalaman yang baik bagi pembaca blog kita. Menu horizontal ini saya buat terlebih dulu dengan menambahkan elemen gadget di header. Jika sudah, langkah selanjutnya adalah sebagai berikut.
Cara Membuat Menu Horizontal Sederhana di Header
1. Pilih Rancangan
2. Klik Tambah Gadget yang ada di Header
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
5. Teks yang berwarna hijau adalah URL yang dituju sedang yang berwarna merah adalah teks yang tampil. Kita bisa menambahkan lebih banyak link sesuai lebar header dan link yang ingin kita tampilkan, dengan menambahkan kode yang tercetak miring setelah | yang terakhir.
6. Simpan jika sudah selesai.
Sekarang kita akan belajar membuat menu horizontal yang sederhana di header. Yang perlu ditekankan adalah kesederhaan itu. Karena memang menu itu saya buat hanya menggunakan kode HTML yang sederhana berupa deretan link-link. Menu navigasi yang mudah akan memberikan pengalaman yang baik bagi pembaca blog kita. Menu horizontal ini saya buat terlebih dulu dengan menambahkan elemen gadget di header. Jika sudah, langkah selanjutnya adalah sebagai berikut.
Cara Membuat Menu Horizontal Sederhana di Header
1. Pilih Rancangan
2. Klik Tambah Gadget yang ada di Header
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<b><div style="text-align: center;"> <a href="http://kurniasepta.blogspot.com">Home</a>| <a href="http://kurniasepta.blogdetik.com">Blogdetik</a>| <a href="http://kurniasepta.wordpress.com">Wordpress</a>| <a href="http://kurniasepta.multiply.com">Multiply</a>| <a href="http://kurniasepta.posterous.com">Posterous</a>| <a href="http://twitter.com/kurniasepta">Twitter</a>| <a href="http://www.facebook.com/kurniasepta">Facebook</a>| </div></b>
5. Teks yang berwarna hijau adalah URL yang dituju sedang yang berwarna merah adalah teks yang tampil. Kita bisa menambahkan lebih banyak link sesuai lebar header dan link yang ingin kita tampilkan, dengan menambahkan kode yang tercetak miring setelah | yang terakhir.
6. Simpan jika sudah selesai.
keren;)
BalasHapusapanya yg keren?
HapusNice posting sob...
BalasHapusmakasih banyak yahhhh,,,,,
BalasHapusinfo yang sangat membantu, thanks for sharingnya, salam kenal ya..
BalasHapuskeren gan, boleh dicoab ni
BalasHapusakun premium filesonic dll. gratis
linux shop
software full, hp, tips dan trik, antivirus, game
http://slovech.us
akan lebih mudah kalau menggunakan fasilitas laman bro.
BalasHapusterimakasih gan ^^
BalasHapusjangan lupa berkunjung ke juandimas22.blogspot.com
thx
wah tulisannya ok
BalasHapussipp,, bakalan ane coba.. makasii
BalasHapusmANtAp gaN MAMPIR KE blog ane GAn http://bebas212.blogspot.com
BalasHapusberkunjung sob..salam blogger
BalasHapussukses selalu yah..:)
Salam Blogger dan Semoga Sukses Selalu.
BalasHapusmakasih gan, keren banget dah (y)
BalasHapusTanks gan, mantep, gimana jika isi halaman utamanya langsung muncul?
BalasHapusbos, kenapa kalo di klick buka new windows?
BalasHapus@ahmad irfan: makasih, sudah diperbaiki
BalasHapusjangan lupa mampir ke nasihatnet.blogspot.com.....kalian perlu nasihat gan
BalasHapusInfo mantap mas bro
BalasHapussip,, deh_
BalasHapusmakasi ye gan??
makasi pelajarannya.
BalasHapusberkunjunga :)
BalasHapuspostingan keren semuanya ....
BalasHapuskeren blog nya, banyak yg follow
BalasHapushttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif
BalasHapuskeren lansung dipasang di www.tiketbox.co.cc
BalasHapuscek it out gan .. ;)
thx infonya:) sudah dicoba dan berhasil:) terimakasih
BalasHapusmakasih banyak master...
BalasHapusq nyoba trik2 laen yang lebih rumit ngak bisa...tp ni trik nya simple tp sukses..thanks
di coba dah
BalasHapus:D
thanks bro..met kenal....
BalasHapuswebsite terbaru seperti WIKIPEDIA.ORG kunjungi www.okiputerautomo.co.cc
BalasHapusMau diterapkan mas, tapi di page elements blog ane kok bad request (error 400) ya mas? bisa kasih solusi mas? trims
BalasHapustrims mas. membantu sekali =)
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusMantap. .berhasil
BalasHapusfollow back ya catatanrizkyaburizal.blogspot.com :D
kalau memper besar hurufnya gimana...?
BalasHapus;;)
mantaf agan...sukses sll, izin ambil!!!
BalasHapusterimah kasih atas script untuk blogger nya
BalasHapuswah makasih info nya boz langsung aku cobain yach...nex time mampir ke blog ku karina foto collection.blogspot.com
BalasHapusmakasi infonya gan... 10 jempol buat nt.
BalasHapusmampir ke blog gw gan...!!!
BalasHapus;)) ;;) :D ;)
jazakallah tipsnya sobat...:))
BalasHapussangat bermanfaat
BalasHapusSangat bermutu ni blog....
BalasHapusinformasinya sangat berkesan
BalasHapuswah..gampang ya..keren jg itu
BalasHapusbagaiman ngerubah warnax gan?
BalasHapusWah sebagai pemula di dunia blogger masih bingung gan. Entar tanya lagi lah ya. Padahal dah ngebet mau bikin menu horizontal ini. Ini memang lain sama wordpress ya? Di wordpress lebih gampang, tapi fasilitas lain lebih minim, atau saya yang nggak ngerti saja ya?
BalasHapusgan gimana caranya kalo mau masukin kode html ke laman?
BalasHapusane gak bisa pake cara yg otomatis :(
maksih gan sukses di aplikasikan, klau untuk merubah ukuran hurufnya gimana gan?..maaf blogger pemula!
BalasHapusijin nyoba yah sob.. terima kasih tutorialnnya yah...
BalasHapusMakasih Atas Sharing Nya Bermanfaat Banget ! =))
BalasHapusmantap ni gan, saya baru aja bikin satu blog di blog detik, maju blogger indo....
BalasHapusgan ketika saya mengganti templete keluar peringatan seperti ini:Maaf, tetapi kami tidak dapat menyelesaikan permintaan Anda.
BalasHapusBila melaporkan kesalahan ini kepada Dukungan Blogger atau di Grup Bantuan Blogger, harap:
Uraikan apa yang Anda lakukan ketika menemui kesalahan ini.
Berikan kode kesalahan berikut.
bX-pp9c9u
Informasi ini akan membantu kami melacak dan mengatasi masalah Anda! Maaf atas ketidaknyamanan ini.
Apa maksudnya gan makasih,
keren banget...sederhana dan mudah,,makasih gan atas tipsnya..semoga sukses
BalasHapussaya mau coba pasang di blog saya yang baru.
BalasHapus@DIIKA SCURITY: coba agan log out dulu, setelah itu bersihkan riwayat/history browsingnya dan keluar dari layar browsing (chrome, ffox, opera). Setelah mulai browsing lg dan buka akun bloggernya gan. Pasti bisa.
BalasHapuskejadian seperti itu dikarenakan sebelumnya agan buka akun blogger yag lain sehingga masih meninggalkan riwayat browsing (cache).
Mantap bro..
BalasHapusThx yo..
Jgn lupa kunjungi http://voip2012.blogspot.com
Lumayan sih bro.. mampir lapak ane di www.equalztnero.com ya.. kita tukeran link, :)
BalasHapusaku sudah coba tapi kok barisnya vertikal, bagaimana caranya agar tampak horisontal memanjang, lalu ngisi teksnya bagaimana? pertanyaan terakhir gimana caranya ngisi blog dengan musik biar orang yang mengunjungi kita pada enjoy
BalasHapusthank you
Mantep banget deh.. Lancar banget udah lama pake tips dari blog ini.. :)
BalasHapusudah di coba lanfgsung hasil y sukse
BalasHapuskeren gan
BalasHapusakhri nya bisa juga buat nya
Nice pos Gan :D
BalasHapusJangan lupa kunjungannya Gan
BalasHapusCara Membuat Blogroll Model Scrollbar
patut dicoba
BalasHapus=))
BalasHapus:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( =))
BalasHapushuuumkt begitu tah caranya
BalasHapusProduk dijamin asli
BalasHapusTILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL
Dijual
Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-
Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-
Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-
Ready Stock !
Blackberry Curve 9320
Rp.700.000,-
Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000
Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-
Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000
Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-
Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-
Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-
Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-
Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-
Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-
Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-
Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000
Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-
Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000
Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-
Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-
Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-
Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000
Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000
Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000
Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000
Trimakasih pencerahanya...
BalasHapusSatu lagi gan.. Trus cara Ngisi menu tersebut dengan artikel gmn gan? Trim's sbelumnya.
Keren Om :* Saya Suka Jgn Lupa Mampir
BalasHapusHardiansyah Putra6.Blogspot.com
Ini yang saya cari selama beberapa hari ini. Semoga nilaiku bagus.
BalasHapusIni dia yang dicari-cari infonya, makasi Min, ntar mau langsung dicoba, new comer pake yang simple dulu biar gak puyeng ^_^ .. Skali lagi Thx ya for sharing this tutorial..
BalasHapusmakasih boss info'a
BalasHapus