HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Senin, 27 April 2009

Cara Membuat Horisontal Menu Bar Pada Template Blogspot

How to create Horizontal Menu Bar on Blogspot's Template
Hal pertama yang harus dilakukan sebelum memasang horisontal menu bar pada template blogspot adalah melihat apakah template yang dipakai itu sudah memiliki kolom Tambah gadget dibawah kolom Header. Jika belum berarti harus dilakukan sedikit modifikasi pada HTML template untuk bisa menampilkan kolom Tambah gadget dibawah header. Jika sudah ada kolom Tambah gadget tersendiri di bawah header, silahkan langsung ke no.2.

temp0


Cara membuat Horisontal menu bar pada Template Blogspot adalah sebagai berikut:
1. Modifikasi HTML template agar mempunyai kolom Tambah Gadget dibawah header.
Untuk mengetahui cara membuat kolom Tambah Gadget dibawah header template bisa klik disini.
2. Buatlah posting baru untuk halaman yang ingin di link ke horisontal menu bar. Menunya misalnya Home, About, Contact. Link yang nanti akan digunakan di horisontal menu bar adalah URL setiap posting itu. Cara ini (no. 2 dan 3) aku dapat dari Real Life.
Catatan:
Untuk menu Home, link yang gunakan adalah URL alamat blog.
Untuk About, link yang digunakan URL Aboutbox atau halaman lain jika dibuat halaman tersendiri.
Untuk Contact, link yang digunakan misalnya mailto:abcd@gmail.com
Bila link-nya akan menuju ke halaman tersendiri, untuk mendapatkan linknya bisa klik kanan pada judul dan klik "copy link location".
Bila link-nya menuju pada halaman yang mempunyai label yang sama, untuk dapatkan link-nya bisa klik kanan pada label yang ada dibawah posting dan klik "copy link location".
3. Login ke Blogspot--> Tata letak-->Elemen Halaman
Klik link Tambah Gadget dibawah header, lalu pilih HTML/JavaScript gadget.

elemen halaman

tambah gadget

Masukan kode berikut ke dalam kolom HTML/JavaSricpt:

<a href=http://alamatblog.blogspot.com>HOME</a><a> | </a><a href=http://alamataboutpageURL>ABOUT</a><a> | </a><a href=http://mailto:abcd@gmail.com>CONTACT</a><a> | </a><a href=http://alamattipsURL>TIPS</a>

konfigur HTML

Klik tombol simpan. Sekarang blog sudah memiliki horisontal menu bar dibawah header.
Catatan:
* Ganti kata yang berwarna hijau dengan nama menu yang dinginkan.
* Ganti kata yang berwarna merah dengan alamat URL sesungguhnya.
*****
Selamat mencoba.

Posting Dengan Kategori Sama



17 komentar:

Erwin mengatakan...

trimakasih atas artikelnya. dari sekian banyak artikel yg sejenis, hanya disini yang bisa aku pahami dan langsung jadi... makasih banyak atas ilmunya.^_^

afdil mengatakan...

thnx. works nicely

mampir balik ya gan =]

Mega Sentra mengatakan...

terima kasih atas ilmunya..

prosesnya mudah dimengerti dan langsung jadi.. ga kaya yang laen ribetttttt...

i like it

Anonim mengatakan...

bagus banget KK....
kalau webnya dihargai 10 juta...
jangan mau ya KK...
kemurahan untuk hobby dan keringat yang sudah keluar...
harusnya 300 juta

Christhoper mengatakan...

berhasil gan !! fifamax.blogspot.com

Sita mengatakan...

makasih ya infonya

Sita mengatakan...

saya mau tanya itu menubarnya kalo mau di edit dan di variasikan gimana caranya?

ferball mengatakan...

mantap....
thanks....

Unknown mengatakan...

makasih buat infonya gan...
gan gimana bikin menu navbar yang multi ...
mohon pencerahanya... ^_^

Patrisia mengatakan...

Makasih atas informasinya yg berharga. Berkat artikel ini, aku berhasil membuat menu bar horisontal pada header sekaligus bisa membuat atau menambah gadget pada header blogku. Cuman sekarang msh harus belajar lg bgm cara mengisi menubar horisontal yg sdh sy buat. Mampir ya ke blog patrisia. trims

Unknown mengatakan...

salam blognoler, mantab banget sob artikelnya.langsung saya praktekkan ya..kunjung balik blog saya sob..

mc2 aplikasi mengatakan...

artikelnya mantab sob, mudah dipahami dan gampang dipraktekkan. skrg blog saya udah aplikasi menu bar sesuai petunjuk diatas, pokoknya sangat ngebantu banget buat saya. kunjungi juga blog saya y sob, ditunggu sarannya.

Unknown mengatakan...

bank kalo cara gedein tulisannya kyk mn ???

BangNian mengatakan...

untuk menebalkan tulisanya, tambahkan kode <b> diawal kata dan kode </b> diakhir kata atau kalimat yang ingin ditebalkan

Guru MIMU mengatakan...

aku nemu ilmu..halal gan ya dicontek..insya-Allah berkah..trims. Salam kenal aja...

Unknown mengatakan...

wuih, mantap n simpel tapi berhasil... keren sob, salam kenal..

kreativitas mengatakan...

thanks banget atas informasinya.

Posting Komentar

Related Posts with Thumbnails