20 Ocak 2014 Pazartesi

Twitter Kuşu” Larry” Eklentisi

11 yorum

Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da eklentiler hem Blog Hocam’da hem de webde pek çok defa paylaşıldı. Fakat bu kez paylaşacağım Twitter takip et butonu eklentisi, daha önce muhtemelen görmediğiniz çok farklı özelliklere sahip.

Twitter takip et butonu

 

Eklentiyi blogunuza eklediğinizde sağ üst köşede küçük bir Twitter kuşu ikonu belirecek. Bu Twitter kuşu ikonu “floating” yani yüzen özellikte. Sayfayı aşağı yukarı kaydırdığınızda dahi ikonun yeri değişmiyor.

 

Bu eklentiyi farklı kılan özellik elbette sabit olması değil. Asıl farkı ikonun üzerine geldiğinizde göreceksiniz. Aşağıdaki demo videoda da göreceğiniz gibi Twitter kuşu ikonunun üzerine geldindiğinde Twitter takip et butonu açılıyor ve sevimli Twitter kuşu “Larrry” kanat çırpmaya başlıyor.

 


Bu tür animasyonlar için genellikle özel scriptler kullanıldığı için sayfayı oldukça yavaşlatır ama bu eklenti CSS sprite ve @keyframes teknikleriyle oluştrulduğu için oldukça hızlı ve sorunsuz.

 

Eklentiyi blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle yolunu takip ederek Ctrl + F tuş kombinasyonunun yardımıyla </body> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyin.

 

<style>
.takip-wrapper {
  height: 44px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}
.takip-buton {
background-image: url(https://dl.dropboxusercontent.com/u/60346665/twitter-bird-sprite-BH.png);
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
display: block;
padding: 7px 0 7px 40px;
position: absolute;
right: -168px;
top: 5px;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
transition: right 0.3s;
width: 168px;
}
.takip-buton:hover {-webkit-animation: fly 0.2s steps(4) 0 10;
-moz-animation: fly 0.2s steps(4) 0 10;
animation: fly 0.2s steps(4) 0 10;
right: 0;
}
@-webkit-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
@-moz-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
@keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
    </style>
<div class='takip-wrapper'>
  <div class='takip-buton'>
    <a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/bloghocam'>@BlogHocam 'ı takip et</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
  </div>
</div>

 

Kodlarda kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmanız yeterli. Bunun dışında bir değişikliğe gerek yok.

11 yorum:

  1. Hocam eline saglik cok guzelmis hemen ekledim

    YanıtlaSil
  2. Ben de şimdi uyguladım, teşekkürler.

    YanıtlaSil
  3. güzel bir eklenti bloğumda güzel durdu

    YanıtlaSil
  4. konumuzla alakalı değil ama bugün farkettim ki izleyiciler gadget i çalışmıyor acaba bende mi bir sorun var diye merak ettim sizin sayfanızda da gözükmüyor. http://prntscr.com/2l9uur

    genel bir sorun mu acaba yoksa benden mi kaynaklanıyor anlamadım.

    YanıtlaSil
  5. Google, blogger Uzantısını türkiye için com.tr yaptı onun sonrasında bir sorun olmuş olabilir @ayhan gümüş kılıç

    YanıtlaSil
  6. Az öcne fark ettim com.tr oldugunu blogger bana jest yaptı sandım bir an :D

    Ayrıca kafama takılan başka bir şey var Serdar hocama +google yorum kutusunu inceliyordum gayet sade ve hoş duruyor kullandım fakat şöyle bir sorun oldu. Sayfamda toplam yorumları gösteren widget var +google yorum kutusunu kullanınca çalışmıyor bunu nasıl çözebiliriz.

    YanıtlaSil
  7. Teşekkürler hocam güzel bir eklenti bloguma uygulayacağım.

    YanıtlaSil
  8. Teşekkürler blog hocam çok yararlı oldu :)

    YanıtlaSil
  9. Hocam Facebook içinde benzer bir eklenti var mı?

    YanıtlaSil
  10. @Cumali FIRAT
    Twitter butonunun kodu yerine Facebook butonunun kodunu koyarak yapabilirsiniz.

    YanıtlaSil
  11. cntrl f5 yaptığımda o yazdığınız body çıkmıyor

    YanıtlaSil

Picardes

LİNKLER