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

Tarih: 30 Temmuz 2011 Yazar: Aycan Doğanlar | 2.514 kez okundu

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 <head></head> etiketleri arasına ekleyebilirsiniz.

<script type="text/javascript" src="DOSYA-ADRESİ"></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 <head> … </head> kodları arasına ekleyin:

<script type="text/javascript">
	/* <![CDATA[  */
	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:

<div id="sosyalikonlar">
<a href="#" title="Twitter"><img style="opacity: 1;" src="resimler/twitter.png" alt="Twitter"></a>
<a href="#" title="Facebook"><img style="opacity: 1;" src="resimler/facebook.png" alt="Facebook"></a>
<a href="#" title="Flickr"><img style="opacity: 1;" src="resimler/flickr.png" alt="Flickr"></a>
<a href="#" title="Tumblr"><img style="opacity: 1;" src="resimler/tumblr.png" alt="Tumblr"></a>
<a href="#" title="Vimeo"><img style="opacity: 1;" src="resimler/vimeo.png" alt="Vimeo"></a>
</div>

Ö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 :)

Etiketler:

Bu yazı için 5 yorum yapılmış.

Görkem KARA diyor ki:

02 Ağustos 2011, 02:54

Çok güzel duruyor hemen deneyeceğim :)
Frary diyor ki:

10 Ağustos 2011, 03:27

İyi oldu iyi. :)
Tural Abiyev diyor ki:

10 Ağustos 2011, 18:35

Ellerine saglik,
since1905 diyor ki:

14 Ağustos 2011, 01:08

buna benzer bişiy arıyordum teşekkürler.
estetik diyor ki:

12 Eylül 2011, 01:56

Gerçekten harika bir paylaşım uygulaması olmuş. Bu arada sizlerde paylaştığınız için teşekkürler.