Merhaba arkadaşlar. Bu yazımda, bir kaç blogda gördüğüm ancak kodlamasına yeni denk geldiğim bir konuyu anlatacağım. Bloglarda son zamanlarda yan menüye, logo bölümüne veya sitenin en altına sosyal medya linkleri ekleme olayı Gittikçe yayılıyor. Biz de böyle bir kod paylaşıp yan menüsünde sosyal medya linkleri bulunan blog sahiplerini sevindirelim istedik. Anlatacağım basit bir örneK. Siz bu kodu sosyal medya alanı dışında istediğiniz herhangi bir yerde de kullanabilirsiniz.


Başlayalım:

Öncelikle sayfanızda jquery olup olmadığından emin olun. Eğer yoksa buradaki bağlantıdan indirip aşağıdaki şekilde etiketleri arasına ekleyebilirsiniz.

<script></script>

Not: WordPress blog kullanıyorsanız ve kullandığınız temada veya eklentilerde jquery efektler varsa büyük ihtimalle jquery ekli olacaktır.

Aşağıdaki kodu … kodları arasına ekleyin:

<script>
/* var J = jQuery.noConflict();
J(document).ready(function(){
J("#sosyalikonlar").delegate("img", "mouseover mouseout", function(e) {
if (e.type == 'mouseover') {
J("#sosyalikonlar a img").not(this).dequeue().animate({opacity: "0.3"}, 300);
} else {
J("#sosyalikonlar a img").not(this).dequeue().animate({opacity: "1"}, 300);
}
});
});
/* ]]> */
</script>

Aşağıdaki kodu ise ikonların görünmesini istediğiniz yere ekleyin:

Önizleme yapmak isterseniz bu kodu kullanan bir arkadaşımın sitesine buradan bakabilirsiniz.

Gerekli kodların arşivinizde durması için aşağıdaki dosyayı indirebilirsiniz.

Dökümanı İndir

Bir dahaki yazımızda görüşmek dileğiyle :)

Kaynak: jQuery ile Şık Bir Sosyal Medya Alanı Yapımı