Cara Membuat Header Blog Berisikan Link
http://nandarious.blogspot.com/2013/05/cara-membuat-header-blog-berisikan-link.html?m=1
Assalamualaikum..
Udah lama nih ga posting, Kali ini saya akan membahas bagaimana cara membuat Header blog yang berisikan Link. tutorial ini saya dapet dari blog website tentangga :D, lumayan buat menambahkan pengetahuan kita :) hehe 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 :
Udah lama nih ga posting, Kali ini saya akan membahas bagaimana cara membuat Header blog yang berisikan Link. tutorial ini saya dapet dari blog website tentangga :D, lumayan buat menambahkan pengetahuan kita :) hehe 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 :
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 :
maka hasilnya akan seperti ini :
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.
<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 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.
Selesai.
capek juga rasanya membuat tutorial yang panjang ini. semoga bermanfaat bagi sahabat semua
NB : Apabila ada pertanyaan silakan tinggalkan di komentar.
7. Klik Edit pada widget Header lama kita dan pilih remove untuk menghapusnya. Klik save.
Selesai.
capek juga rasanya membuat tutorial yang panjang ini. semoga bermanfaat bagi sahabat semua
NB : Apabila ada pertanyaan silakan tinggalkan di komentar.
Terima kasih sekali lagi atas titorialnnya, semoga mendapat amal, amiiinnnn
ReplyDelete@Buginese Pare Amiin :) Terima Kasih juga gan atas kunjunganya :)
ReplyDelete