Twitter Kuşu” Larry” Eklentisi

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.

 

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.