Tips biar header blogmu lebih beda :D
Yellow dude, sometimes, kita bosen sama yang namanya header cuma gambar doang, atau malah cuma tulisan doang? Yoi bro, gue ada tips buat kalian biar blog kalian lebih kece dari sebelumnya layaknya blognya Benablog, yang headernya cakep abis !
Langsung aja dude, gini nih bahan dan stepnya !
Bahan:
- Coreldraw / Photoshop / Paint, terserah, mau pake apa buat desain, yang paling kamu kuasai.
- Dreamwaver. Software ini dibutuhkan untuk membuat sebuah link location di headermu nanti.
- Photobucket / Flickr / Image Hosting lainnya. berfungsi untuk menyimpan file header blog kamu
1. Buka Photoshop, Desain Header yang ingin kamu buat. Disini aku menggunakan ukuran 904 x 316
Contoh paling simpel
2. Jika sudah, Save header rancanganmu dengan Save as -> JPEG / PNG
3. Langkah ke-3, kalian harus masuk ke Adobe Dreamwaver. Disini gue pake CS5
Jika sudah terbuka, Create New HTML.
4. Jika sudah masuk ke lembar kerja, monggo ke Insert > Image > Open
5. Jika sudah masuk, ada window baru namanya Image Tag Accessibility Atributes, itu di OK sajah
6. Done, dah masuk image header kitaa !
7. Lalu, lihat Pojok Kiri Bawah, disitu ada 3 buah gambar, pilih sesuai dengan bentuk link area kamu
1. Kotak 2. Bunder 3. Custom
8. Gambar shape yang kamu inginkan untuk membuat link di headermu
9. Nah, lihat di bagian bawah. Disitu ada Link, Target dan Alt
- Link : Isi kolom ini dengan link tujuan kamu
- Target : Banyak sekali option disini, tapi kita cuma butuh 2 aja, _new dan _self. Fungsi New yaitu membuka link di tab baru sedangkan Self membuka link di tab itu sendiri
10. Nah, ulangi step 8 dan 9 untuk semua Link area yang bakalan kamu seleksi
11. Jika sudah, klik "Code" di area pojok kiri atas. Lalu Copy semua kode itu dimulai dari <body>
12. Done? Masuk Browser !
13. Buka Image Hosting kalian, lalu Upload file gambar dari Photosop maupun Corel yang sudah diubah formatnya menjadi JPEG atau PNG.
14. Udah di upload? Masuk ke Layout
15. Add A Gadget
16. Ambil HTML
17. Paste kode yang kita copy dari Dreamwaver tadi, Jangan di save dulu !
18. Di tulisan <img src="blablabla" ganti si blablabla menjadi Direct Link header kamu yang bisa kamu dapatkan di Image Hostingmu
19. Udah ? SAVE !
20. Tadaaa, selesai dah !
1 coments