Cara Membuat Style Caption Gambar Pada Blog Seperti Idntimes

Cara Membuat Style Caption Gambar Pada Blog Seperti Idntimes


Memperindah tampilan blog merupakan suatu keharusan bagi seorang blogger, dengan memperindah tampilan blog dapat membuat para pengunjung nyaman dan betah berlama - lama di blog kita, serta blog yang memiliki tampilan yang rapi, navigasi yang jelas dapat membuat blog kita tampak lebih profesional di mata pengunjung.


Namun tahukah kamu, untuk membuat blog agar tampak lebih profesional tidak hanya berkaitan dengan template atau tema saja, ada banyak hal yang dapat kamu lakukan, dimulai dari membuat gambar postingan yang keren, membuat konten yang relevan, bebas dari unsur plagiat, serta masih banyak lagi.


Namun perlu kamu ketahui bahwa dari beberapa unsur di atas yang paling berpengaruh untuk membuat blog kamu terlihat lebih profesional ialah bebas dari unsur plagiarisme.


Saat ini masih sangat sedikit kesadaran dari para blogger untuk menghargai karya orang, salah satu contohnya saja ketika hendak menautkan gambar pada postingan, acap kali kita melewatkan untuk melampirkan sumber gambar, mungkin bisa saja dikarenakan lupa, atau memang niat dari awal tidak mau melampirkan link sumber, ataupun karena style (baca: gaya) dari caption bawaan blog kurang menarik?


Nah, buat kamu yang malas menautkan link sumber karena tidak suka dengan style dari caption bawaan blog, kali ini saya akan memberikan sedikit tutorial untuk membuat caption gambar agar terlihat menarik seperti idntimes.com.


Jika kamu seorang milenial pastinya kamu tau ataupun setidaknya pernah mendengar idntimes donk? Yup, idntimes merupakan salah satu portal berita yang paling digandrungi oleh para milenial, karena konten - kontennya yang sangat "milenials-friendly" sekali, hehehe...


Tapi, pernahkah kamu memperhatikan bagaimana style caption pada gambarnya? jika belum coba deh kamu lihat kembali, terlihat keren dan profesional kan?


Nah, berangkat dari situlah saya ingin berbagi mengenai cara membuat caption sumber gambar seperti idntimes, silahkan disimak langkah - langkahnya.

  • Buka akun blogger kamu.
  • Selanjutnya pilih menu template/tema, kemudian pilih edit HTML
  • Salin script di bawah ini tepat di atas ]]></b:skin>.
.caption-gambar {
    position: relative;
}

.caption-gambar span {
font-size: 12px; display: block;
position: absolute;
bottom: 2px; /* 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: 3px 10px;}
  • Simpan template

Sampai di sini kamu telah berhasil mengubah style caption bawaan. Selanjutnya untuk memanggil style tersebut, silahkan ikuti langkah berikut ini.


  • Edit postingan kamu pada mode HTML.
  • Tambahkan script berikut ini.

<div class="caption-gambar">

<img src="URL Gambar Kamu" width="100%"/>

<span> Caption Gambar </span>

</div>
  • Simpan postingan

Gimana? apakah blog kamu sudah terlihat semakin keren dan profesional? pastinya iya donk? jika kamu mengalami kesulitan dalam mengimplementasikan script diatas, silahkan tinggalkan komentar kamu di bawah ini.


Artikel ini telah tayang di kurazone.net dengan judul "Cara Membuat Sumber Gambar Seperti IDNTIMES"