jQuery Auto Image Caption

Bismillah... Artikel ini lebih bersifat update/penyempurnaan dari artikel sebelumnya dengan tampilan yang lebih bagus tentunya. Caption atau keterangan diambil dari attribute alt pada gambar itu sendiri yang menurut para pakar SEO attribute alt merupakan salah satu cara untuk meningkatkan SERP, sedangkan secara default Blogger hanya memberikan attribute-nya saja dengan nilai/value kosong. Selain itu Script jQuery Auto Image Caption akan memanipulasi attribute href dan style untuk dibuang dari attribute default-nya sehingga gambar tidak memiliki link dan tidak dipengaruhi oleh elemen standar bawaan Blogger. Hasil yang ditampilkan hanya sebuah gambar tanpa link dengan penambahan frame dan caption (keterangan) gambar sehingga tampilan menjadi lebih indah. (Hmm... cukuplah sebagai pembuka... Let's begin for play until lieur...!!!!)

Demo jQuery Auto Image Caption

Integrasi jQuery Auto Image Caption pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

div.gambar {
margin:2px 1px 10px;
padding:5px;
text-align:center;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggl7Dfa_rMQbHvw5CivRY6O4SPdHEW7UjtdY8sY-cgoy_TOngQw_EZoge85y9n6TM-F5ZnlgpCMUTCUlVPach-mFr61o7GYviko3qdcIhdrr8MbBmXuZP2QeD6OF69TPktNoBdJCCLqSE/d/bg5.gif) repeat-y scroll left center #E7F7FB;
border:1px solid #7BC4DF;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFSekNzzCdnuXbaykU6KU5dzZYOKhpszqjcHuWN7HB_SaiocDjQ5RwR6Ak7oDmRuBycDm5ixSbv_eVblaH7MtThyphenhyphenYR2TAKXcNLqoT0sl7_nSwZQY5uD1ptANgtsQA2tWBUA4nGwjrXd0/d/bg4.gif) repeat-x scroll 0 0 #56b0d2;
color:#fff;
margin:5px 0 0;
display:block;
padding:2px;
border:1px solid #2F94BA;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<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 7
Simpan template dan lanjutkan tutorial...

Menyisipkan Kode jQuery Auto Image Caption pada Artikel

Langkah A
Buatlah sebuah artikel dan upload sebuah gambar pada artikel anda
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Cari kode gambar hasil upload kita, sebagai contoh kode gambar seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s1600/jQuery-Auto-Image-Caption.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5484533350455173970" /></a>

Langkah D
Sisipkan kode dibawah ini pada kode gambar:

class="gambar"

Isi attribut alt sesuai dengan keterangan dari gambar yang kita upload, seperti contoh dibawah ini:

alt="Keterangan Gambar"

Sehingga kode secara keseluruhan menjadi seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s1600/jQuery-Auto-Image-Caption.jpg">
<img class="gambar" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTLZXtj6xdvoEnch1XcxKqGE7sow0XSHmuQGvOuLVHsExSxHxm8FsIshiPOY5gG_nCxw79CS3_Pv7RGc9TZuoPQtobQcZetN-de8F4-97zKp5oYrJnJ1AulN-U4w9KLa1hNFyYQSXTe7o/s400/jQuery-Auto-Image-Caption.jpg" border="0" alt="Keterangan Gambar"id="BLOGGER_PHOTO_ID_5484533350455173970" /></a>

Langkah E
Terbitkan artikel dan preview artikel yang baru saja kita buat...

Unduh jQuery Auto Image Caption

Keterangan:

• Jika anda pernah memasang loader framework jQuery maka kode pada langkah 6 baris 1 tidak perlu diikutsertakan. (Baca disini)
• Ubahlah komposisi warna dari kode CSS sesuai dengan yang anda ingin atau disesuaikan dengan template. (Artikel CSS menyusul)

Alhamdulillah... Selamat mencoba dan semoga berhasil. Happy Blogging :)