Menambahkan Keterangan Pada Gambar (Versi 2.0)

Labels:
Setiap pemilik blog dapat dipastikan memajang gambar-gambar sebagai salah penguat keterangan atau hanya sekedar hiasan dalam sebuah artikel. Tetapi seperti pernah dijelaskan pada artikel "Membuat Keterangan Gambar (Image Caption)" sebelumnya, proses penambahan keterangan gambar atau image caption untuk blogger sangatlah cukup menyulitkan. Dan sekarangan Blogger Tune-Up akan mencoba memberikan tips-n-trick membuat keterangan pada gambar atau image caption pada blogger yang paling cepat dan mudah. Blogger hack kali ini menggunakan jQuery sebagai platform JavaScript-nya, dan cukup kita menambahkan beberapa kode sederhana maka gambar-gambar yang kita pajang pada blogger secara otomatis diberikan bingkai dan keterangan pada gambarnya.
Menambahkan Keterangan Pada Gambar

Langkah integrasi Image Caption/Keterangan Gambar pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode di bawah ini diatas kode pada langkah 3:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
Langkah 5
Agar tampil menarik, gunakan CSS untuk mempercantik tampilan. Cari kode dibawah ini:
]]></b:skin>
Langkah 6
Masukan (copy paste) kode dibawah ini, diatas kode pada langkah 6:
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

div.addCaption img {
display:block;
}
Langkah 7
Simpan template, dan lanjutkan membaca....

Menyisipkan kode Image Caption/Keterangan Gambar pada artikel

Langkah A
Buatlah sebuah artikel dan masukan gambar (upload) yang ingin disisipkan pada artikel. Pindah mode penulisan ke Mode Edit HTML, dan cari kode <img ...>
Langkah B
Sisipkan kode Image Caption/Keterangan Gambar dibawah ini:
class='addCaption' title='Keterangan Gambar'
Sehingga kode gambar yang telah ditambah Image Caption/Keterangan Gambar seperti dibawah ini:
<a href="http://www.image.com//windows_flag.png">
<img class='addCaption' title='Keterangan Gambar' src="http://www.image.com/windows_flag.png" width="128" height="128"/>
</a>
Langkah C
Terbitkan artikel dan preview...

Keterangan:
  • Jika anda sudah memasang jQuery pada template sebelumnya, maka Langkah 4 tidak perlu dilakukan.
  • Cara lain memasang jQuery silahkan baca disini.
  • Perhatikan kode langkah 6! Kode #f0f0f0 (baris 5) digunakan untuk mengatur warna latar belakang, kode #ccc (baris 6) digunakan untuk mengatur warna garis tepi/border.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)