Cara Membuat Tulisan/Keterangan Gambar Terlihat Menarik

Aura Ilmu » Blog » Cara Membuat Tulisan/Keterangan Gambar Terlihat Menarik

Oleh: Tatang Gunawan | Update Terakhir: 17 May 2017 | 1 Comment

Cara Membuat Keterangan Gambar. Pada posting berikut ini saya mencoba untuk menjelaskan bagaimana cara membuat keterangan gambar atau tulisan yang biasanya disertakan di bawah gambar lebih terlihat menarik. Keterangan gambar ini biasanya juga disebut “caption”.

Caption adalah keterangan foto atau gambar yang digunakan untuk melengkapi berita, table, objek ataupun yang berkenaan dengan peristiwa. Keterangan gambar ini bisa dimodifikasi sedemikain rupa, disesuaikan dengan kreativitas masing-masing.

Sebelumnya saya tidak menduga ada yang tertarik dengan tampilan caption ini, dan bertanya bagaimana cara membuatnya? Walaupun pada dasarnya sangatlah mudah, tetapi mungkin bisa jadi sulit bagi orang yang belum mengetahui.

Seperti kata orang bijak “Sesuatu yang sederhana itu akan Tetap menjadi Rahasia bagi seseorang, sampai dia Mengetahuinya.”

Image: contoh tulisan keterangan seperti gambar diatas

Sebenarnya banyak sekali cara-cara untuk mempercantik dan memodifikasi tampilan sebuah Blog, seperti tombol back to top dengan efek bounce atau membuat slider keren, namun perhatikan juga utamakan Blog yang “friendly” dengan kata lain bagus kualitasnya bagi mesin pencari dan juga pengunjung.
Baiklah, dibawah ini pada dasarnya hanyalah 1 baris kode CSS adalah metode otomatis yang bisa digunakan pada platform Blogger, sedangkan untuk Blog ataupun website lain mungkin bisa menggunakan metode manual diuraikan berikutnya.
Metode Otomatis

Pada Platform Blogger Perintah keterangan tulisan ini ditandai dengan kode .tr-caption, jadi berikut adalah kode CSSnya. Simpan kode berikut ini diatas ]]></b:skin> atau diatas </style> dibagian head template.

1234567891011.tr-caption {
 text-align: left!important; /* Pilihan left center right */
 bottom: 30px; /* Ukuran jarak dari bawah */
 position: relative; /* Harus relative */
 display: block; /* Harus block atau inline block */
 padding: 5px 10px; /* Jarak Tulisan Dari Batas kotak tulisannya */
 color: #fff; /* Warna Tulisan */
 background-color: #000; /* Background Kotak Buat alternative */
 background: rgba(0,0,0,0.4); /* Background transparan Secara Umum Pada Browser yg sdh mendukung */
 font:Bold 12px arial; /* Besar Tulisan dan jenis huruf */
}

Keterangannya diuraikan dalam baris kode-kodenya sebagai pilihan agar dapat dimodifikasi, keterangan tersebut dapat juga langsung dimasukan kedalam template tanpa dihapus. Khusus untuk background transparan berlaku pada browser modern,  angka 0,0,0 adalah warna hitam sedangkan 0,4 adalah transparansinya.
Save template dan cobalah membuat caption pada sebuah gambar dengan mengklik gambar akan terlihat Add caption, kemudian tulislah sesuatu dan lihat hasilnya. Untuk membuang caption yaitu kebalikannya dengan mengklik gambar akan terlihat Remove caption. Kemudian jika jarak gambar dan tulisan paragraph berikutnya berjauhan tinggal dihapus baris <br /> atau kode yang tidak perlu ada posting HTML.

Image: caption blogger

Metode Manual

Sebenarnya bisa dibilang semi-otomatis, pada dasarnya sama dengan yang dijelaskan diatas, hanya saja mungkin Blog yang lain menggunakan perintah yang berbeda, contohnya perintah .tr-caption diganti dengan .nama-lain atau .keterangan. Berikut adalah contoh perintah kode CSSnya, simpan kode berikut ini diatas </style> dibagian head.

1234567891011.keterangan {
 text-align: left!important; /* Pilihan left center right */
 bottom: 30px; /* Ukuran jarak dari bawah */
 position: relative; /* Harus relative */
 display: block; /* Harus block atau inline block */
 padding: 5px 10px; /* Jarak Tulisan Dari Batas kotak tulisannya */
 color: #fff; /* Warna Tulisan */
 background-color: #000; /* Background Kotak Buat alternative */
 background: rgba(0,0,0,0.4); /* Background transparan Secara Umum Pada Browser yg sdh mendukung */
 font:Bold 12px arial; /* Besar Tulisan dan jenis huruf */
}

Berikut adalah contoh penerapannya pada HTML posting.

1234<img alt="nama gambar" src="image-link.jpg" title="title gambar" />
<div class="keterangan" style="/* tambahan lain seperti width:angka; margin:0 auto*/" >
<span>Tulisan Keterangan Gambar Disini</span>
</div>

Dikarenakan setiap gambar bisa memiliki lebar yang berbeda-beda, maka dapat ditambahkan setelan lebar pada style tambahan-lain pengaturan. Save dan lihat hasilnya.

Sekian, terima kasih dan mudah-mudahan bermanfaat.