jQuery

ClassySocial: jQuery Harika Sosyal Profil eklentisi 0

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.

https://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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

jQuery Şifre Güvenlik Kontrolü Aşamaları 0

Merhaba arkadaşlar jQuery nimetlerinden bir tanesini daha sizlerle paylaşıyorum. Müşterileriniz şifre oluştururken bu jQuery eklentisini kullanabilirsiniz çünkü herkez şifresinin çok zor olduğunu sanır ama bu eklenti ile çoğu kişinin bildiği yalan olacak 🙂

https://1.bp.blogspot.com/-aDkPDMoY2fE/UU6yDDY4yEI/AAAAAAAAQfw/U-Q9mq67wJw/s1600/jquery+pass.jpg

Complexify adında bir eklenti sıkıştırılmış hali 3kb yani çok ufak ve kullanımlık.

jQuery Complexify

Kullanımı şu şekilde örnek HTML kodumuz aşağıdaki gibi;

<!-- js dosyamız -->
<script src='../assets/s/jquery.complexify.js'></script>
<!-- /js dosyamız -->
<div id="demo">
        <input type="password" id="password" placeholder="Password">
        <div id="progressbar"><div id="progress"></div></div>
        <div id="status">
            <div id="complexity">0%</div>
            <div id="complexityLabel">Complexity</div>
        </div>
</div>

İnput’un ID’sine password yazdık. Şimdi bu html kodun altına script tagları ile eklentimizi çalıştırıyoruz.

Dikkat etmeniz gereken nokta input’a verdiğimiz ID’de password yazmıştık jQuery fonksiyonundada #password yazdık.

<script type="text/javascript">
        $(function () {
            $("#password").complexify({}, function (valid, complexity) {
                if (!valid) {
                    $('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid');
                } else {
                    $('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid');
                }
                $('#complexity').html(Math.round(complexity) + '%');
            });
        });
</script>

Sitenizi Adım Adım Kullanım Kılavuzu intro.js 0

Merhaba arkadaşlar. Daha önceden bu tarz bir araştırmam olmuştu ancak bunun gibi bulmamıştım açıkcası. Bu hepsinden daha güzel örneğin bir proje tamamladınız ve bu projeye ilk giren kişiye bunun nasıl kullanıldığını anlatmanız gerekicek. Yada sıfır açtığınız gmail hesabınıda düşünebilirsiniz gmail sizi nasıl kullanacağınız konusunda yönlendiriyor.

Buda o tarz siz divleri belirliyorsunuz ve o divleri anlatmaya başlıyorsunuz adım adım gidiyor ve son kısımda anlatım bitiyor. Çok güzel bence kesinlikle arşivinizde olması gerekiyor.

https://4.bp.blogspot.com/-3XxjBdTuNAo/UUeCB0axbOI/AAAAAAAAQcI/m4rg6E9AkGo/s1600/step-by-step-users-guide-for-your-website-and-project-intro-js.jpg

Most Popular Topics

Editor Picks

1

En ilginç Zaman tüneli Kapakları