Cara Membuat Tulisan/Keterangan Gambar Terlihat Menarik

By |Updated: November 10, 2016 0 Comment

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.”

caption, tulisan keterangan gambar

Image: contoh tulisan keterangan seperti gambar diatas

Cara membuat tulisan atau keterangan gambar

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 Membuat Keterangan Gambar

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.

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

caption blogger

Image: caption blogger

Metode Manual Membuat Keterangan Gambar

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.

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

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

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *