Mar 20, 2012

Membuat Blog Full Gambar & Link-Link

Selamat malam kawan!
Akhir-akhir ini udara semakin dingin saja. Jika sebelum-sebelumnya aku selalu menggunakan kipas angin di kamar sambil online sekarang malah online sambil selimutan hahaha. Dinginnya gak nahan. Bikin pengen cepet-cepet nikah euy! belum lagi angin dan hujan diluar sana, berisik dan cukup seram. Tapi sudahlah, badai pasti berlalu kan ya.

Malam ini saya mau bagi-bagi tips, dan saya yakin kawan-kawan pasti suka. Yups! semoga saja. tapi sehabis baca tipsnya comment ya, kasi masukan atau sejenisnya buat blog ini gitu. Gimana deal? sama-sama saling mendukung ya.

Tips kali ini adalah cara membuat Header Blog yang bisa nge-link kemana-kemana sesuka hati kita :D, Terisnpirasi dari blognya Benakribo sih, berbekal rasa penasaran pada Dreamweaver akhirnya bisa juga... horeeee... hahaha... bahasa singkatnya apa ya? gak begitu penting deh. Okeh langsung di simak saja ya.

Membuat Header Blog Asik dengan Dreamweaver dan Photoshop

Sebelum memulai membuat header ada beberapa hal yang harus kamu lakukan dan miliki.
- Pertama dan paling penting kamu harus punya blog dulu  :D
- Pastikan Phoshop dan Dreamwaever terinstal dengan baik dan benar di komputer kamu.
- Kamu harus punya akun di photobucket.com sebagai image hosting gambar hasil editanmu di photoshop

Langkah Pertama : Mendesain Tampilan Header dengan Photoshop.

Dsini kreatifitas kamu di tuntut banget. Buat sebagus mungkin gambar untuk headermu dengan nama-nama destinasi link yang akan kamu tampilkan nanti. Gunakan tools-tools dan warna-warna di photoshop sesukamu, biar lebih keren tambahkan juga gambar-gambar favoritmu. Bisa fotomu atau browsing di google. Jika sudah kelar, simpan deh gambarnya. Ingat format gambarnya pake Jpg atau Png ya. satu lagi, ukuran panjang lebarnya jangan lupa di paskan dengan blogmu yah yah yah... Contohnya seperti ini :


Buat sekreatif yang kamu bisa guys! Perhatikan keseimbangan, keselarasan dan keserasiannya juga yah...

Langkah Kedua : Upload Gambar Ke Photobucket.com

Nah setelah kelar utak atik photoshop waktunya gambar hasil karyamu di upload ke photobucket.com, kenapa kesini? karena aku gak tau tempat lainnya selain ini xixixi. Tapi emang bener sih, image hosting yang ku tahu cuma photobucket. Kenapa di photobucket..itu karena kita memerlukan code html dan link dari gambar hasil karya mu nanti sob! yang akan kita olah di dreamweaver. Tenang... its simple.. 
Jika gambar sudah terupload dengan lancar copy code html gambar tersebut. Bingung dimana codenya? perhatikan gambar dibawah ini ya. 



Langkah Ketiga : Menautkan Link dengan DreamWeaver

Nah setelah code html di copy,  buka adobe Dreamweaver dan pilih > create new > html


Paste Code HTML gambar tadi di antara code ini <body></body>. udah belum?? kalo udah sekarang klik desain. Liat letak Design di gambar ini :


Lalu akan muncul gambar yang tadi di upload di photobucket. Selanjutnya kita akan memberikan link pada nama-nama destinasi link di gambar yang kamu buat dengan menggunakan shape-shape seperti Cirlcle, Rectangle, dan Polygon. Ingat untuk memunculkan shape-shape itu klik dulu pada gambarnya ya. Jika sudah muncul sekaranglah saatnya menggunakan shape-shape itu untuk menandai lokasi gambar yang ingin di beri link. Perhatikan nih gambarnya.

Gunakan shape untuk menadai lokasi link lalu tulis deh url-nya di kolom link lalu dibawahnya ada pilihan tuh. Mau blank (Halaman baru), Current (gak tau deh ini), Self (halaman semula) atau tmp. itu maksudnya jika link di klik maunya ditampilin dimana, di halaman baru atau tetep di halaman semula. Pilih sendiri ya.. Setelah menadai lokasi pertama, lanjutkan dengan menandai lokasi-lokasi lain dengan cara yang sama, simple kan?
Jika sudah mari beranjak ke tahap berikutnya. Masih di Dreamweaver.

Kembali klik Code, itu lho yang di urutan Design dan Split. Nah dsini kamu akan ketemu code-code html lagi yang bertambah banyak. Tugasmu sekarang adalah meng-copy code itu tapi gak semua ya.. cukup code yang diantara code <body></body> aja. Biar jelas liat gambar ini lagi ya.

Udah ya.... oke! kita masuk ke langkah berikutnya. Kita Tinggalkan Dreamweaver dengan bekal copy-an code html tadi.

Langkah Keempat : Paste Code html ke blog.
Langkah yang ini juga gak kalah simple kok guys! Sama seperti menambahkan widged ke blogmu.
- Login blog
- Pilih tata letak
- Tambah Gadged
- Pilih html/javascript
- paste deh! gak perlu kasi judul segala.
- Simpan dulu
- Lalu pindahkan widged barumu itu ke bagian atas blog, tempat dimana mestinya dia berada hehe. sekarang simpan lagi. dan lihat hasilnya... taraaaaaa...

Gimana ? bisa kan? bisa donk... Selamat mencoba ya! Selamat bereksperiment!!

Salam Blogger!
Comments
47 Comments

47 comments:

  1. Oalah, ini cuma bikin headernya ya?

    ReplyDelete
    Replies
    1. Iya mas..
      Baru bisa, katanya ilmu harus diikat dengan tulisan, jadi di share kan lebih baik, siapa tahu ada temen2 yang belum bisa,.

      Delete
  2. Bagus sob,ane suka banget, coba ah,biar tambah ilmu,makasih tutornya yg gampang dipahami,sukses sob

    ReplyDelete
    Replies
    1. sama-sama gan..
      di forward yah hehe

      Delete
  3. thank you friend, I hope you are happy today and forever

    ReplyDelete
  4. Nice info soob !! mantap nih !!

    ReplyDelete
  5. blog yang kaya manfaat sob, sangat mensupport para blogger yang lain. thanks :)

    ReplyDelete
  6. sumpah mantap nih bro, sgt membantu :D

    support u bro #83 ..
    http://onepiece-ever.blogspot.com/

    ReplyDelete
  7. Ajiiiibb!!
    thanks kawan.
    asik asik asik

    ReplyDelete
  8. peh complex seh..jom tgk sini..ada big sales!!

    ReplyDelete
  9. Headernya keren. Thanks ya udah share ilmu.. Tapi sayang, aku enggak punya software DreamWeaver :(

    ReplyDelete
    Replies
    1. Dreamweaver bisa di download di sharebase atau di 4shared.com :)

      Delete
  10. thx for visit my blog http://www.catatanwasfi.com

    dan kyknya post ini membantu dehh

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks for the knowledges...
    Berhasil nih...

    visit ya http://f-knowledges.blogspot.com

    ReplyDelete
  13. wah berguna sekali, kebetulan lagi nyari artikel ini.. coba praktek dulu ah.. sukses ya mas :D

    ReplyDelete
    Replies
    1. Sama-sama mbk...senang sekali bisa mambantu :)
      jangan bosan-bosan mampir ya

      Delete
  14. wah.. mau nanya nih, kan setelah kita copy paste html code yg dari dreamwaver trus di paste di html javascript di blog kita, nah tapi ada 1 masalah nya, judul blog nya gg bisa diilangin ... gimana caranya supaya yang nampak itu cuman gambar headernya .. gg ikutan sama judulnya blog.
    toloongg banget di reply !!!

    ReplyDelete
    Replies
    1. Kecilin font judul blognya sampe ukuran paling kecil, pake 0px aja.
      siipp??

      Delete
  15. wokehhh... makasih gan!
    langsung praktek.. :D

    ReplyDelete
  16. Asik Cobain Ah.... sebenernya paling Ogah ber urusan sama HTML... tapi demi Header coba Deh :3

    ReplyDelete
  17. yah.. kok aku gak muncul ya gambar nya?

    ReplyDelete
  18. salam kenal, makasih tutorialnya, helping banget :)

    ReplyDelete
    Replies
    1. Sama-sama, jangan bosan mampir ya.

      Delete
  19. maksi gan atas infonya sangat bermanfaat bagi saya ....??

    ReplyDelete
    Replies
    1. Sama-sama gan keep blogwalking :)

      Delete
  20. wah boleh ni bikin lagi .... maksi gan ijinkan untuk meng copy cara-caranya ,,,>>>

    ReplyDelete
  21. Mantabb niy infonya,
    Nice Posting gan :)

    ReplyDelete
  22. Wah, asyik juga rupanya. Jadi pengin mencoba. Mudah2an bisa. Terima kasih sharenya sob..

    ReplyDelete
  23. Wahhh mantapss niee Sobb infonya

    ReplyDelete
  24. jalan jalan dapet ilmu niee .. makasi sobb ilmunya

    ReplyDelete
  25. Ada di sini ternyata :), very nice :)

    ReplyDelete

Berkicau

Community