Langkah integrasi Image Caption/Keterangan Gambar pada Blogger
Langkah 1Login 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'/>Langkah 5
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
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 {Langkah 7
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;
}
Simpan template, dan lanjutkan membaca....
Menyisipkan kode Image Caption/Keterangan Gambar pada artikel
Langkah ABuatlah sebuah artikel dan masukan gambar (upload) yang ingin disisipkan pada artikel. Pindah mode penulisan ke Mode Edit HTML, dan cari kode <img ...>
Langkah BSisipkan 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">Langkah C
<img class='addCaption' title='Keterangan Gambar' src="http://www.image.com/windows_flag.png" width="128" height="128"/>
</a>
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.