04 Mart 2010

dans-eden
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;

demo

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...
Yorum
.:gelincik:. dedi ki...
Selamlar, yine yararlı ve güzel bir çalışma daha eklemişsiniz. Bu bilgilerle bir çok işlevsellik kazanıcaktır bloglarımız.

Bu gün bende naçizane bişeyler karaladım, bildiğiniz gibi aç çok temayla ilgili uğraşıyorum, bana bir takım sorular ve yardım talepleri olmuş. Bendeki bilgileri elimden geldiği kadar yayınladım, ama siz bana gelen yorumları ve benim yazdığım konuyu okursanız, blogseverlerin neye ihtiyaç duyduğu konusunda fikir elde edebilir, paylaşımlarınızı bu doğrlutuda yönlendirebilirisiniz. Çünkü benim bilgilerim dediğim gibi daha çok görsellikle ilgili onlarda bile bir çok eksiğim var, sizlerin yardımıyla bu eksikleri kapatabiliriz. Teşekkürler, sevgiler.
.:gelincik:. dedi ki...
Şimdilik bu kadar diyorum, daha fazlası kafa karıştırır, genel kaba taslak bir kaç bilgi vermeye çalıştım, bildiğim öğrendiğim kadarıyla, daha fazlası için bende öğreniyor ve araştırıyorum. Bence siz de boş kaldıkça, benimde çok yararlandığım "takip listem" sitesini bol bol okumanızı izlemenizi tavsiye ederim. Orada ki bilgiler, yeni başlayanlardan tutun çok işlevsel blog isteyn arkadaşlara kadar her kesime hitap ediyor.Blogla ilgili aradığınız herşey orada var."

kendi yazımdan sizinle ilgili kısmı kopyaladım, bu anlamda size gelenler olabilir diye bilgilendirmek istedim.
Sade dedi ki...
Merhaba gelincik, görsel açıdan bence çok güzel bir eklenti. Umarım kullananlar memnun kalır.

Yazdığın yazını okudum. Çok samimi ve faydalı bir yazı olmuş. Eline sağlık. Eğer konuyla alakalı sorular olursa tabiki cevaplamaktan büyük memnuniyet duyarım.

Blogum hakkındaki güzel sözlerin için çok teşekkür ederim. Çok naziksin...
REDKAYA dedi ki...
Kırmızı yerlere eklememız gereken link ve resim kodları derken tam olarak neyi kast ettiğini uykusuz olduğum için mi bilmiyorum ama tam olarak anlayamadım açıklarmısın?
Sade dedi ki...
@REDKAYA: Sanırım uykusuzluk sebep :) kırmızı ile renklendirilmiş kısımlar ; class="nudge"
REDKAYA dedi ki...
İşte o kodlar ne onu anlamayamadım bir türlü :S
uzantıları mı?
isimleri mi?
Ne?

Ayrıca kırmızı yer dediğiniz yerden class= kısımı silinerek dimi? den den ler arasına değil yani? tamamı ile silinip kod koyulacak.
Sade dedi ki...
Yazıyı güncelledim umarım daha iyi anlatabilmişimdir. Kırmızı kısımlar class="nudge" şeklinde ve hem linkler hem resimler için kullanılıyor. Tek yapman gereken linklerine veya resimlerine class="nudge" şeklinde ekleme yapmak ;) Kolay Gelsin...
REDKAYA dedi ki...
Teşekkürler hocam :)
Rebel Shark dedi ki...
Hocam bunları class="nudge" koymadan yapmak mümkün mü? Yani birçok link olacak hepsi için böyle uğraşmam gerekmeden bi yolu varmıdır ?