Mengatur Gambar di Blog

Share Article : Tweet This FB Share Email Share

oleh cerita anak kost on Wednesday, October 17, 2012

Gambar yang ada di blog sebaiknya di atur dan di sesuaikan, karena kalau tidak nantinya justru bisa memberatkan blog kita sendiri. Misalnya, ada punya file foto yang kemudian anda langsung upload ke blog, alhasil file foto yang ukurannya sangat besar bisa memakan badwith ketika orang membuka blog anda dan blog akan terasa lambat.

Keuntungan lain dengan mengatur gambar di blog, kita bisa membuat iklan pribadi lewat gambar senderhana. untuk yang masih baru dalam menggunakan blogger, tehnik untuk membuat gambar jadi iklan biasanya si belum tau. Olehkarenannya saya perlu shararing sedikit mengenai pengaturan gambar di blog.

Menggatur Gambar di Blog

Cara Memasukkan Gambar

Untuk mengupload gambar di blog sebenarnya tidak lah sulit, cukup dengan cara mengupload biasa kita akan mendapatkan gambar tersebut tampil di posting. untuk yang belum tahu, saya akan berikan sedikit cara untuk menguploadnya.
1. buka blogger
2. klik bagian kiri atas, new post
3. klik bagian yang menandakan insert picture
Menggatur Gambar di Blog

Susunan HTML dasar Gambar

Coba kita lihat susunan pictur yang tersedia. Mari kita belajar sedikit tentang HTML picture, cara melihatnya dengan menuju ke bagian HTML pada postingan. Berikut adalah contohnya :
<a href="http://carikost.blogspot.com" ><img border="0" src="http://i951.photobucket.com/albums/ad355/drieant/ceritaanakkost-1.png" height="46" width="200"/></a>

Nah itu adalah struktur dasar HTML dari sebuah gambar, yang kalau anda masukan ke dalam widget HTML akan tampil disana. Yang pelru sedikit di jelaskan, kode <a href=".....> sampai </a> adalah url yang di tuju, maksudnya kalau gambar tersebut di klik maka akan menuju url yang ada pada href=, atau yang berwarna merah dimana yang saya tuju adalah url blog saya, http://carikost.blogspot.com. 

Untuk kode <img src="......"/> adalah kode dasar untuk gambar. Ia akan di tampilkan sesuai dengan url sumber gambar (yang berwarna biru). Namun ada baiknya anda menambahkan width="200" atau height="46" untuk mengatur lebar dan ketinggiannya. Jadi dengan gambar yang sama anda bisa mengatur ukurannya sesuai dengan yang anda inginkan. Hal ini juga yang bisa menjadi bumerang, dimana gambar yang aslinya berukuran besar bisa di perkecil dengan menambahkan width atau hight. Sebaiknya anda benar benar mengkompres ukurang gambar sehingga tidak melebihi 100kb ketika di upload.

Menggatur Gambar di Blog

Gambar di atas saya dobelkan ukurannya sehingga terlihat lebih besar, dengan kode seperti di bawah ini :
<a href="http://carikost.blogspot.com/"><img border="0" height="92" src="http://i951.photobucket.com/albums/ad355/drieant/ceritaanakkost-1.png" width="400" /></a>

Pengaturan cukup dengan memberikan width="400" dan di isi dengan angka yang sesuai (dalam pixel), maka ukuran tingginya pun akan menyesuaikan secara proposional. Ini penting ketika anda mengatur image atau gambar pada widget anda, apalagi kalau ukuran nya tidak rata. BIasanya terjadi ketika seseorang bertukar banner dan ukurannya berbeda beda, sedangkan tempat yang tersedia di blog kita terbatas. Hal ini yang di alami oleh mba ririekhayan (http://www.ririekhayan.com/) dimana saya rasa perlu mengartur lebar gambar agar semua tampak teratur dan serasi.

Sebenarnya anda bisa menambahkan sedikit fariabel selain width dan hight pada gambar, yaitu rel="nofollow" dan target="_blank". Untuk rel="nofollow" adalah memberikan fungsi agar url blog tersebut tidak di trace oleh google sehingga kalau ada terjadi keburukan kita tidak ikut kena imbasnya. Sedangkan  target="_blank" berfungsi ketika gambar tersebut di klik akan terbuka di tab yang baru. Untuk peletakan kodenya disatukan dengan href, contohnya seperti berikut <a href=..... rel="nofollow" target="_blank">

Kalau anda ingin mengganti ukuran aslinya, anda cukup menghilangkan width dan hight pada gambar. Semoga artikel sederhana ini bisa membatu sedikit bagi anda yang ingin memperbaiki dan mengatur gambar di blognya.

drieant Cerita Anak Kost Updated at: Wednesday, October 17, 2012