Cara Membuat Header Blog Berisikan Link

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 pengunjung 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), Dreamweaver (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, jangan 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 -> select 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 rectangular 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

Berlangganan Artikel Referensi Kita

Masukkan alamat email Anda:

Related Post:

+ comments +46comments

18/9/12 15:46

info menarik sob.. lanjutkan

Terimakasih BoWo atas Komentarnya di Cara Membuat Header Blog Berisikan Link

sangat membantu....:D:D

Terimakasih zulkifli mahmud abbas atas Komentarnya di Cara Membuat Header Blog Berisikan Link
2/10/12 20:09

makasih ya sob infonya...

Terimakasih Zaki Muttaqin atas Komentarnya di Cara Membuat Header Blog Berisikan Link
4/10/12 18:43

sebelumnya makasih sob atas sharingnya..
tapi kalau mau meletakkan script gambar tadi persis di posisi header gimana caranya gan..

Terimakasih game atas Komentarnya di Cara Membuat Header Blog Berisikan Link
14/10/12 16:15

Terima kasih semua atas kunjungannya :) semoga bermanfaat.

@game : untuk menjadikan header baru yang kita buat bisa menggantikan header lama, kita tinggal menghapus header lama kita dan merubah posisi header baru tepat pada posisi header lama tersebut.

hal yang perlu diperhatikan sebelum menghapus header lama adalah biasanya secara default widget header itu dikunci, untuk mengatasinya kita bisa mencari kata "lock" pada edit html, lalu cari yang mengandung unsur header. Pasti nanti bentuknya lock=true. ganti saja dengan lock=false. kalau sempat akan saya buat post nya dikesempatan yang akan datang.
semoga bermanfaat :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Header Blog Berisikan Link
23/10/12 16:59

sudah di coba thank's ya bro

Terimakasih aries prayoga atas Komentarnya di Cara Membuat Header Blog Berisikan Link
3/11/12 22:18

thanks sob

Terimakasih Living Things atas Komentarnya di Cara Membuat Header Blog Berisikan Link
6/11/12 07:07

kok pada saat disave gak bisa disave ya?
padahal locknya sudah saya ganti false. savenya emang lama atau gimana? terima kasih :)

Terimakasih Eriska Triana P atas Komentarnya di Cara Membuat Header Blog Berisikan Link
7/11/12 05:12

aduhh, saya blum selesai blajar html blum bsa jadi

Terimakasih anisa satriana atas Komentarnya di Cara Membuat Header Blog Berisikan Link
10/11/12 20:49

thxs mas bro

Terimakasih wirid galih atas Komentarnya di Cara Membuat Header Blog Berisikan Link
27/11/12 05:38

wah masih ada orang yang mau memberikan ilmunya ,mudah -mudahan mas Irvan Basuki diberi panjang usia sehingga ilmunya bisa di man fa'atkan pada orang banyak..

Terimakasih bststudio atas Komentarnya di Cara Membuat Header Blog Berisikan Link
29/11/12 01:40

thnks ats ilmunya...

Terimakasih GAPALA-RL atas Komentarnya di Cara Membuat Header Blog Berisikan Link

coba dulu gan,..!!
>>mampir ya di : http://munsypedia.blogspot.com/

Terimakasih INFO DUNIA MAYA, NYATA, DAN GAIB atas Komentarnya di Cara Membuat Header Blog Berisikan Link
29/11/12 06:05

aamiin.. terima kasih semuanya gan, atas kunjungannya. semoga bermanfaat :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Header Blog Berisikan Link
17/12/12 23:58

Thanks infonya. Dipersilahkan mampir.. :)

Terimakasih Sistiyani atas Komentarnya di Cara Membuat Header Blog Berisikan Link
22/12/12 16:51

thnx infonya Sob,

Terimakasih Planet Kentir atas Komentarnya di Cara Membuat Header Blog Berisikan Link

akan saya coba thanks info nya sangat bermanfaat

Terimakasih ALAT ALAT SEX | ALAT SEKS | SEX TOYS atas Komentarnya di Cara Membuat Header Blog Berisikan Link

akan saya coba gan, thanks info nya sanggat bermanfaat

Terimakasih ALAT ALAT SEX | ALAT SEKS | SEX TOYS atas Komentarnya di Cara Membuat Header Blog Berisikan Link
25/12/12 00:19

Thanks sarannya
kapan kapan berkunjung dan follow blog aq yah nanti q follow back http://ilmubloggersyahdan.blogspot.com

yang mau follow blog aq nanti q follow back

Terimakasih syahdan hidayatekzx atas Komentarnya di Cara Membuat Header Blog Berisikan Link

blog posts and articles you draw me so much more knowledge, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

Terimakasih 100 DOCUMENT TRIK GRATIS BUAT MESIN UANG GRATIS + TRAFIK BLOG 100% FREE atas Komentarnya di Cara Membuat Header Blog Berisikan Link
29/12/12 07:15

dreamweaver dapat darimana?

Terimakasih Monika Wibisono Putri atas Komentarnya di Cara Membuat Header Blog Berisikan Link
30/12/12 05:37

@Monika :
dreamweaver bisa dibeli di http://www[dot]adobe[dot]com/products/dreamweaver[dot]html
jika ingin yang legal..
kalau yang bajakan tinggal download saja, di internet banyak kok. atau bisa meminjam dari persewaan software.

Terima kasih kunjungannya :)

Terimakasih Mohammad Irfan Basuki atas Komentarnya di Cara Membuat Header Blog Berisikan Link
30/12/12 21:55

wah mantap bro.

Selamat Tahun Baru 2013, Salam Sejahtera, Salam Sehat Selalu dari Member Republik Blogger Nusantara (Ra Ch)

Mampir di blog baru saya bro ade2mama.blogspot.com

Terimakasih Admin atas Komentarnya di Cara Membuat Header Blog Berisikan Link
2/1/13 18:57

terimakasih banyak tutorialnya
sangat membantu :)

Terimakasih Tjahja Dinata atas Komentarnya di Cara Membuat Header Blog Berisikan Link
7/1/13 23:50

clear.. trims infonya & sangat bermanfaat

Terimakasih joesfredy atas Komentarnya di Cara Membuat Header Blog Berisikan Link
11/1/13 23:52

makasih infonya.. mudah di mengerti

Terimakasih hugo febriardhi atas Komentarnya di Cara Membuat Header Blog Berisikan Link
13/1/13 11:32

@hugo febriardhi Senang bisa membantu sob :)
Terima kasih atas kunjungannya :D

7/2/13 07:06

aku aku aku mau nanya kok pas saya klik malah ke blog sendiri yah??

Terimakasih M. Al Jufri atas Komentarnya di Cara Membuat Header Blog Berisikan Link

ok gan mantep infonya, sudah saya buktikan sendiri, dan berhasil, hehe

Terimakasih bisnis online paling murah atas Komentarnya di Cara Membuat Header Blog Berisikan Link
14/3/13 02:56

Thanks bro ^_^

Terimakasih Dandy Aremania atas Komentarnya di Cara Membuat Header Blog Berisikan Link
18/3/13 08:13

gak ada dreamweaver bro. download dimana?
http://wartabersama.blogspot.com

Terimakasih Oscar Samosir atas Komentarnya di Cara Membuat Header Blog Berisikan Link

makasih cara membuat header blognya....

Terimakasih Obat Mata Minus Herbal atas Komentarnya di Cara Membuat Header Blog Berisikan Link

thanks ya...

Terimakasih Toko segala Obat Herbal atas Komentarnya di Cara Membuat Header Blog Berisikan Link
25/3/13 07:59

mantap dah.. mksih om

Terimakasih dhani ramdhani atas Komentarnya di Cara Membuat Header Blog Berisikan Link
18/4/13 07:29

terimakasih infonya ..

Terimakasih lpsp atas Komentarnya di Cara Membuat Header Blog Berisikan Link
5/6/13 18:45

mantab

Terimakasih wahyu atas Komentarnya di Cara Membuat Header Blog Berisikan Link
6/6/13 20:00

Thx

Terimakasih X-San atas Komentarnya di Cara Membuat Header Blog Berisikan Link
9/6/13 18:40

makasih gan .. berkat postingan ini, header blog ane jadi, hhehee..
check this out >> http://thegatotkacart.blogspot.com/
sekalian mampir hehe

Terimakasih thooinkkawacasena atas Komentarnya di Cara Membuat Header Blog Berisikan Link
12/6/13 04:26

manap nih langsung saya coba buat

Terimakasih Hanif atas Komentarnya di Cara Membuat Header Blog Berisikan Link
23/6/13 22:35

sangat bermanfaat

salam dari kami : http://tutsteck.blogspot.com/

Terimakasih arie setiadi atas Komentarnya di Cara Membuat Header Blog Berisikan Link
27/6/13 10:51

gan , kalau herder nya di hapus,.
ada pesan kesalahan , bila di save
ini pesan nya,,,
Template diperbarui di tempat lain. Silakan muat ulang laman asli dan ulangi lagi.
Error 500

tolong lah gan , pencerahan nya

Terimakasih ryan paskal atas Komentarnya di Cara Membuat Header Blog Berisikan Link
17/7/13 22:16

makasih tutot nya bang :D

Terimakasih Muh. Yudhi Purnama atas Komentarnya di Cara Membuat Header Blog Berisikan Link

terimakasih gan sangat membantu.

Terimakasih TIPS AGAR TIDAK BOSAN NGEBLOG atas Komentarnya di Cara Membuat Header Blog Berisikan Link

masih gagal juga ane gan

Terimakasih Teknisi Laptop Komputer Gayo atas Komentarnya di Cara Membuat Header Blog Berisikan Link
12/11/13 09:54

keren sob,,,,
terimakasih sangat membantu

bila berkenan kunjungi blog ane gan Di
Danny-gitaronline

Terimakasih danny-gitaronline atas Komentarnya di Cara Membuat Header Blog Berisikan Link
27/2/14 01:26

oke ... sangat membantu.. tanks

Terimakasih Ngatemin Rosok atas Komentarnya di Cara Membuat Header Blog Berisikan Link

Post a Comment