Memperbaiki Tata Letak Gambar Artikel Blog
Gambar artikel blog terkadang menjadi bagian yang lebih menarik dan bahkan membuat pembaca blog penasaran
Daftar isi
Saat membuat artikel blog, salah satu hal yang penting yang harus dimasukkan adalah gambar. Gambar artikel blog terkadang menjadi bagian yang lebih menarik dan bahkan membuat pembaca blog penasaran dengan isi dari artikel tersebut. Gambar yang bagus belum tentu menjadi daya tarik tersendiri bagi pembaca untuk membaca artikel dari gambar tersebut. Begitu juga dengan yang biasa-biasa saja bahkan tidak mewakili dari isi artikel blog tersebut, malah menjadi bacaan favorit.
Masih ingat dengan pelajaran bahasa Indonesia tentang artikel lengkap? Syarat sebuah artikel dikatakan lengkap jika ada 3 komponen penting didalamnya yaitu:
- Judul artikel
- Artikel
- Gambar artikel
Begitu juga untuk sebuah blog. Dalam membuat artikel, 3 komponen tersebut wajib ada karena ketiganya memiliki manfaat yang sangat bagus untuk perkembangan blog. Dan untuk membuat artikel yang lengkap dalam sebuah blog itu, bukanlah sesuatu yang mudah dilakukan. Masih banyak blogger-blogger yang bingung untuk membuat artikel, khususnya dalam mencari ide untuk menulis artikel-artikel yang baru.
Baca Juga: Cara Membuat Artikel Blog
Padahal selain menulis artikel yang harus diatur sedemikian rupa agar tulisan tersebut enak dibaca, masih ada gambar artikel yang harus dipasang. Sama halnya dengan membuat artikel, memasang gambar juga seperti itu. Butuh gambar yang sesuai dengan isi artikel, butuh gambar asli untuk artikel tersebut, dan penempatan gambar dalam artikel juga perlu diperhatikan.
Untuk mencari gambar yang sesuai dengan isi artikel, masih bisa mencari di Google dan menyertakan sumber dari gambar tersebut jika gambar yang digunakan adalah gambar khusus atau belum digunakan oleh blog-blog yang lain. Namun jika ingin menggunakan gambar asli, ada 2 cara yang bisa dilakukan yaitu mengambil gambar dengan kamera atau membeli gambar dari layanan penyedia gambar.
Baca Juga: Gambar Premium Gratis Dari Envato
Bagaimana Dengan Tata Letak Gambar Artikel Blog?
Tata letak dalam hal ini penempatan pemasangan gambar bisa dipasang diatas artikel dan ditengah artikel. Namun jika tata letak gambar tersebut kurang pas maka bisa diperbaiki dengan menggunakan fitur yang ada dibagian atas halaman Post yaitu Toolbar yang berisi icon-icon seperti dibawah ini:
Untuk memasukkan gambar kedalam artikel, caranya dengan mengklik icon Gambar yang ada di Toolbar tersebut. Dengan mengklik icon gambar tersebut, nantinya ada pengaturan Tata letak gambar yang bisa disesuaikan dengan keinginan.
Dengan mengatur tata letak dari gambar tersebut, Anda dengan sangat mudah untuk menempatkan gambar artikel dimanapun yang Anda sukai. Cara ini adalah termudah dalam mengatur tata letak gambar artikel blog. Jika ingin yang agak rumit, bisa menggunakan kode CSS yang harus dipasang kedalam kode template blog.
Kode CSS untuk mengatur tata letak gambar artikel ini secara dasar seperti dibawah ini. Kode ini adalah kode dasar yang bisa disesuaikan dengan lebar dan tinggi gambar yang diinginkan. Dengan memasang kode css gambar ini, maka secara otomatis akan mengatur tampilan gambar artikel tanpa harus mengatur menggunakan toolbar seperti yang sudah dijelaskan diatas.
Setiap pemasangan gambar kedalam artikel, gambar tersebut akan memiliki format HTML seperti berikut:
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIk8334Rj3WkqxRCoeb1zShW5ACzFlEV1HljJnloSJpvdwEewwZI0xbtEfH-woSvGXzsYv-d59xofUSTirnp1CYB5L0GxMRbTY91XgHnUY6BDVpP5DDQJhD8WaDJL5u0jFoodHNQr7rk/s0/memperbaiki-tata-letak-gambar-artikel-blog.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="400" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIk8334Rj3WkqxRCoeb1zShW5ACzFlEV1HljJnloSJpvdwEewwZI0xbtEfH-woSvGXzsYv-d59xofUSTirnp1CYB5L0GxMRbTY91XgHnUY6BDVpP5DDQJhD8WaDJL5u0jFoodHNQr7rk/s0/memperbaiki-tata-letak-gambar-artikel-blog.jpg"/></a></div>
Perhatikan kode img yang berwarna hijau diatas. Kode img tersebut adalah kode CSS yang bisa digunakan untuk mengatur tata letak gambar didalam postingan. Pengaturan tersebut bisa untuk mengatur besar kecil gambar, tata letak gambar: dipinggir kiri, ditengah artikel, atau dipinggir kanan artikel.
Misalkan gambar yang ingin ditampilkan menyesuaikan dengan lebar halaman artikel atau halaman posting, maka pengaturan kode CSS adalah seperti berikut:
img{width:auto;max-width:100%;height:auto}
Karena gambar artikel berada didalam area body blog, maka didalam kode CSS dipasang kode post blog. Sehingga penggunaan kode CSS untuk gambar artikel seperti berikut:
.post-body img{width:auto;max-width:100%;height:auto}
Atau bisa menyesuaikan dengan penggunaan kode CSS yang ada didalam kode template blog yang Anda gunakan.
Sebenarnya lebih mudah menggunakan Toolbar yang ada di halaman posting, cukup mengatur tata letak yang diinginkan tanpa ribet mikirin kode CSS. Karena untuk tata letak yang lain seperti letak kanan dan kiri, jika menggunakan kode CSS, maka harus menambahkan kode CSSnya dulu dan memasukkan kode selectornya kedalam kode HTML gambar artikel blog.
Jika ingin menggunakan kode CSS, gunakan kode berikut untuk menempatkan gambar di posisi sebelah kanan.
.post_body img .img_left{width:100px;height:100px;float:left;margin:0px 9px 3px 0px}
Dan penggunaan kode HTML untuk gambar artikelnya seperti berikut ini:
<div class="separator"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIk8334Rj3WkqxRCoeb1zShW5ACzFlEV1HljJnloSJpvdwEewwZI0xbtEfH-woSvGXzsYv-d59xofUSTirnp1CYB5L0GxMRbTY91XgHnUY6BDVpP5DDQJhD8WaDJL5u0jFoodHNQr7rk/s0/memperbaiki-tata-letak-gambar-artikel-blog.jpg"><img class="img_left" alt="Memperbaiki Tata Letak Gambar Artikel Blog" data-original-height="400" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIk8334Rj3WkqxRCoeb1zShW5ACzFlEV1HljJnloSJpvdwEewwZI0xbtEfH-woSvGXzsYv-d59xofUSTirnp1CYB5L0GxMRbTY91XgHnUY6BDVpP5DDQJhD8WaDJL5u0jFoodHNQr7rk/s0/memperbaiki-tata-letak-gambar-artikel-blog.jpg" title="Memperbaiki Tata Letak Gambar Artikel Blog"/></a></div>
Dan hasilnya seperti dibawah ini:
Artikel ada disebelah kanan gambar. Tulis artikel yang ingin ditampilkan disebalah sini sesuai dengan artikel yang ditulis.
Untuk artikel sebelah kiri gambar seperti ini:
Artikel ada disebelah kiri gambar. Tulis artikel yang ingin ditampilkan disebalah sini sesuai dengan artikel yang ditulis.
Memasang gambar di artikel menggunakan CSS ini memang agak ribet karena selain harus menambahkan kode CSS juga harus merubah mode Tampilan Posting, dari Tampilan Menulis ke Tampilan HTML yang ada disebelah pojok kiri halaman post dengan icon
Agar tidak terlalu ribet, lebih baik tetap gunakan bantuan toolbar yang sudah disediakan dalam mengatur atau memeprbaiki tata letak gambar artikel blog yang sesuai dengan keinginan. Biasanya untuk saat ini, semua gambar artikel ditempatkan ditengah artikel antar paragrap jika gambar yang digunakan lebih dari dua.
