Membuat Gambar Lebih Manis dengan Menambahkan Bingkai dan Judul menggunakan jQuery

Halo sobat blogger, kali ini saya ingin membagikan satu tips yang cukup menarik yang mungkin perlu untuk anda ketahui, terlebih bagi Anda yang suka memposting foto-foto pribadi dalam blog Anda. Saya secara tidak sengaja menemukannya di sebuah blog pada saat sedang blogwalking. Yaitu tips bagaimana cara menambahkan bingkai dan judul pada gambar sehingga tampak lebih manis. Maka pada kesempatan ini saya akan membagikannya untuk Anda juga.

Anda cukup lakukan beberapa langkah berikut ini :

1. Install Library jQuery
Jika Anda sudah instal Library jQuery, Anda tidak perlu lakukan langkah ini lagi, Anda bisa langsung melompat ke langkah berikutnya. Tetapi jika belum, maka yang harus anda lakukan adalah, copy code berikut dan taruh di bagian sebelum tag </head> pada kode HTML Blogger Anda :

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery -->

2. Install Script
Sekarang tambahkan code berikut pada bagian sebelum tag </head> :

<!-- addCaption -->
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
<!-- End of addCaption -->

3. Menambahkan Beberapa Style
Biar nampak cantik taru code berikut pada posisi sebelum ]]></b:skin>:

/* Image Captions
--------------------------------------------------- */
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;
}

4. Tambahkan pada Image atau Gambar Anda
Langkah terakhir adalah cukup selipkan gambar Anda seperti biasa menggunakan blogger.

Kemudian selipkan kode class='addCaption' title='Judul Gambar' pada tag <img> seperti pada gambar berikut:

sumber : http://www.bloggertuts.com