Cara Modifikasi Caption Gambar Postingan Menjadi Simpel Tapi Keren

Ketika mengunjungi beragam situs web atau blog, seringkali saya menemukan tampilan-tampilan unik yang membuat saya tertarik untuk mempelajari cara penerapannya. Jika berhasil saya terapkan, maka tidak jarang kemudian saya bagikan caranya lewat postingan-postingan di blog ini. Seperti halnya pada postingan kali ini, kita akan coba memodifikasi tampilan caption gambar postingan agar tampak unik simpel keren seperti di situs-situs beken. 

Apa itu caption gambar?. Caption gambar (Image caption) adalah tampilan teks atau tulisan yang letaknya berada di bagian bawah gambar postingan blog. Tulisan ini biasanya berisi keterangan atau penjelasan mengenai gambar/ ilustrasi dalam postingan tersebut. Namun selain itu, adakalanya fitur ini kadang juga dipakai untuk menyebutkan sumber rujukan bagi gambar yang dipakai dalam postingan tersebut. Di blog ini, saya juga seringkali menggunakannya untuk keterangan sumber gambar. 

Secara default, fitur ini sebenarnya telah tersedia di dashboard blogger dan kita tinggal menggunakannya. Caranya yaitu seperti ketika kita hendak menambahkan tag alt dan title pada gambar artikel. Pada halaman postingan, klik pada gambar yang anda upload, maka akan muncul tampilan seperti di bawah ini:

setting caption gambar

Silahkan pilih ikon seperti yang saya tandai merah di atas, maka nantinya akan muncul area untuk menulis keterangan caption gambarnya. 

Jika sudah ditambahkan, selanjutnya kita akan coba mengatur tampilan caption gambar tersebut agar nantinya keterangan sumber gambar muncul di bagian pojok kanan bawah gambar postingan. Dengan begitu, teks image caption default yang sebelumnya muncul di bawah gambar kita pindah menjadi berada di pojok kanan bawah area gambar postingan. Kurang lebih perubahan tampilannya akan seperti di bawah ini. 

CONTOH DEMONYA

Bagaimana cara mengaturnya?. Silahkan simak dan ikuti langkah mudah di bawah ini untuk penerapannya. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

.tr-caption-container {

    position: relative;}

.tr-caption-container span {

font-size: 12px;

display: block;

position: absolute;

bottom: 4px; /* Atur nilai ini, jika posisi caption tidak sesuai */

right: 0; /* Atur nilai ini, jika posisi caption tidak sesuai */

background-color: rgba(0,0,0,.4);

text-align: center;

color: #fff;

font-style: italic;

padding: 2px 7px;}

4. Simpan template anda kembali dan lihat hasilnya. 

Kalau cara tersebut gagal, coba ganti kode di atas dengan kode di bawah ini:

.tr-caption {float:right;position:relative;display:block;height:auto; background-color: rgba(0,0,0,.4); font-size: 12px; font-style: italic; color:#fff;text-align:center;bottom:26px;padding: 2px 7px;border-radius: 4px 0px 0px 0px}

Saya tidak tahu apakah cara-cara di atas bisa berhasil diterapkan di template blog anda. Jika tidak work juga, anda bisa coba hapus terlebih dulu CSS bawaan untuk pengaturan "tr-caption" ataupun "tr-caption-container" nya di template blog anda. Semoga bermanfaat. 

Lokasi:

Berbagi :