Buat gambar header pkek LINK dan bisa di klik

Assalamualikum wr wb siang jumat yang berbahagia ini saya mau membuat post yang agak2 bermutu dikit. Yaitu, Gimana sih caranya buat header2 pkek berbagai link gitu??? yap...sebelumnya mari kita lihat seperti apa sih maksudnya.

Taraaaa taraaaa

Yap, sebagai contoh bisa kita lihat di headernya kak bena...disitu terdapat twitter, Facebook, Youtube yang di jadikan satu gambar...dan itu ada link nya loh klo di klik..hebatkan...

"Tumben post lu kali ini turoial mad? biasanya kan koleksi GALAU" Sialan!

Sebenarnya Tutor ini udah di kasih tau kak bena melalui FAQ nya...mumpung kak bena cuma ber tahu lewat kata2 jadi agak susah dimengerti mungkin ya...ya udah kali ini gw mau memperjelasnya dengan memberi SCREENSHOOT nya...selamat menyaksikan

TUTORIAL MAD=GILA

"Apa sih yang gw di persiapin?" 

ADOBE PHOTOSHOP
ADOBE DREAM WEAVER
DAN IMAJINASI MENGGAMBAR HEADER (klo gak ada sofwarenya download sendiri ya)

"Trus Mad?"

 Mari kita membuat gambarnya terlebih dahulu melalui PHOTOSHOP...hasilnya tara traaaa

"Loh? Jadi yang buat header bena elo ya mad?" BUKAN GOBLOK! gw males buat header...ini kan cuma Tutor doang...  "iya gw heran aje soalnya......." (motong) Ngomong lagi gw tabok!

"Iye deh mad, trus apaan lagi selanjut nya mad?"

Kita buka DREAM WEAVER 

Pada Halaman depan bagian Create New pilih HTML...setelah kita klik HTML maka keluar seperti gambar di bawah ini...

Pada bagian Samping ada tulisan insert pilih IMAGES: IMAGE...
"mana mad? mana? gak kelihatan" gambar gw kekecilan ye...hehehe..bentar.

Tuh yang gw kasih petak merah...yang perlu di klik...Nah setelah klik bagian IMAGES maka keluar jendela tempat dimana lu menyimpan gambar hasil karya lu tadi....langsung saja ane klik tempat header bena tadi...Lalu setelah lu klik tempat gambar tadi disimpan maka akan keluar kotak seperti di bawah ini...

"Ups! apaan itu mad?" Jangan Khawatir...biarkan kosong..langsung aja klik ok...Lalu pilih Bagian design (di atas yang di antara code, Split, design...) Tepatnya disini...

Tuh yang gw kasih petak merah....itu yang kudu lu pilih...setelah lu pilih maka akan terlihat gambarnya seperti di bwah ini. 

Setelah itu mulai deh kita kasih link pada gambarnya...caranya KLIK yang di pojok kiri yang ada gambar buletan, petak, poly gitu...tepatnya kyk gini...

yang gw kasih kotak merah itu yang kudu lu pilih...terserah mau yang petak, buletan, ato yang poly...karena ketiga nya sama2 berperan memberi bagian header yang mau di kasih link...anggap lu udah milih yang petak aja...maka lu arahkan ke bagian mana yang lu mau kasih link...lihat contoh di bawah ini...

Contoh gambar di atas yang bagian twitter pada header bena tertutup kotak warna biru menggunakan petak tadi...gw arahkan ke bagian yang perlu di kasih twitter pada bagian itu...maka jika sudah tertandai seperti kotak biru itu...gw coba kasih alamat url nya si bena..lihat contoh di bawah ini.

Gambar di atas merupakan bagian bawahnya gambar bena tadi...lu kudu mengisi link yang udah lu tandai di gambar header tadi...lihat disana gw udah ngasih link twitternya si bena...dan pada bagian TARGET gw pilih _Blank..kenapa? ya karena klu lu klik maka akan terbuka tab baru yang isinya twitter si bena :-) ohy a, untuk bagian ALT gw kosongin aje. untuk memberi pada bagian gambar link selanjutnya...maka lu pilih aja kotak, bulat, dan poligon tadi secara berulang2... :-) selanjutnya setelah selesai mari kita save as...

Kasih nama file yang mau disimpan...untuk type file yg mau di save...harap milih yang ALL DOCUMENT :-) 

Setelah di save maka dia akan menjadi file dibawah ini...

Lalu klik 2 kali pada file untuk melihat preview apakah gambar tersebut udah ada linknya apa belum...maka terbuka gambar tadi..coba arahkan cursor ke tempat yang di kasih link tadi...maka ada linknya pada pojok kanan bawah pada mozilla nya.

Untuk membuat gambar pakek link selesai sudah.. "gimana caranya agar kita masukan ke blog kita mad?" Gampang...ayo ikuti saja :-) 

CARA MENARUH GAMBAR KE BLOG

Setelah gambar selesai di buat...maka mari kita coba masukin ke blog kita...caranya buka file mozilla di atas tadi (yang gw simpan dgn nama BENA HEADER). Klik kanan lalu pilih open with pilih notepad. Kenapa pilih notepad? karena kita akan mengambil kode html nya...klo sudah di buka open with notepad maka akan terlihat seperti gambar di bawah ini. 

Selanjutnya Lu ubah kode dalam notepad ini yang bagian <img src="menubar.png" menjadi <img src="ALAMAT HOSTING BENA TADI" untuk mengambil kode hosting gambar caranya lu upload gambar bena tadi ke hosting2 gambar seperti PHOTOBUCKET, IMGUR, TINYPIC, IMAGESHACK, dll....lihat gambar dibawah (gw makek IMGUR.com)

Itu gw udah block dan copy...lalu kita PASTE ke kode pada notepad tadi...di bagian <img src="menubar.png" yang kode gambar gw ambil berbunyi (http://i.imgur.com/8BuEE.jpg ) maka akan menjadi <img src="http://i.imgur.com/8BuEE.jpg" ...setelah selesai lu kudu copy semuanya kode di notepad yang udah lu tambahin kode gambarnya tadi ke TATA LETAKNYA BLOGGER... 

oh ya gw mau kasih tw dikit...sebenarnya si bena dia kagak naruh gambarnya di bagian header..tapi di bagian header..tepatnya pada gambar di bawah ini...

posisi headernya dia hilangin....lu kudu pilih ADD GADGET di bawah header itu...trus lu pilih gadget HTML/JAVASCRIPT...Paste deh kode yang di notepad tadi... :-) 

Dan sekarang Blog lu headernya udah ada link pada gambarnya...bagi yang belum mengerti...koment aja di bawah post ini...Nanya nya yang jelas ya...sejelas mungkin biar gw ngerti..hehehe...selamat mencoba.. .