Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

CSS Image Bundle - Untuk Mempercantik Tampilan Gambar

CSS untuk mengatur tampilan gambar

CSS Image Bundle - Kumpulan CSS untuk image ini saya namakan CSS Image Bundle, karena fungsinya untuk mengatur tampilan gambar pada beberapa posisi.

CSS ini selalu ada walaupun saya berganti-ganti template, dan entah berapa tahun sudah. CSS ini saya dapatkan hasil ngobrol dengan Kang Adhy Suryadi, pemilik AdhySuryadi.com dan saya tambahkan CSS Caption, (dulu pemilik Kompi Ajaib, sekarang sudah berganti pemilik).

CSS Image Bundle

/* CSS Image Bundle by Adhy Suryadi */
.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 #ddd}
.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;}
}

Silahkan Perhatikan CSS di atas, ada beberapa pengaturan yang sudah diatur, termasuk responsivitas

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='img-left img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh (teks saya gunakan Lorem Ipsum)

Interior

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='img-right img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

Interior

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-center

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

<div class='img-center img-500'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

Interior

img-border

img-border digunakan apabila ingin menambah border pada image. Apabila pada gambar kecil, jangan lupa tambahkan juga ukuran seperti diatas

<div class='img-center img-500 img-border'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
</div>

Contoh :

Interior

img-caption

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

<div class='img-left img-300'>
	<img alt='Keterangan Gambar' src='url_gambar'/>
	<span class='img-caption'>Keterangan Gambar</span>
</div>

Contoh

Interior Geopark Ciletuh - Sukabumi

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.

Apabila ada tambahan, silahkan share di kolom Komentar.

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

9 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Terimakasih pencerahannya kang, apa bedanya dengan penulisan seperti ini <div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
    1. Penggunaan Inline CSS itu masih jadi perdebatan, malah sebagian menyebutkan kurang bagus untuk SEO. Terlepas dari perdebatan itu, menurut saya inline CSS tidak efektif, kita harus mengulang-ngulang penulisan setiap membuat postingan, yang efeknya akan menambah ukuran loading blog
  2. Bukanya css ini ada di template plus iu ini ya, beda class nya aja
    1. Ngga mas, cuma sebagian aja paling. Malah nulis image captionnya pake tabel, jangankan pemula, yang terbiasa aja susah ngapal, harus copas hehe
    2. Font nya di homepage pake apa mas kok keren
    3. Red Hat Display. google font ko.. cari aja
  3. well untuk kepraktisan blogspot memang bawaan yang sayangnya otomatis secara inline. tapi itu lebih ramah untuk penulis (bukan penulis kode)
    1. makanya saya ga pernah langsung upload gambar di postingan, karena menyertakan inline CSS, saya selalu upload terpisah. walaupun lebih ramah bagi penulis, terkadang ngaco karena tanpa media queries
  4. Izin pakai mas, dan izin repost ke blog juga buat catatan pribadi.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.