Menampilkan gambar di postingan dan side bar blog

Pernah melihat banyak web yang menampilkan gambar baik di postingan maupun di side bar blog. Bisa photo pribadi ataupun gambar lain yang mau kita pasang. Mungkin di antara kita masih banyak kesulitan bagaimana supaya gambar2 tadi bisa tampil secara maksimal dan sesuai dengan lebar kolom postingan atau side bar. Meskipun sebetulnya sudah sangat banyak tutorial yang bisa anda temui di internet mulai dari format pdf, word dll.

Pada kesempatan ini saya hanya akan menambahkan saja beberapa hal yang mungkin blm anda temui dibeberapa tutorial sebelumnya jadi untuk melengkapi kekurangan yang ada karena akan dibahas juga mengedit gambar berdasarkan kemauan kita agar gambar terlihat lebih colourfull.

1. Memasang gambar di postingan

Tulisan yang tertata rapi plus bahasa yang teratur termasuk artikel yang menarik tentunya akan banyak diminati oleh para pembaca terlebih itu adalah yang sedang ramai dibicarakan orang. Tapi kalau tidak disertai gambar sebagai faktor pendukung lain rasanya seperti sayur asem tanpa garam hambar bukan. Nah untuk itu perlu diselipkan gambar layaknya anda membaca berita yang dilengkapi photo pasti terasa lengkap.

Untuk postingan sendiri sebetulnya sudah ada fasilitas otomatis yang bisa digunakan yaitu upload picture. Pilih gambar yang ingin di upload kemudian pilih ukuran mau yang kecil, sedang atau besar. Namun yang menjadi masalah ketika gambar tadi selesai di upload ternyata hasilnya melebihi lebar kolom dan saat mengutak-atik tidak juga sesuai dengan lebar kolom. Dari sini penulis mencoba banyak cara dan salah satu yang mujarab adalah melalui situs webresizer yang bisa diakses langsung di link ini webresizer.com selain untuk memperkecil ukuran gambar web ini juga menyediakan fasilitas crop (potong gambar).

Langkah-langkahnya seperti berikut :

- Setelah masuk dalam situs webresizer klik tombol resize photo now
- Di bagian upload an image klik browse lalu upload image
- Kemudian akan tampil gambar hasil reduksi (ukuran menjadi lebih kecil)
- Karena blm sesuai dengan lebar kolom blog kita pada box new size isikan berapa lebar kolom blog anda lalu centang width. Pada blog ini lebar kolom postingan adalah 560 pixel
- Jika sudah download this image hasil perubahan tadi
- Selanjutnya kunjungi situs ini imageshack.us untuk mendapatkan kode html hingga gambar tadi dapat tampil di postingan
- Kurang dari 30 detik akan terlihat banyak kode html
- Arahkan pndangan anda pada bagian Links to share your image
- Kode html akan terlihat seperti dibawah

<a target='_blank' title='ImageShack - Image And Video Hosting' href='http://img197.imageshack.us/i/paypallogoopt.jpg/'><img
src='http://img197.imageshack.us/img197/330/paypallogoopt.jpg' border='0'/></a>
Uploaded with <a target='_blank' href='http://imageshack.us'>ImageShack.us</a>

- Hilangkan kode yang berwarna merah diatas hingga hasil akan seperti

<a target='_blank' title='ImageShack - Image And Video Hosting' href='http://img197.imageshack.us/i/paypallogoopt.jpg/'><img src='http://img197.imageshack.us/img197/330/paypallogoopt.jpg' border='0'/></a>

- Berikut tampilan gambar yang akan muncul



- Bila anda klik gambar diatas akan ada link yang menuju pada situs imageshack karena kita menggunakan jasa dari situs tsb kalau menggunakan fasilitas dari situs lain tentu akan mengarah pada situs yang dimaksud
- Agar gambar tidak mengandung link saat di klik cukup hilangkan href pada kode html tadi

<a target='_blank' title='ImageShack - Image And Video Hosting' href='http://img197.imageshack.us/i/paypallogoopt.jpg/'><img src='http://img197.imageshack.us/img197/330/paypallogoopt.jpg' border='0'/></a>

- Hikangkan warna merah yang dicetak tebal

- Contohnya akan jadi seperti ini



- Silahkan anda arahkan pointer mouse ke gambar di atas dan coba untuk mengklik tidak akan ada linknya.