Herkese yeni bir blogger dersleri yazısından merhabalar. Bu blogger dersimizde, blogumuzdaki resimlere   jQuery ile başlıklar ekleyeceğiz. 'Bu özellik zaten Blogger'da var!' demeyin. Blogger'daki sadece başlık ekliyor. Bu eklenti de, resim arkaplanında değişiklikler oluyor. Yani Blogger'daki ile, bu eklentiyi karıştırmamakta fayda var diye düşünüyorum. Belirttiğim gibi, eklenti sayesinde resimlerinize Başlık / Açıklama kısmı ekleyebiliyorsunuz. Ayrıca, CSS kısmından da isterseniz resminizin arkaplanındaki renklerle ilgili olarak vs. ayarlamaları yapabilirsiniz. Herneyse, eklenti adımlarına geçmek istiyorum.

Öncelikle aşağıdaki kodu buluyoruz;

</head>

Yukarıdaki koddan önce aşağıdaki kodları ekliyoruz;

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/addcaption.js' type='text/javascript'/>

Son olarak ise temamızın CSS kısmına aşağıdaki kodları ekliyoruz;

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;}

Resimlere başlık eklemek için ise, resim kodlarında aşağıdaki koda benzer olan kodu bulun;

<img class="border="0" height="213"

Yukarıdaki kodu bulduktan sonra, kodun en başına aşağıdaki kodu ekleyin. Yani şöyle olacak;

<img class=addCaption" title="Resim Başlığı" border="0" height="213"

Dolayısı ile yukarıda giden kodda yer alan, kırmızı kodları biz eklemiş olduk.. Herşey bu kadar..

İyi bloglamalar.

Not: Yukarıda kırmızı renkle yer alan Resim Başlığı yazısını, resimde gözükmesini istediğiniz yazı ile değiştirmeyi unutmayınız.