Membuat Menu Bar keren diblog

Lo tau menu bar? menu bar itu seperti diatas postingan gue ini yang bertuliskan : Home | Contact | About ..... Nah biasanya blog pada umumnya meletakkan menu bar diatas ya kayak gue sekarang, seperti bawaan template diblogger ada banyak tuh. Tapi sekarang gue mau ngasih cara bikin menu bar disamping dengan gaya yang berbeda,, ya setidaknya bisa bikin orang yang ngeliat "eh, bijimana nih caranya bisa kayak gini".


Dulu, template gue kayak yang diatas, sekarang mah lebih imuut-imuut smooth gitu.

nih gue kasih tau, bikin menubar disamping gitu.

Pertama-tama bikin dulu desain menu barnya, ukuran disesuaikan dengan lebar yang akan dipasang di blog. Misalnya : Lo ingin memasang menubar didaerah sidebar seperti gambar yang gue contohkan diatas, berarti ukurannya disesuaikan dengan ukuran sidebar, tapi kalau pengen menubarnya berada diatas ya sesuaikan lebarnya dengan ukuran blognya. 

Gue menggunakan corelDRAW X6, supaya apa? biar keren aja. wuakaka :v photoshop udah terlalu mainstream.

Buka corelDRAW nya ...



Masukkan Ukurannya, ukuran yang gue gunakan :  228x314px (Sesuaikan dengan blog lo)

Gunakan Text tool yang gambarnya huruf urutan ke 11 dari atas. Bikin deh kata-kata yang kamu pengen kasih di menubar.


Terus bikin deh tulisan yang pengen dibuat, ini tergantung kreativitas lo mau ditambah logo kek, diganti FONT kek, apa gitu terserah! yang penting jangan foto mantan! bakalan error!

Udah siap? punya gue kayak gini :



Terus kalau di corelDRAW kalian tekan ctrl+E untuk export atau bahasa gaulnya disimpan ke format lain. format yang gue pake PNG ! kalau mau pake format JPEG juga boleh, terserah! yang jelas gak ada format mantan! (--lagi-lagi mantan)



Setelah disimpan dan diexport, lo buka photobucket.com , login. Kalau belum punya akun segera daftar! entar keduluan mantan. Setelah mendaftar dan masuk kesana, upload desain menu bar yang udah kalian buat tadi. Gimana oke? 

cara uploadnya gimana?

pulang kampung aja sana! caranya begini :



Noh ada tulisan upload lo pencet dah, jangan salah pencet nanti ngilu :p . 

Pilih gambar yang dibuat tadi dimana lo nyimpen, dah tuh upload deh, kek ngupload foto pacar ke facebook juga, caranya sama. hehe. 

apa ? nggak punya pacar? oke sorry.

Kalo udah diupload, lo pilih gambar yang lo upload ke photoburket barusan, terus liat bacaan direct, copy semua link itu pastekan aja ke notepad atau stickynote dulu, atau pastekan ke microsoft word, kalau gak bisa dipaste, catat aja di kertas pake pena, kalau gak ada kertas, catat dipaha, kalau gak ada paha, catat di paha paca... eh sorry.

COPY YANG DIDALAM KOTAK MERAH

setelah itu buka dreamweaver kamu... belum punya? download dulu gih.cari di google banyak.

kalo udah buka dreamweavernya, terus pilih HTML.



Kok keluarnya kode-kode gini?



nah itu tandanya lo kurang peka terhadap kode dari gebetan,makanya jomblo terus! 

disamping kode ada split dan design, lo pilih design ! yang didalam kotak merah, pilih design, nanti jadinya seperti ini :


Nanti tuh ada kotak-kotak gitu, kalau gak ada berarti lo nggak keren! kalau nggak ada woles aja santai, gak ngaruh kok. Kalau udah dipilih ke design atau udah dipencet tombol design. 

selanjutnya tekan ctrl+Alt+I atau Insert--> Image. Masukkan gambar yang udah dibuat di corelDRAW tadi. ngerti? nggak ya? berarti sama. kalau ada muncul perintah-perintah apa gitu. OK AJA!! ABAIKAN! BAYANGKAN SAJA ITU ADALAH MANTAN!

Setelah itu pilih tool seleksi, nah yang sering main photoshop pasti tau nih, dibawah kiri. ada tool-tool seleksi kayak diphotoshop. Pilih sesuai kehendak kamu mana gampangnya aja, setelah itu seleksi bagian yang pengen dikasih LINK! Jadi bagian yang lo seleksi itu nanti bisa diklik-klik gitu.



kurang lebih kalau udah diseleksi bakal kayak gini :


Kemudian ganti pointer kamu ketool gambar panah warna hitam disamping tool seleksi tadi. 

Dan mulailah klik satu-satu yang kamu seleksi, misalnya gue ngeklik logo semutboy yang kece itu, kemudian isi link yang akan dituju kayak gini (didalam kotak merah) :





Untuk target! Pilih _self !

_Self  = fungsinya kalau diklik dia akan mereload halaman itu saja.
_Blank = kalau diklik dia akan membuat tab baru. 

yang lainnya gue nggak tau! puas?
Lakukan kearea yang udah diseleksi lainnya.

Setelah kalian menyeleksi - mengisi link - mengisi target - kemudian save lah. Seperti biasa tekan ctrl+s atau kayak ngesave tugas-tugas sekolah lah. kali ini bukan ngesave poto mantan. Setelah disave, lo buka hasil save tadi! Itu masih format html. 

Klik kanan -- properties -- change -- terus pilih notepad.



Setelah programnya di change, atau diganti dengan notepad, Klik dua kali maka akan keluar kode seperti ini :



Nah tulisan "menu.png" atau tulisan setelah <img src=" ...." itu diganti dengan direct yang kalian copy di photoburket tadi yang gue suruh catet dipaha pacar. oke udah? apa! lupa? balik keatas! dan baca ulang!

Setelah diganti dengan direct link dari photoburket, tekan ctrl+A di notepad kode-kode itu, tekan ctrl+C . atau lebih singkatnya copy semua kode yang udah diganti dengan direct tadi dan buat gadget/widget baru diblog dan pastekan kodenya disana! 

tambah gadget HTML/JAVASCRIPT

PASTEKAN KODE

JANGAN LUPA! TULISAN <title>Untitled Document</title> DI HAPUS, KALAU ENGGAK NANTI ADA TULISAN DIATAS WIDGET KALIAN. KALAU UDAH TINGGAL SAVE. DAN JRENG-JRENG !!




SELAMAT MENCOBA!
Kalau ada pertanyaan silahkan isi dikolom komentar atau :

kirim email ke : imelsemut@gmail.com
mention ke : @semutboy

Mau request tutorial apa? cara agar sidia cepat putus sama pacarnya? next time !!

19 Cibiran

Nice template barunya yan.. :') Nice nice deh! 10 jempol

Balas

Aih, bakalan makin kece aja nih:3 makasih bang.

Balas

thank you brother :*

Balas

hehehe iya makasih :3

Balas

Dw hahahha belom pernah make.. dimana-mana pink nih jadinya hahahhaa

Balas

Sebenernya lebih gampang pake yang default dari blogger, cuman dipindahin ke sidebar aja, hasilnya nanti sama. Anyway, template yang ini lebih 'fresh', mut. Mungkin sidebar-nya ntar disejajarin aja sama lebar menu-nya. Biar makin kece..

Nice tutorial, mut!

Balas

kerennn...terimakasihhh mut tutornya ..bookmark dulu.. :D

Balas

oke sip!! makasih ya

Balas

makasih pin , oke bener tuh heheh udah diperbaiki :D

Balas

GOKIL!! gue cari-cari yang kaya gini nehhh,, udah mau mejemin mata jam segini, ketemu! bookmark dulu dah~ thx berat sob~

Balas

kalo cara ngasih gambar semut boy yg di bagian bawah halaman blog gimana mut? ajarin dong...

Balas

hehehe thank you sob :)

Balas

oke next post ya :)

Balas

bro kalau buat dropmenu tapi pake desain kaya gini gimana ye? hehehe,.. thx sob

Balas

ada tutorial yg lain kaga ? :D

Balas

cantik banget template barunya. Nice :D

Balas

pemiliknya nggak sekalian nih :p

Balas

akhirnya gue nemu juga tutorial cara ngebikin menu bar, makasih bro :)

Balas

Ini kolom komentar, bukan formulir pendaftaran jadi pacar aku ya!

Copyright 2014 Semutboy

Concept by Apriansyah. Designed by Jang!