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

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

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

5 Yorum

  1. Görkem KARA 02 Ağustos 2011
  2. Frary 10 Ağustos 2011
  3. Tural Abiyev 10 Ağustos 2011
  4. since1905 14 Ağustos 2011
  5. estetik 12 Eylül 2011

Yorum Yaz