Menu

Blogger JQuery Animasyonlu Sosyal Medya Eklentisi

Blogger için sosyal medya eklentileri çok önemlidir çünkü bütün bloggerlerin en büyük sıkıntısı yeterince tıklama alamama dır.Blogger site trafiğini artırmak için en etkili yol sosyal medyada aktif olmaktır.Blogger için bu aktifliği blogger sitelerinde çeşitli sosyal medya eklentileri ile sağlarız.

Aşağıda verdiğim eklenti oldukça kullanışlı bir blogger sosyal medya eklentisidir.Bu eklentis sayfanızla birlikte hareket eden beş adet sosyal medya ve bir adet RSS bağlantısından oluşur.Animasyonlu olduğu için dikkat çekicidir.

Blogger JQuery Animasyonlu Sosyal Medya Eklentisi


Blogger için hazırlanmış JQuery Widget Sosyal Medya eklentisi site ziyaretçilerinize güzel bir görüntü sağlamaktadır.Aynı zamanda SEO dostu hızı bir eklentisir.Blogcular için büyük trafiğe sahip olan Facebook,Twitter,Google+,Pinterest ve Youtube Sosyal Medya sitelerinde aktif olmak site trafiğini artırmak için oldukça önemlidir.


---Goomass İle Twıtter Eğitimi

---FaceBook tan En İyi Para Kazanma Rehberi
Blogger JQuery Animasyonlu Sosyal Medya Eklentisi

Blogger JQuery Animasyonlu Sosyal Medya Widget Eklentisi Nasıl Yüklenir

1.Adım
Blogger kontrol paneline giriş yaptıktan sonra ]]></b:skin> kodunu Ctrl+F tuşu ile aratıp hemen üstüne gelecek şekilde aşağıdaki Blogger CSS kodunu ekliyoruz.

]]></b:skin>


.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}


---Twitter Tüm Profil Sayfası Ayarları 

2.Adım
İkinci adımda </head> kodunu Ctrl+F tuşu ile aratıp hemen üstüne gelecek şekilde aşağıdaki Blogger javascript kodunu ekliyoruz.
</head>


<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>



---Linkedin Nedir Nasıl Kullanılır

3.Adım
Son olarak </body> etiketini yine Ctrl+F tuşu ile aratıp hemen üstüne gelecek şekilde aşağıdaki Blogger HTML kodunu ekliyoruz.
</body>


<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/seomektebi' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/seomektebi' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/seomektebi' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/seomektebi' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/seomektebi' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/seomektebi' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

Blogger JQuery Animasyonlu Sosyal Medya Widget Eklentisini Düzenleme
Not:Bu işlemleri yapmadan önce mutlaka bloğunuzun bir yedeğini alınız.

Yapılması gereken tek şey sarı ile belirtiğim yerlere kendi adreslerinizi eklemenizdir.Ayrıca CSS kodları ile oynayarak değişik renkler şekiller ve büyüklükler edeedebilirsiniz.




Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger JQuery Animasyonlu Sosyal Medya Eklentisi "

Önerilen Yazı
×