Tutorial Membuat Header yang ada Linknya

Header yang ada linknya kayak gimana sih? Liat header aku, kayak gitu yang berLink :D
Ketika kamu click tulisan facebook, twitter, dan jejaring sosial lainnya yang ada di header blogku, kamu akan langsung diarahkan ke jejaring sosialku yang kamu klik. Mau juga?

Oke akan aku bagi-bagi tutorialnya.

Aplikasi yang kita butuhkan :

Adobe Photoshop atau Photoscape atau aplikasi apa aja buat bikin header yang sekiranya gampang buat kamu.
Adobe Dreamweaver. Nah ini dia aplikasi yang paling kita butuhkan untuk bikin header berlink.

Bahan-bahan yang mesti disiapkan, kamu cukup cari gambar-gambar penunjang untuk bikin headernya. Contohnya cari gambar icon facebook, atau twitter untuk menyisipkan linknya.

Setelah gambar-gambar dan aplikasi penunjang kamu siapkan, kita mulai langkah awal :

MEMBUAT HEADER

Untuk contoh ini, aku mau buat headernya pake photoscape. Widthnya aku pake 880 dan heightnya 400.

Untuk membuat headernya sebenernya tergantung kreatif masing-masing. Kalo aku mau bikinnya kayak gini :

aku bikin header itu pake photoscape biar mudah. Cuma tinggal insert picture lalu tata sesuai kreasi kita. Pake photoscape gampang kok. Kalian pasti bisa ngulik sendiri tanpa harus dijelasin rinci di sini.

Insert picture photoscape itu kayak gini :

Klik icon gambar pemandangan yang aku lingkari kuning, terus klik photo, arahkan ke ke folder tempat kita simpan gambar yang sudah disiapkan sebelumnya.

Pembuatan header kita anggap selesai yaa. Tahap selanjutnya :

ADOBE DREAMWEAVER

Buka Adobe Dreamweavermu. Tampilannya seperti ini :

Klik file > new > html lalu create.

Simpan kursor di bawah huruf <body>

Klik Insert > image . Maksudnya kita menginsert header yang telah kita buat tadi. Biasanya setelah kita selesai meng-insert gambar, pasti akan ada dua box muncul. Nah itu tinggal klik ok aja. Kalau benar, maka kursor yang tadi kita simpan di bawah <body> akan di isi dengan sebuah code.

Klik Design yang ada di kiri atas. Maka tampilannya akan seperti ini :

Arahkan tanda panah kursor kita pada gambar yang akan kita add hyperlink, lalu klik. Nanti akan ada opsi shape. Seperti ini :

Pilih shape sesuai bentuk gambar yang akan kita beri hyperlink. Setelah gambar yang akan kita beri hyperlink ditutup oleh shape (1) , tulis link yang akan kita masukan pada gambar di kolom link (2). Untuk kolom target (3) itu terserah selera kamu. Option _blank maksudnya ketika gambar di klik, maka kita akan diarahkan pada new tab, jika _self maka akan membuka link baru di tab yang sama.

Lakukan hal yang sama pada gambar-gambar selanjutnya yang akan diberi hyperlink.

Lalu klik file > save . Save dengan format HTML, seperti :

Selanjutnya buka folder tempat dimana kita menyimpan file header yang telah di edit oleh Adobe Dreamweaver.

Buka file dengan menggunakan notepad

Oke, untuk sesaat kita biarkan dulu notepadnya. Langsung kita kunjungi Photobucket untuk mengupload header kita. Yang kita upload adalah header yang belum di edit menggunakan Adobe Dreamweaver.

Kalau kamu belum terdaftar di Photobucket, kamu harus sign up terlebih dahulu. Kalau yang udah terdaftar tinggal langsung upload headernya.

Setelah selesai di upload, klik view album.

Sorot kursor pada gambar header kita, nanti akan tampil rincian code header kita tersebut. Klik direct html yang berarti meng-copy code direct html.

Kembali buka notepadnya. Code yang aku blok itu dihapus terus diganti sama code yang tadi udah di copy dari photobucket.

jadi :

Sekarang tinggal pasang ke blog, caranya Tambah Gadget > HTML/Java Script. Tidak semua code yang ada di notepad di copy ke HTML/Javascript. Yang di copy hanya yang aku kasih tanda blok biru :

Catatan, Tambah gadgetnya gunakan yang paling atas, supaya letaknya ada di paling atas. Karena memang header kan pada dasarnya posisinya ada di bagian paling atas blog :D

SELESAI :D

Selamat mencoba dan semoga bermanfaat :D