Assalamualaikum..
Sebuah Header bukan saja menunjukan apa nama dan deskripsi dari blog kita, Header juga bisa menjadi salah satu daya tarik utama sebuah blog bila kita mampu memaksimalkannya dengan baik. Header yang bagus, unik, lucu, gokil dan tidak pasaran tentu saja akan membuat peng
unjung tertarik dan bisa saja mereka menjadi pembaca setia kita :).
Kali ini kita akan membahas bagaimana cara membuat Header blog yang berisikan Link. Langsung saja tanpa berbasa - basi :)
Yang kita butuhkan adalah 2 software dan 1 situs yang sudah tidak asing lagi ditelinga, Adobe Photoshop (atau bisa software photo editor lainnya), Dre
amweaver (Untuk menambah link pada gambar), Photobucket (Untuk media penyimpanan gambar).
1. Pertama - tama buatlah dulu gambar yang akan sahabat jadikan header. Sebagus dan sekreatif mungkin, dan sesuai dengan selera sahabat :). Oh iya, janga
n lupa untuk menyesuaikan ukuran gambar dengan ukuran header sobat, karena jika tidak sesuai ukurannya maka hasilnya nanti juga kurang baik (gambar bisa terpotong).
misalnya saja gambar ini yang akan menjadi header blog saya :
Simpan gambar tersebut dan keluar saja dari photoshop karena kita hanya membutuhkan photoshop untuk "mengotak - atik" gambar header kita :) .
2. Buka situs www.photobucket.com lalu sign up dan ikuti langkah yang ada jika sahabat belum mendaftar, jika sudah tinggal klik sign in -> upload -> sele
ct file from my computer -> pilih file header yang sudah disimpan tadi. Tunggu proses upload, dan jika sudah selesai maka hasilnya akan seperti ini :
Perhatikan bagian yang saya lingkari merah itu, nantinya direct link tersebut yang akan kita gunakan.
3. Sekarang kita tinggalkan dulu photobucket dan masuk ke dreamweaver. Klik File -> New -> HTML -> Klik create. Maka akan muncul jendela seperti ini :
Letakkan kursor setelah <body>, setelah itu klik insert -> image -> pilih gambar header yang sudah kita simpan tadi -> bila ada pilihan klik OK terus saja.
maka hasilnya akan seperti ini :
Lalu klik pada gambar, dan akan muncul rectangular hotspot tool dan oval hotspot tool pada bagian pojok kiri bawah. Gunakan kedua tools tersebut untuk menentukan area mana yang akan kita jadikan link.
Misalnya saya menggunakan rect
angular hotspot tool untuk membuat gambar ikon facebook menuju akun facebook saya. maka caranya klik rectangular hotspot tool -> blok bagian gambar facebook -> pada kotak link masukkan url alamat yang dituju, sebagai contoh saya masukkan url yang menuju akun facebook saya -> pada target saya pilih "_blank" (agar link dibuka pada tab baru) -> pada alt masukkan kalimat / info yang akan muncul bila kursor diletakkan diatas gambar yang kita beri link.
4. kalau sudah semua bagian gambar yang kita inginkan diberi link, maka langkah selanjutnya tinggal menyimpan hasil kreasi kita tersebut. caranya tinggal klik file -> save as. Nah, hasilnya nanti berupa file .html, buka file tersebut dengan notepad dan hasilnya nanti akan seperti ini :
Lihat pada <img src="Untitled-1.jpg"... nah Untitled-1.jpg tersebut merupakan alamat gambar, ganti Untitled-1.jpg dengan alamat direct link yang telah kita bahas pada langkah 2 tadi. sehingga menjadi seperti ini bila saya contohkan milik saya :
<img src="http://i1070.photobucket.com/albums/u498/starvanzs/headerlink.jpg"....
5. Sekarang kita masuk ke blogger. pada dashboard klik design -> pada page elements klik add a gadget -> pilih HTML/Javascript -> Pada content masukkan kode yang ada pada notepad tadi mulai dari <img src... sampai </map> -> klik simpan
6. Drag widget Header baru yang telah kita buat tadi tepat dibawah header lama yang ingin kita gantikan.
7. Klik Edit pada widget Header lama kita dan pilih remove untuk menghapusnya. Klik save.
Selesaiiii.... haaaaaaahh :D
capek juga rasanya membuat tutorial yang panjang ini. semoga bermanfaat bagi sahabat semua :)
NB : Apabila ada pertanyaan silakan tinggalkan di komentar.
Salam hangat,
Irfan
