Cara Mudah Membuat Header yang Bisa Ngelink Agar Blog Terlihat Cantik

Membuat Gambar Headar di blog yang bisa ngelink
Contoh Gambar Header
Membuat Gambar Headar di blog yang bisa ngelink - Hai sobat blogger? Ketemu lagi masih di blog catatan mas arif, beberapa artikel belakangan ini adalah edisi libur sekolah!, yaaaa mumpung lagi ngganggur maka perbanyak bikin artikel biar tambah rame blognya hehe.

Heeem 2 hari terakhir ini tidak tau kenapa? rasanya ingin marah-marah mulu, di tambah perasaan bad mood, bikin males semuanya, termasuk males mandi, males kerja, males mikirin kamu, males Be’ol haha 😂 :) tapi untungnya libur sekoah masih panjang, jadi ya bisa nyantai di rumah xixi :) tapi di tengah kemalasan ini, saya tetap baik kok?, karena masih ingin berbagi dengan sobat blogger semua, meskipun bukan berbagi duit yaaa, penting manfaat lah ???, sesuai dengan judul di atas :) itu yang ingin saya bagi ke sobat blogger.

Bagi para Master blogger, maaf ya kalau tutorial ini sudah terlihat basi hehe :) niat saya hanya ingin berbagi saja kok, tidak ada maksud lain 😀 :), buat para newbie silahkan di simak ya tutorial-nya (walah gaya mu Rief, kamu juga masih newbie!!! hohooo), semoga blog-nya tambah rame dan keren. Sebelum kita masuk pada pembuatan header, ada hal-hal yang perlu sobat blogger siapkan diantaranya:

(1). Foto yang nantinya di pakai gambar header di blog (ane saranin edit dulu pakai Photoshop, Corel Draw atau Photo Scape).

(2). Software Dreamwaver, kalau belum ada bisa di download (versi CS6) di SINI.

(3). Akun Image Hosting yang di pakai penyimpanan online (misalnya photobucket, tinypic, kalian pilih salah satu saja, kalau saya lebih suka pakai tinypic, karena lebih simple pemakaiannya, untuk mendaftar akun tinipic di SINI.

#Langkah Pertama: Sobat blogger siapkan saja foto yang sudah di edit pakai Photoshop, sobat semua saya anggap sudah jago edit foto, jadi tidak saya jelaskan lagi secara mendetail cara editnya, ini contoh gambar header yang sudah di edit yang nanti kita pakai.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Kedua: Buka Software dreamwaver (dalam menjalankan aplikasi dreamwaver sebaiknya sobat blogger me-nonaktifkan anti virus sementara agar tidak mengganggu kinerja dreamwaver). Klik new > Pilih HTML dan Klik OK. Selanjutnya klik di bagian samping kode <body>.

#Langkah Ketiga: Masukkan image header yang suda kalian buat di samping tag <body> kalian klik insert > image > kalian cari foto yang akan di bikin header. Nanti tampilannya seperti gambar di bawah ini.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Keempat: Kalau sudah di masukkin fotonya, tampilanya akan seperti ini, (tampilan dreamwaver kadang berbeda tergantung fersinya) kalau tampilan sobat blogger sudah seperti contoh di bawah ini berarti benar, Ingat jangan takut!, biasanya saat kita masukin foto loading-nya agak lama dan PC / leptop keliatan nge-hang, tapi itu biasa :)

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Kelima: Ini yang paling sulit, sobat blogger lihat di bagian bawah sebelah kiri ada seperti shape berbentuk bulat, kotak dan segitiga, shape itu yang nantinya berfungsi membuat menu seperti facebook, twitter, youtube di gambar header yang bisa nge-link. Lihat gambar di bawah yang sudah saya tandai nomor:  
  • Tanda 1: Itu shape (bulat, kotak dan segitiga) yang di pakai menutup menu facebook (bisa juga untuk menutup menu twitter, home, link exchange, archive pilih sesuai selera) nantinya yang bisa nge-link.  
  • Tanda 2: Target, kita di hadapkan beberapa pilihan ada: _blank, _new, _parent, _self dan _top kalian bisa milih salah satu, misalnya kalian pilih _blank fungsinya ketika kalian klik akan masuk di tab baru, sedangkan kalau memilih _self, ketika di klik akan terbuka di tab yang sama, tergantung mana yang kalian suka :). 
  • Tanda 3: Fungsinya untuk memasukan link kalian, misalnya link akun youtube, facebook, twitter dll. (sebelum masukin link ada tanda “#” kalian hapus).  
  • Tanda 4: Shape bulat yang sudah menutup menu facebook yang fungsinya sebagai menu yang bisa nge-link di gambar header, lebih jelasnya peratikan gambar di bawah.

Membuat Gambar Headar di blog yang bisa ngelink

Kalau sudah beres, tinggal Save file header yang suda kalian bikin tadi dengan format html, kalau sudah di save, kalian cari file yang berformat html tadi dan kalian buka dengan cara, klik kanan open with notepad, lihat gambar.

Membuat Gambar Headar di blog yang bisa ngelink

Kalu file html sudah terbuka di notepad, perhatikan kode <img src= yang sudah saya kasih lingkar, disitu gambar yang dimaksud adanya di komputer kalian, tapi di internet belum ada alias belum di upload. Gimana cara meng-upload-nya? disinilah akun image hosting berperan. Saya biasa pakai tinypic untuk penyimpanan gambar secara online.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Keenam: Kalian buka akun image hosting tinypic ini tampilannya :) kalau kalian mau bikin akun baru klik Join Now!. Karena saya sudah punya akun tinypic maka tinggal masukkan saja imail dan paswort-nya.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Ketujuh: Setelah masuk pada akun Tinyipic tinggal kalian upload foto yang telah kalian buat tadi, untuk di jadikan header, kalau binggung lihat gambar.

Membuat Gambar Headar di blog yang bisa ngelink

Setelah kalian upload fotonya, lihat gambar di bawah, di situ ada kolom DIRECT LINK, itu adalah link atau alamat foto yang kamu upload tadi, tinggal kalian copy link-nya yang sebentar di pakai untuk melengkapi kode HTML / Java script, lebih jelas nya lihat gambar di bawah ini.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Kedelapan: Balik lagi ke kode html yang dibuka pakai notepad tadi. Kalian paste link dari gambar tinypic tadi, ke kode html banner yang kita buat sebelumnya untuk menggantikan kode (“HelderCatatanMasArif_zpsb550d40c.jpg”) di ganti menjadi: ("http://i67.tinypic.com/1ht5xk.jpg") lebih jelasnya perhatikan gambar yang suadah saya lingkari.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Kesembilan: Login ke blog kalian masing-masing, seperti biasa masuk ke tata letak, selanjutnya tambah gadget, pilih HTML/Javascript.

Membuat Gambar Headar di blog yang bisa ngelink

#Langkah Kesepuluh: Kalian masuk ke kode yang di buka dengan notepad tadi, copy isi dari tag di bawah <body> Sampai ke atas <body> lebih jelasnya lihat gambar :).

Membuat Gambar Headar di blog yang bisa ngelink

Kalian copy kode header yang sudah di buat tadi, paste di kolom gadget HTML/Javascript dan klik simpan.

Membuat Gambar Headar di blog yang bisa ngelink

Kalau gadget HTML/Javascript sudah muncul perhatikan yang saya tandai:). Tapi kok di samping ya?. Kan header biasanya di atas?. Tenang bisa di ataur :)

Membuat Gambar Headar di blog yang bisa ngelink

Sobat blogger (lihat gambar di bawah) seret aja gadget-nya ke atas seperti begini, lihat nomor 1, klik simpan dan lihat hasilnya dengan  nge-klik nomor 2 :).

Membuat Gambar Headar di blog yang bisa ngelink

Duuuuar !!!. Horeee gambar header kita sudah jadi. Selamat ya sobat blogger kalian sudah berhasil, sekarang blog kalian menjadi lebih keren. Catatan: Teknik ini bisa, bahkan sangat cocok di terapkan di template VioMagz, seperti contoh gambar di bawah, saya coba terapkan di template VioMagz ternyata sangat cocok, (rekomendasi) kalian atur ukuran gambar header 862 x 500 pixeles.
Membuat Gambar Headar di blog yang bisa ngelink
Penerapan di Template VioMagz

Ahirnya sampai juga di penghujung pembahasan ini:) capek juga tangan nulis dan edit foto untuk bikin postingan ini, tapi yaaa tidak apa-apa lah, demi sobat blogger!. Hemmm kalau ada yang kurang jelas dengan tutorial ini. Sobat blogger bisa tanyakan di kolom kotak komentar, ingat jangan malu-malu.

Berlangganan update artikel terbaru via email:

8 Responses to "Cara Mudah Membuat Header yang Bisa Ngelink Agar Blog Terlihat Cantik"

  1. dulu saya juga pernah pakai DW untuk bikin header yang ada linknya mas, tapi itu udah lama banget, tips ini menarik buat teman2 blogger yang lain

    ReplyDelete
    Replies
    1. Hia mas, tutorial nie juga pernah q pos di blog q yg pernah di hapus google 2013 silam hehe

      Sengaja pos ulang untuk bernostalgia, pertama" blog keluar kan sukanya template bling2 :)

      Delete
  2. Wah infonya bermanfaat mas, bakalan saya coba ni.

    ReplyDelete
  3. Aku juga pengen pasang header blog Mas. Tapi deg-degan soalnya kurang jago eut otak atik begini apalagi yang berhubungan html. Udah serem duluan

    ReplyDelete
    Replies
    1. Nggak pa2 Sob namanya belajar, salah uda biasa, yg penting ketika mau edit html di Backup dulu biar aman :)

      Selamat mencoba :)

      Delete
  4. yaaa... udah lama enggak pakai dreamwaver nih, belajar lagi deh

    ReplyDelete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini!, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi, bila berkomentar tidak sesuai dengan kebijakan Blogger maka tidak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel