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

Tarih: 30 Temmuz 2011   Yazar: editor  |  2.926 kez okundu
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 :)


    Bu yazı için 5 yorum yapılmış.
  1. Görkem KARA dedi ki:

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

  2. Frary dedi ki:

    İyi oldu iyi. :)

  3. Tural Abiyev dedi ki:

    Ellerine saglik,

  4. since1905 dedi ki:

    buna benzer bişiy arıyordum teşekkürler.

  5. estetik dedi ki:

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


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.