Membuat Blog Full Gambar & Link-Link

Posted by BangAjie on Tuesday, March 20, 2012

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!