MENU

ClassySocial: jQuery Harika Sosyal Profil eklentisi

Anasayfa » jQuery » ClassySocial: jQuery Harika Sosyal Profil eklentisi
ClassySocial: jQuery Harika Sosyal Profil eklentisi

jQuery ile yapılmış gerçekten harika bir sosyal profil eklentisi. Çok şık düşünülmüş şahsen kendi profil sitemi açarsam böyle bir plugin kullanabilirim. Bunun gibi daha önceden görmüştüm ancak ücretliydi bu ücretsiz.

http://2.bp.blogspot.com/-wyLrG7Df6r0/UV8kmi8oQ_I/AAAAAAAAQ5s/b8LBZJmcdSY/s1600/jquery-sosyal-profil.png

ClassySocial Demo

ClassySocial Kullanımı

HTML sayfama öncelikle Google CDN jQuery 1.8.3’ü çağırıyorum gel diyorum oraya yerleş.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Daha sonra eklentinin css ve js dosyalarını çağırıyoruz gel diyoruz buraya kodları yükle.

<script src="js/jquery.classysocial.js"></script>
<link rel="stylesheet" href="css/jquery.classysocial.css" />

Sonra div’imizi oluşturuyoruz alttaki gibi;

<div class="classysocial bubble" style="float:left" data-orientation="line" data-image-type="facebook" data-facebook-handle="picozu" data-socl-handle="marius-stanciu" data-twitter-handle="picozu_editor" data-email-handle="office@picozu.net" data-pinterest-handle="picozu" data-picture="picozu" data-instagram-handle="picozu" data-networks="socl,facebook,twitter,instagram,pinterest,email"><a class="main" title="Find Me Here" alt="Find Me Here"><img src="https://graph.facebook.com/picozu/picture?type=large" title="Find Me Here" alt="Find Me Here"></a><div class="network_holder"><a class="network_button socl" target="_blank" href="http://www.so.cl/#/profile/marius-stanciu" data-network="socl" style="display: block; left: 13px; top: 13px;">Socl</a><a class="network_button facebook" target="_blank" href="http://www.facebook.com/picozu" data-network="facebook" style="display: block; left: 13px; top: 13px;">Facebook</a><a class="network_button twitter" target="_blank" href="https://twitter.com/picozu_editor" data-network="twitter" style="display: block; left: 13px; top: 13px;">Twitter</a><a class="network_button instagram" target="_blank" href="http://instagram.com/picozu" data-network="instagram" style="display: block; left: 13px; top: 13px;">Instagram</a><a class="network_button pinterest" target="_blank" href="http://pinterest.com/picozu" data-network="pinterest" style="display: block; left: 13px; top: 13px;">Pinterest</a><a class="network_button email" target="_blank" href="mailto:office@picozu.net" data-network="email" style="display: block; left: 13px; top: 13px;">Email</a></div></div>

<div class="classysocial bubble" style="float:right" data-arc-length="360" data-image-type="facebook" data-picture="picozu" data-facebook-handle="picozu" data-google-handle="100585828531806464438" data-linkedin-handle="173413024" data-socl-handle="marius-stanciu" data-twitter-handle="picozu_editor" data-pinterest-handle="picozu" data-networks="socl,facebook,twitter,pinterest,linkedin,google"><a class="main" title="Find Me Here" alt="Find Me Here"><img src="https://graph.facebook.com/picozu/picture?type=large" title="Find Me Here" alt="Find Me Here"></a><div class="network_holder"><a class="network_button socl" target="_blank" href="http://www.so.cl/#/profile/marius-stanciu" data-network="socl" style="display: block; left: 13px; top: 13px;">Socl</a><a class="network_button facebook" target="_blank" href="http://www.facebook.com/picozu" data-network="facebook" style="display: block; left: 13px; top: 13px;">Facebook</a><a class="network_button twitter" target="_blank" href="https://twitter.com/picozu_editor" data-network="twitter" style="display: block; left: 13px; top: 13px;">Twitter</a><a class="network_button pinterest" target="_blank" href="http://pinterest.com/picozu" data-network="pinterest" style="display: block; left: 13px; top: 13px;">Pinterest</a><a class="network_button linkedin" target="_blank" href="http://www.linkedin.com/profile/view?id=173413024" data-network="linkedin" style="display: block; left: 13px; top: 13px;">LinkedIn</a><a class="network_button google" target="_blank" href="https://plus.google.com/100585828531806464438" data-network="google" style="display: block; left: 13px; top: 13px;">Google Plus</a></div></div>

E birde div’in hemen altına fonksiyonumuzu çalıştırmak için kodumuzu ekliyoruz.

$(".classysocial").each(function() {
    new ClassySocial(this);
});

Tüm tarayıcılarla uyumlu olmasıda cabası…

ClassySocial jQuery Plugin Download

Eklenti sahibi: ClassySocial

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.