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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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.
Hocam eline saglik cok guzelmis hemen ekledim
YanıtlaSilBen de şimdi uyguladım, teşekkürler.
YanıtlaSilgüzel bir eklenti bloğumda güzel durdu
YanıtlaSilkonumuzla 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
YanıtlaSilgenel bir sorun mu acaba yoksa benden mi kaynaklanıyor anlamadım.
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ıtlaSilAz öcne fark ettim com.tr oldugunu blogger bana jest yaptı sandım bir an :D
YanıtlaSilAyrı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.
Teşekkürler hocam güzel bir eklenti bloguma uygulayacağım.
YanıtlaSilTeşekkürler blog hocam çok yararlı oldu :)
YanıtlaSilHocam Facebook içinde benzer bir eklenti var mı?
YanıtlaSil@Cumali FIRAT
YanıtlaSilTwitter butonunun kodu yerine Facebook butonunun kodunu koyarak yapabilirsiniz.
cntrl f5 yaptığımda o yazdığınız body çıkmıyor
YanıtlaSil