CSS Image Bundle - Untuk Mempercantik Tampilan Gambar Blog

Iwan Efendi

Diperbarui: 13 Apr, 2024 • 2 • 4 menit membaca

Daftar Isi

Kode CSS
img-left
img-right
img-center
img-caption

Tidak dipungkiri, sebuah tulisan tanpa gambar akan sangat membosankan, dan juga kurang menarik perhatian. Apa lagi untuk saya yang membagikan tutorial di blog, akan sangat perlu gambar demi gambar untuk menjelaskan apa yang saya bagikan di setiap artikel.

Jadi, pada kesempatan kali ini saya akan sedikit membagikan tutorial CSS Image Bundle yang saya dapati dari blog kang ismet, CSS ini sangat membantu saya dalam menentukan bagaimana sebuah gambar itu bisa ditampilkan dengan sangat baik kepada para pembaca, walaupun terkadang saya ragu apakah ada orang yang membaca blog saya ini. hehe

Kode CSS

CSS dibawah ini saya adopsi dari blog Kang Ismet, namun saya sedikit rombak untuk menyesuaikan penggunaan saya.

.img-center{text-align:center;margin:0 auto}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:left}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:right}
.img-border{border:1px solid #dddddd}
.img-200,.img-300,.img-400,.img-500,.img-600{width:100%;text-align:center;clear:both}
.img-200{max-width:200px}
.img-300{max-width:300px}
.img-400{max-width:400px}
.img-500{max-width:500px}
.img-600{max-width:600px}
.img-caption{display:block;margin-top:5px;font-size:small;line-height:1.3;opacity:.6;font-style:italic}
@media screen and (max-width:640px){.img-500.img-left,.img-500.img-right,.img-600.img-left,.img-600.img-right{clear:both;float:none;margin:1em auto;text-align:center}}
@media screen and (max-width:414px){.img-200.img-left,.img-200.img-right,.img-300.img-left,.img-300.img-right,.img-400.img-left,.img-400.img-right{clear:both;float:none;margin:1em auto;text-align:center}}

Pada CSS tersebut sudah di atur sesuai kebutuhan kita, dan tentu juga sudah responsif. Saya tambahkan class .separator agar ketika di klik akan menampilkan lightbox bawaan dari blogger.

img-left

img-left digunakan untuk menyimpan gambar kecil di sebelah kiri teks. img-left harus dipadukan juga dengan ukuran gambar agar ketika tampil di layar yang lebih kecil, ukurannya proporsional. Contoh gambar dibawah adalah 300px, maka padukan dengan img-300. untuk format penulisan:

Ukuran yang tersedia img-200 sampai img-600. Silahkan bisa ditambah sendiri.

<div class='separator'>
<div class='img-left img-300'>
<a href="url_gambar">
 <img alt='image_title' src='url_gambar'/>
 </a>
</div></div>

Kamu hanya perlu mengganti url_gambar dan image_title sesuai kebutuhan, untuk url_gambar kan ada dua isi satunya untuk tampilan lightbox, satunya untuk tampilan 300px langsung di blog.

Baca Juga: loading

Contoh Paragraf img-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum augue sit amet velit gravida eleifend. Vivamus vitae urna porttitor, tristique velit vel, tincidunt metus. Sed dignissim nulla a sollicitudin lobortis. Aenean a semper nunc. In porta euismod placerat. Pellentesque sapien sem, interdum eget justo eget, consequat varius nisl. Aenean pellentesque diam a est cursus facilisis. Aliquam mollis lorem nec fringilla faucibus. Nam non aliquam dui. Maecenas vel pharetra lacus, suscipit dignissim metus. Sed erat massa, volutpat in congue eu, tincidunt non quam. Integer ut facilisis nunc. Proin elit diam, interdum eget lorem at, molestie sagittis felis. Nam consequat eros quam.

img-right

img-right digunakan untuk menyimpan gambar kecil di sebelah kanan teks, sama seperti di atas, tambahkan ukuran gambar. untuk format penulisan:

<div class='separator'>
<div class='img-right img-300'>
<a href="url_gambar">
 <img alt='image_title' src='url_gambar'/>
 </a>
</div></div>

Contoh Paragraf img-right

img-center

img-center digunakan untuk menyimpan gambar kecil di tengah-tengah, untuk format penulisan:

<div class='separator'>
<div class='img-center img-500'>
<a href="url_gambar">
 <img alt='image_title' src='url_gambar'/>
 </a>
</div></div>

Contoh Paragraf img-center

img-caption

Untuk menambah keterangan gambar (caption), contoh format penulisannya seperti ini:

<div class='separator'>
<div class='img-left img-300'>
<a href="url_gambar">
 <img alt='image_title' src='url_gambar'/>
 </a>
 <span class='img-caption'>Ket_Gambar</span>
</div></div>

Contoh Paragraf img-caption

Ket_Gambar

Kurang lebih seperti itu lah yang biasa saya gunakan pada blog ini, itu bertujuan agar lebih bisa menampilkan gambar yang lebih rapi dan ennak untuk dilihat, karena kalau saya butuh tulisan ini suatu hari nanti saya juga akan sangat senang membacanya. Semoga bermanfaat.

Referensi: