18 Kasım 2013

Blogger Sabit Sosyal Medya Takip Butonları

Bloggerlar için sosyal medyanın önemi oldukça fazladır. Okuyucularımızın bizi ve yazılarımızı takip edebilmelerini ve her an yani yayınlarımızdan haberdar olabilmeleri oldukça önemlidir.

İnternette bulmak ve blogumuza eklemek için karşımıza bir çok farklı takip botunu yapısı ve şekli vardır. Bunlarda blogumuza uygun olanını yada beğendiğimiz bir tanesini seçip blogumuza ekleyebiliriz.

Eğer Html ve Css bilgimiz varsa bulduğumuz eklentilerde değişiklikler yapıp kendimize göre bir tasarım ile blogumuza ekleyebiliriz. Eğer çok fazla Html ve Css bilgimiz yoksa Yeni Başlayanlar İçin HTML ve Css Öğrenilebilecek En İyi 5 Site başlıklı yazımızı okuyabilirsiniz.

Eklentiyi Önizlemek için Tıklayınız...

Sabit sosyal medya takip butonlarını eklemek için yapmamız gereken tek şey aşağıdaki kodları;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript Ekle yolunu takip ederek açılan pencereye yapıştırmak.

<style type="text/css">
#takip {position: fixed;right: 0;top: 80px;z-index: 999999;}
.takip {background-image: url('http://n1311.hizliresim.com/1h/k/un8hq.png');background-repeat: no-repeat;height: 42px;width: 42px;top: 10px;margin-left: auto;}
.takip:hover {cursor: pointer;}
.facebook {background-position: 0px 0px;}.twitter {background-position: 0px -42px;}
.flickr {background-position: 0px -84px;}
.friendfeed {background-position: 0px -126px;}
.vimeo {background-position: 0px -168px;}
.youtube {background-position: 0px -210px;}
.linkedin {background-position: 0px -252px;}
.rss {background-position: 0px -294px;}
.facebook:hover {background-position: 0px 0px;}</style>
<div id="takip">
<div class="facebook takip" onclick="location.href='http://www.facebook.com/kullaniciadi'">
</div>
<div class="twitter takip" onclick="location.href='http://www.twitter.com/kullaniciadi'">
</div>
<div class="flickr takip" onclick="location.href='http://www.flickr.com/kullaniciadi'">
</div>
<div class="friendfeed takip" onclick="location.href='http://www.friendfeed.com/kullaniciadi'">
</div>
<div class="vimeo takip" onclick="location.href='http://www.vimeo.com/kullaniciadi'">
</div>
<div class="youtube takip" onclick="location.href='http://www.youtube.com/kullaniciadi'">
</div>
<div class="linkedin" onclick="location.href='http://www.linkedin.com/kullaniciadi'">
</div>
<div class="rss takip" onclick="location.href='/rss'">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".takip").mouseover(function(){
       $(this).filter(':not(:animated)').animate({width:135},{duration:500});
});
$(".takip").mouseout(function(){
$(this).animate({width:42});
});
});
</script>

Sabit sosyal medya takip butonlarında değiştirmeniz gereken  yerler Kırmızı ile belirtilen kullaniciadi yazan yerlere sosyal medyada bulunan kullanıcı adınızı yazınız.

8 yorum:

  1. Guzel emegine salik kardewim:d

    YanıtlaSil
  2. denedim gerçekten harika oldu teşekkürler :DDD

    YanıtlaSil
  3. çok guzel bir eklenti. Merak ettiğim konu bunların harici başka siteleri eklmek için ne yapmamız gerekir acaba. Yardımcı olabilirseniz sevinirim. Teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Css kodları arasında bulunan background resmini değiştirerek yada düzenleyerek istediğiniz sitelerin olduğu bir görsel hazırlayabilirsiniz. Background resminde yaptığınız değişikliklere göre de kod yapısında düzenlemeler yapmanız gerekebilir.

      Sil
  4. hocam öncelikle paylaşım için teşekkürler, emeğinize sağlık. bu kodları denedim fakat animasyon özelliği çalışmıyor acaba neden olabilir.

    YanıtlaSil
    Yanıtlar
    1. Eklentide bulunan JavaScript kodlar ile sitenizde bulunan JavaScript kodları birbirini engelliyor olabilir. Bu yüzden çalışmıyordur.

      Sil
  5. merhaba çok güzel bir paylaşım teşekkürler. benim sorum, bu butonları sayfanın solunda nasıl gösterebilirim? yardımcı olursanız sevinirim.

    YanıtlaSil

© 2013 iPRESS. All rights resevered. Designed by Templateism