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 +70comments

18/9/12 15:46

info menarik sob.. lanjutkan

Terimakasih BoWo atas Komentarnya di Cara Membuat Header Blog Berisikan Link
29/9/12 23:05

sangat membantu....:D:D

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

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 atas Komentarnya di Cara Membuat Header Blog Berisikan Link
7/11/12 05:12

aduhh, saya blum selesai blajar html blum bsa jadi

10/11/12 20:49

thxs mas bro

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 Bst--Milikku. 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 :)

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 Adandio 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 Tourpeace atas Komentarnya di Cara Membuat Header Blog Berisikan Link
2/1/13 18:57

terimakasih banyak tutorialnya
sangat membantu :)

Terimakasih Ian Josep 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

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 @secangkirjupri 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 Meown 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 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
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
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 thooink 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

sangat bermanfaat

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

Terimakasih Goblogg3r 23 (Ari 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 Rian Duha 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
Anonymous
12/11/13 09:54

keren sob,,,,
terimakasih sangat membantu

bila berkenan kunjungi blog ane gan Di
Danny-gitaronline

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

oke ... sangat membantu.. tanks

13/10/14 04:45

Ini yang saya cari.. tapi kurang cocok sama keinginan saya. mohon bisa bantuannya di blog saya mau saya kasih link page pada header setelah link home blog. gimana ya caranya.? terima kasih.

Terimakasih VIEW RUMAH atas Komentarnya di Cara Membuat Header Blog Berisikan Link
Anonymous
5/11/14 08:24

SAYA SUDAH TERAPKAN TERNYATA BERHASIL. TERIMA KASIH

Terimakasih Anonymous atas Komentarnya di Cara Membuat Header Blog Berisikan Link

Wah, jadi begini ya caranya. Siap dicoba :D

Terimakasih Muhammad Rifqi Saifudin atas Komentarnya di Cara Membuat Header Blog Berisikan Link

sangat bermanfaat sekali sob. ini yg saya cari.

Terimakasih Download Games PC Lengkap atas Komentarnya di Cara Membuat Header Blog Berisikan Link
12/2/15 16:26

thanks

8/10/15 07:49

Nice.. Kujungan baliknya jangan lupa bro.. Hidayathandoko.blogspot.com

Terimakasih Alif Nur Rohman atas Komentarnya di Cara Membuat Header Blog Berisikan Link
4/3/16 17:05

Lumayan puyeng. Ini cara tersimpel ya? Soalnya saya juga pengen bikin begini dikarenakan judul header saya kok font-nya jadi sama dengan isi artikel. itu gimana ya?

Terimakasih Santi atas Komentarnya di Cara Membuat Header Blog Berisikan Link
4/3/16 18:48

Thx bantuannya gans

Terimakasih Gamers atas Komentarnya di Cara Membuat Header Blog Berisikan Link
29/10/16 14:07

Terima kasih untuk berbagi dalam artikel ini , semoga bermanfaat dan anda sukses selalu.

Terimakasih VAKUM PEMBESAR PENIS atas Komentarnya di Cara Membuat Header Blog Berisikan Link
14/11/16 17:53

buat ngelink, bisa pakai software lain selain dreamweaver?

24/12/16 09:29

terima kasih infonya bos

Terimakasih vimax atas Komentarnya di Cara Membuat Header Blog Berisikan Link

sip

Terimakasih obat penggugur kandungan atas Komentarnya di Cara Membuat Header Blog Berisikan Link
26/12/16 10:02

oke

Terimakasih alat bantu sex atas Komentarnya di Cara Membuat Header Blog Berisikan Link
9/2/17 21:28

terimakasih atas bantuannya dengan berupa artikel yang dibuat mayan jadi ada tambahan buat saya masalahnya....

Terimakasih aci atas Komentarnya di Cara Membuat Header Blog Berisikan Link
20/4/17 23:11

nice blog

Terimakasih anabolic rx24 asli atas Komentarnya di Cara Membuat Header Blog Berisikan Link
30/6/17 11:17

nice blog

Terimakasih Titan Gel asli atas Komentarnya di Cara Membuat Header Blog Berisikan Link
17/9/17 19:05

Selamat datang di intanqq

Ayo bergabung bersama kami, tersedia 7 permainan dalam 1 ID:
- Sakong (New Game)
- Bandar Poker (New Game)
- BandarQ (Hot Game)
- Poker
- Domino
- Capsa Online
- AduQ

Apa kelebihan bermain di intanqq? Berikut kelebihannya:
- BONUS TURNOVER 0.3% SETIAP HARI
- BONUS XTRA TURNOVER SETIAP MINGGUNYA
- BONUS REFERAL 10% +10% SEUMUR HIDUP!!
- MIN DEPO IDR 15.000 dan Proses super cepat 1 menit.
- Bisa dimainkan di Smartphone Versi Android dan Iphone.
- Win rate 98%
- No robot
- Fair play 100% player vs player

Tunggu apalagi? Ayo segera bergabung sebelum ketinggalan promonya :)

19/10/17 17:22

this information really helps me in inspiring the future ......
thanks and good luck ........
visit also my website below ........ please ..........

Cara Mengobati Penyakit Sipilis
Obat Gatal Di Selangkangan
Obat Kanker Tanpa Operasi
Obat Diabetes
Obat Penyakit Sipilis
Obat Sipilis Herbal

Terimakasih obat denature atas Komentarnya di Cara Membuat Header Blog Berisikan Link
8/1/18 00:10

Dicoba Guyss Tingkat Kemenangan Tertinggi di Indonesia, Artikel yang Bagus TOP MArkotop.


Situs Judi Online
Agen Poker

WIN RATE 98%

Terimakasih Agen Poker atas Komentarnya di Cara Membuat Header Blog Berisikan Link
31/5/18 07:45

Makasih banyak info sharingnya gan! update terus...

JuaraTaruhan.COM
Agen Judi Bola Sbobet
Agen Judi Bola Sbobet Casino Online Terpercaya

Terimakasih juarataruhan atas Komentarnya di Cara Membuat Header Blog Berisikan Link
12/12/19 02:08

Bermain pada situs poker online idn yang terpercaya ini https://ignitiondeck.com/id/forums/users/55528 akan bisa memberikan banyak kemenangan dan keuntungan serta jackpot besar yang akan bisa kalian dapatkan.

Terimakasih JM atas Komentarnya di Cara Membuat Header Blog Berisikan Link
14/3/22 07:24

EZSLOT99
Agen Slot Online Mudah Menang
bandar bola terpercaya

Terimakasih EZSLOT99 atas Komentarnya di Cara Membuat Header Blog Berisikan Link

Post a Comment