Cara Membuat Header Blog Yang Berisikan Link

Yak setelah sekian lama ga posting di blog lagi, kali ini gue akan share tentang tutorial gimana caranya membuat header blog yang berisikan link, yang biasanya berisi link akun jejaring sosial seperti facebook atau twitter. Naah ini contohnya nih yang udah ada:

blog bang bena kribo

blog lainnya

Naaah langsung aja ke langkah pertama, pokoknya lo harus punya software yang disebutkan dibawah ini :

1. Adobe Photoshop atau software desain lainnya (untuk memasukan logo akun jejaring sosial yang bakalan berperan untuk buttonnya)

2. Adobe Dreamweaver

3. Akun file hosting (untuk mengupload gambar yg telah di edit, bisa menggunakan photobucket, imageshack dll)

4. Imajinasi untuk desain blog tentunya :P


Langkah kedua yaituu buka adobe photoshop dan desain gambar header sesuai keinginan kalian (diusahakan lebarnya sesuai dengan ukuran header) jangan lupa untuk memasukan logo untuk button jejaring sosialnya yaa!

contohnya : 

sudah berisi twitter atau facebook yang berperan sebagai button

Langkah ketiga buka adobe dreamweaver kalian 

pada pilihan create new pilih HTML, lalu akan muncul jendela seperti ini :

lalu liat pada pojok kanan atas lalu pilih menu IMAGE

jika muncul jendela sepeti ini : 

klik aja ok. lalu lanjut ke step berikutnya pilih bagian DESIGN, tombol ini berada di samping code dan split

lalu gambar yang dipilih pun akan muncul contohnya seperti ini :

setelah itu kita mulai untuk ngasih link di gambar tersebut, caranya dengan mengklik tombol diantara 3 ini

bisa memilih kotak bulat atau garis, disarankan kotak aja supaya simple hehe

selanjutnyaaa tinggal arahkan dimana link tersebut mau berada, karena sblmnya gue udh memberi arahan untuk ngasih logo jejaring sosial yang diinginkan maka langsung aja pilih di tempat itu. nih contohnya kalo punya gue

jangan lupa setelah dipilih tempat dimana link berada kita cantumkan url lo jugaa, masukinnya dibagian sini :

INGAT, target harus _blank supaya setelah di klik masuk ke new tab, kalo engga bakal masuk langsung ke link tersebut broo.

setelah semuanya udah dikerjakan sesuai langkah diatas tinggal SAVE AS dan pilih file typenya ALL DOCUMENT
dan hasilnya seperti ini :

Catatan: contoh gambar diatas, filenya sudah di open with > notepad .. sebelumnya berlogo chrome atau mozilla sesuai browser lo, ada baiknya langsung aja open with > notepad setelah di save as :)


Langkah keempat cara memasukan gambar tadi ke blog!

pertamaa, lo harus masukin gambar yang tadi di edit dengan dreamweaver ke file hosting, sehingga akan didapat URL dari gambar itu sendiri.

selanjutnyaa lo tinggal buka file yang tadi udah di save (dan sudah dalam bentuk/ berlogo notepad tentunya) dan akan muncul HTML.

cari codingan dibawah ini dan edit

                 <img src="Nama file header lo" menjadi <img src="URL hosting gambar tadi"

lalu CTRL + S

lalu tinggal masuk ke blog > tata letak > add gadget > HTML/javascript > masukan codingan dari notepad

CATATAN : header seperti punya bang bena dan bahkan punya gue itu ga bertipe image, gue nyontoh punya bang bena, header tersebut berperan sebagai gadget, so masukin aja melalui html/javascript hehe

lalu lo bisa sesuain lebar dan tinggi dari gambar tersebut dengan mencari HEIGHT dan WIDHT tinggal setting sesukanya dan yuhuuuuu jadilah header keren hehe..

naah sekarang header kalian pun udah ada link yang mempermudah jalur ke jejaring sosial maupun web lainnya.. bagi yang belum mengerti atau ada trouble bisa comment yang jelas dan gue bakal bantu

selamat mencobaa, dan semoga posting gue kali ini bermanfaat.. caiyoooo!!!




sumber : 
http://tutorial.benablog.com/
http://madz666.blogspot.com/