Update kembali disela-sela kesibukan KKN.
Pada postingan kali ini, ane sedikit update tentang Effect Image Corner pada postingan sebelumnya. sama hal nya dengan Effect Image Corner, Auto Caption pada Gambar ini masih membahas sekitar modifikasi gambar pada postingan dengan sentuhan effect auto caption sebagai keterangan pada gambar tersebut agar terlihat lebih menarik dan lebih elegant.


Demo Auto Caption pada GambarKlik disini untuk melihat demo Auto Caption pada Gambar

Auto Caption pada Gambar adalah effect pada gambar dipostingan yang mana effect tersebut membungkus gambar dan memberikan wadah untuk keterangan dari gambar, kurang lebih keterangan gambarnya seperti ini:


Tertarik ??
Mari kita lihat cara membuatnya :

Langkah 1
Masukan kode dibawah ini diatas kode ]]></b:skin> pada halaman Rancangan - Edit HTML template blog sobat semua.

div.gambar {
margin:2px 1px 10px;
padding:5px;
text-align:center;
background:url() repeat-y scroll left center #E3C7EF;
border:1px solid #6A2D86;
display:inline-block;
}
div.gambar img {
display:block;
}
div.gambar span{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
background:url() repeat-x scroll 0 0 #6A2D86;
color:#fff;
margin:5px 0 0;
display:block;
padding:2px;
border:1px solid #6A2D86;
}

Langkah 2
Pasang Framework jQuery dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Seperti biasa, jika Framework jQuery tersebut sebelumnya sudah sobat pasang di template sobat, maka Langkah 2 dilewat saja.

Langkah 3
Letakan kode dibawah ini diatas kode </head> pada halaman Rancangan - Edit HTML template blog sobat semua, atau setelah kode Framework jQuery diatas bagi yg belum pernah memasang Framework jQuery tersebut.

<script style='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".gambar").each(
 function() {
  $(this).wrap("<div></div>");
  $(this).parent().attr("class", "gambar");
  $(this).attr("class", "");
  $(this).parent().append("<span>" + $(this).attr("alt") + "</span>");
  $(this).removeAttr("style");
  $(this).parents("a").removeAttr("href");
 }
);
});
//]]>
</script>

Langkah 4
Save template sobat, dan dilanjut membuat satu postingan dengan mengupload gambar pada postingan tersebut.

Langkah 5
Cari kode HTML gambar yg sudah diupload pada mode Edit HTML new entry post sobat, biasanya kode HTML dari gambar akan membentuk seperti ini :

<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/s400/autocaption-girant.jpg" alt="Ket Gambar" width="400" />

Setelah ketemu. lalu. . .

Langkah 6
Sisipkan kode class="gambar" pada kode HTML gambar diatas, sehingga akan membentuk keseluruhan kodenya seperti dibawah ini :

<img class="gambar" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb8LVy3KXnbot0KZHUpx8kYC0ptdy9XFky1ZxWhtNIQ1kBaHuv-PWe5iUMaqOLxpOw5s_kUBKSzVqvqXjnPBRBwhT36AISeP5yP_MC8DgVU43A2hRKAz5FCE4zZEcZYRceQZhfjFCwNuc/s400/autocaption-girant.jpg" alt="Keterangan Gambar" width="400" />

Langkah 7
Lantas bagaimana dengan memberikan keterangan pada gambar tersebut??
biasanya sudah secara otomatis terpasang atribut alt="ket gambar" pada kode HTML gambar tersebut. namun saran ane, sesuaikanlah dengan keterangan gambar yg kita kehendaki dengan mengisi atribut tersebut.

Langkah 8
Terbitkan entri posts sobat, dan lihat hasilnya..
Terciptalah secara otomatis Auto Caption pada Gambar di postingan sobat.
menarik bukan ??

Selesai.
Selamat mencoba dan semoga bermanfaat.