Assalamualaikum..
Udah usang nih ga posting, Kali ini saya akan membahas bagaimana cara menciptakan Header blog yang berisikan Link. tutorial ini saya dapet dari blog website tentangga :D, tidak mengecewakan buat menambahkan pengetahuan kita :) hehe Langsung saja tanpa berbasa - basi.
Yang kita butuhkan yakni 2 software dan 1 situs yang sudah tidak aneh lagi ditelinga, Adobe Photoshop (atau dapat 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, sebab kalau tidak sesuai ukurannya maka kesannya nanti juga kurang baik (gambar dapat terpotong).
misalnya saja gambar ini yang akan menjadi header blog saya :
Simpan gambar tersebut dan keluar saja dari photoshop sebab kita hanya membutuhkan photoshop untuk "mengotak - atik" gambar header kita .
2. Buka situs www.photobucket.com kemudian sign up dan ikuti langkah yang ada kalau sahabat belum mendaftar, kalau sudah tinggal klik sign in -> upload -> select file from my computer -> pilih file header yang sudah disimpan tadi. Tunggu proses upload, dan kalau sudah simpulan maka kesannya akan ibarat ini :
Perhatikan cuilan 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 ibarat ini :
Letakkan kursor sehabis <body>, sehabis itu klik insert -> image -> pilih gambar header yang sudah kita simpan tadi -> bila ada pilihan klik OK terus saja.
maka kesannya akan ibarat ini :
Lalu klik pada gambar, dan akan muncul rectangular hotspot tool dan oval hotspot tool pada cuilan pojok kiri bawah. Gunakan kedua tools tersebut untuk memilih area mana yang akan kita jadikan link.
Misalnya saya memakai rectangular hotspot tool untuk menciptakan gambar ikon facebook menuju akun facebook saya. maka caranya klik rectangular hotspot tool -> blok cuilan gambar facebook -> pada kotak link masukkan url alamat yang dituju, sebagai pola saya masukkan url yang menuju akun facebook saya -> pada sasaran saya pilih "_blank" (agar link dibuka pada tab baru) -> pada alt masukkan kalimat / informasi yang akan muncul bila kursor diletakkan diatas gambar yang kita beri link.
4. kalau sudah semua cuilan gambar yang kita inginkan diberi link, maka langkah selanjutnya tinggal menyimpan hasil kreasi kita tersebut. caranya tinggal klik file -> save as. Nah, kesannya nanti berupa file .html, buka file tersebut dengan notepad dan kesannya nanti akan ibarat 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 ibarat ini bila saya contohkan milik saya :
Sumber http://nandarious.blogspot.comUdah usang nih ga posting, Kali ini saya akan membahas bagaimana cara menciptakan Header blog yang berisikan Link. tutorial ini saya dapet dari blog website tentangga :D, tidak mengecewakan buat menambahkan pengetahuan kita :) hehe Langsung saja tanpa berbasa - basi.
Yang kita butuhkan yakni 2 software dan 1 situs yang sudah tidak aneh lagi ditelinga, Adobe Photoshop (atau dapat 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, sebab kalau tidak sesuai ukurannya maka kesannya nanti juga kurang baik (gambar dapat terpotong).
misalnya saja gambar ini yang akan menjadi header blog saya :
2. Buka situs www.photobucket.com kemudian sign up dan ikuti langkah yang ada kalau sahabat belum mendaftar, kalau sudah tinggal klik sign in -> upload -> select file from my computer -> pilih file header yang sudah disimpan tadi. Tunggu proses upload, dan kalau sudah simpulan maka kesannya akan ibarat ini :
maka kesannya akan ibarat ini :
Misalnya saya memakai rectangular hotspot tool untuk menciptakan gambar ikon facebook menuju akun facebook saya. maka caranya klik rectangular hotspot tool -> blok cuilan gambar facebook -> pada kotak link masukkan url alamat yang dituju, sebagai pola saya masukkan url yang menuju akun facebook saya -> pada sasaran saya pilih "_blank" (agar link dibuka pada tab baru) -> pada alt masukkan kalimat / informasi yang akan muncul bila kursor diletakkan diatas gambar yang kita beri link.
<img src="http://i1296.photobucket.com/albums/ag11/sunandarr/header_zpse36be24e.png"....
5. Sekarang kita masuk ke blogger. pada dashboard klik design -> pada page elements klik add a gadget -> pilih HTML/Javascript -> Pada content masukkan instruksi yang ada pada notepad tadi mulai dari <img src... hingga </map> -> klik simpan
6. Drag widget Header gres yang telah kita buat tadi sempurna dibawah header usang yang ingin kita gantikan.
7. Klik Edit pada widget Header usang kita dan pilih remove untuk menghapusnya. Klik save.
Selesai.
capek juga rasanya menciptakan tutorial yang panjang ini. semoga bermanfaat bagi sahabat semua
NB : Apabila ada pertanyaan silakan tinggalkan di komentar.
7. Klik Edit pada widget Header usang kita dan pilih remove untuk menghapusnya. Klik save.
Selesai.
capek juga rasanya menciptakan tutorial yang panjang ini. semoga bermanfaat bagi sahabat semua
NB : Apabila ada pertanyaan silakan tinggalkan di komentar.
EmoticonEmoticon