Cara Mengatur Ukuran Gambar Di Posting Blog Dengan Script

Gambar bagi sebuah blog memang dibutuhkan. Baik itu sebagai accessories blog maupun sebagai illustrator bagi tulisan. 

Di area postingan, ukuran gambar mungkin tidak menjadi persoalan, karena tersedianya ruang yang cukup luas untuk menempatkan gambar dan juga pengaturannya pun sangat mudah, tinggal kik and click. 

Caranya setelah gambar berhasil diupload, kemudian klik gambar tersebut dan akan muncul menu untuk mengatur gambar. 

Namun pengaturannya hanya dibatasi 5 ukuran saja yaitu small, medium, large, x-large dan original size. Memang walau hanya 5 ukuran saja tapi sudah cukup mewakili dan membantu kita khususnya untuk gambar yang akan dipasang di dalam postingan.

Bagaimana jika ingin membuat gambar menjadi ukuran yang sesuai dengan kemauan kita? Seperti misalnya ingin membuat gambar dengan ukuran panjang 200px dan tinggi 100px. 

Untuk memperbesar atau memperkecil ukuran gambar, tidak perlu repot-repot mengedit pakai software editor image tetapi dengan menggunakan kode script kita dapat mengatur ukuran gambar sesuai keinginan kita. 

Height and Width

Gambar yang akan dipasang di halaman blog tentu harus melalui proses upload terlebih dahulu. Setelah gambar selesai diupload maka akan didapat link gambar sebagai berikut :

<img src='URL gambar">

Apabila ingin membuat gambar tadi menjadi link yang mengarah ke suatu URL maka script akan menjadi seperti di bawah :

<a href='URL tujuan'><img src='URL gambar"></a>

Dari susunan kode seperti di atas, gambar yang muncul masih menampilkan ukuran yang sebenarnya. Sehingga bila tempat yang tersedia di blog lebih sempit dari gambar akan menimbulkan masalah baru.

Cara mengatasinya, gambar harus diatur. Kode yang diperlukan adalah kode weight dan height (weight=lebar, height=tinggi). Sedangkan penempatan kodenya seperti ini :

<img src='URL gambar' width='100' height='80'>

atau bila ingin membuat gambar tadi menjadi link yang mengarah ke suatu URL, maka susunannya kode scriptnya menjadi :

<a href='URL tujuan'><img src='URL gambar' width='100' height='80'></a>

Catatan :
- Untuk memperbesar atau memperkecil gambar, rubahlah angkanya.
- Untuk menjadikan gambar sebagai link, ubahlah URL tujuan.

Sekian artikel kali ini, tekan Ctrl + D di keyboard untuk bookmark halaman ini.

Jika ingin repost dimohonkan untuk mencantumkan link blog ini. Terima kasih telah berkunjung, jangan lupa baca artikel yang lainnya. Salam blogger.

Subscribe to receive free email updates: