HOW TO: Membuat Header Blog berLink


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 ! 



Post a Comment
Abdurrachman Azis. Powered by Blogger.