Dans Eden Linkler ve Resimler - jQuery Link Nudging

Dans eden linkler ve resimler blogunuza farklı bir hava katacak. Fare ile resim ve linklerin üzerine geldiğinizde blogunuzda dans başlayacak. Tam olarak nedir diye merak edenler için deneme yazısı yazdım. Dans eden linkleri ve resimleri ziyaret etmek isterseniz, buyurun;

Eğer, Dans eden linkler ve resimler eklentisini blogunuzda kullanmak isterseniz yapmanız gereken temanıza kısa bir kod eklemek. Bu kodu ve işlevini, David Walsh yazı başlığından da anlayacağınız gibi 'jQuery Link Nudging' ismiyle isimlendirmiş. İlgili yazıyı adresinden ziyaret edebilirsiniz.

Dans Eden Linkler ve Resimler - Uygulama

1. Klasikleşen uyarı, temanızın yedeğini almayı unutmayın. Ya da uygulamayı önce test blogunuzda deneyin. Ardından Yerleşim ve HTML'yi düzenle yolunu izleyin ve temanızda </head> kodunu aratın.

2. Bulmuş olduğunuz kodun hemen bir üst satırına alttaki kodu yapıştırın;

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Ve temanızı kaydedin.

3. Dans etmesini istediğiniz link ve resimleri alttaki gibi düzenleyin.
Linkler için şu yöntemi izleyin; normalde bir link yazmak istediğinizde alttaki örnekteki gibi bir kod yazılır;

<a href="http://blogadiniyaz.blogspot.com/" >BLOG</a>

Eğer bu linkin dans etmesini istiyorsanız; alttaki örnekteki gibi adresten sonra kırmızı ile renklendirilmiş kısmı kopyalayın ve örnekteki gibi uygun yere yapıştırın.

<a href="http://blogadiniyaz.blogspot.com/" class="nudge">BLOG</a>

Yazınıza bir resim eklemek istediğinizde; alttaki koda benzer bir kod ile yazıya resim ekleyebilirsiniz.

<a href="http://i49.tinypic.com/11m6mqf.jpg" ><img src="http://i49.tinypic.com/11m6mqf.jpg" /></a>

Dans Eden Resimler için de yine aynı şekilde uygun yere kırmızı ile renklendirilmiş olan kısmı yapıştırın.

<a href="http://i49.tinypic.com/11m6mqf.jpg" class="nudge"><img src="http://i49.tinypic.com/11m6mqf.jpg" /></a>

İşte hepsi bu kadar. Basit bir kod eklemeden fazlası değil. Dans Eden Linkler ve Resimler (jQuery Link Nudging) uygulamasını blogunuzda kullanmaya karar verdiyseniz; lütfen, sitenize ekledikten sonra uygulama hakkındaki görüşlerinizi bizimle paylaşın. Yorumlarınız, uygulamayı kullanmak isteyenlere referans olacaktır.

Kolay Gelsin...