Özelleştirilebilir FeedBurner Sayaçları (PHP'siz) (-14-Yorum-)

Geçenlerde whos.amung.us sayacını şekilden şekile sokmuştuk. Bu sefer ise herhangi bir PHP kodu (Feedburner API) kullanmadan, sadece CSS ile; RSS abone sayımızı gösteren FeedBurner sayacına biraz şekil vericez.

Öncelikle, FeedBurner beslemenizin sayaç özelliği (FeedCount) aktif değilse; FeedBurner'a giriş yapın ve beslemenizin ayarlarındaki Publicize sekmesinden aktifleştirin.

Devamını Okuyun...

Sade Sayaç

<style>#abku a:hover #s1{display:none;}#abku a:hover #s2{display:inline;}#abku a #s2{display:none;}</style><div id="abku" style="width:96px;"><a style="text-decoration:none;color:#999;font-size:11px;font-family:arial;" href="http://feeds2.feedburner.com/ermanhaskan"><div style="width:96px;"><div id="d1" style="background:#f2f2f2;padding-top:7px;height:20px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;"><center><div id="s1">RSS Aboneliği</div><div id="s2">Abone Ol</div></center></div><div id="d2" style="border:1px solid #f2f2f2;padding:3px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;"><div id="d3" style="background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=999999&anim=0&label=okuyucu);background-position:-10px -3px;width:76px;background-repeat:no-repeat;height:15px;border-right:10px solid #fff;"></div></div></div></a></div>

İmleç ile üzerine gelinince "Rss Aboneliği" yazısı "Abone Ol" 'a dönüşür.


Renkli Sayaç

<style>#abku a:hover #s1{display:none;}#abku a:hover #s2{display:inline;}#d1{background:#ff6600;}#d2{border:1px solid #ff6600;}#d3{background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=ff6600&anim=0&label=okuyucu);}#abku a:hover #d1{background:#ff2a66;}#abku a:hover #d2{border:1px solid #ff2a66;}#abku a:hover #d3,#abku #dx {background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=ff2a66&anim=0&label=okuyucu);}#abku a #s2{display:none;}</style><div id="abku" style="width:96px;"><a style="text-decoration:none;color:#fff;font-size:11px;font-family:arial;" href="http://feeds2.feedburner.com/ermanhaskan"><div style="width:96px;"><div id="d1" style="padding-top:7px;height:20px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;"><center><div id="s1">RSS Aboneliği</div><div id="s2">Abone Ol</div></center></div><div id="d2" style="padding:3px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;"><div id="d3" style="background-position:-10px -3px;width:76px;background-repeat:no-repeat;height:15px;border-right:10px solid #fff;"></div></div></div></a><div id="dx"></div></div>

Mouse ile üzerine gelinmediği sürede turuncu haldedir. İmleç ile üzerine gelinince renk değiştirir ve "Rss Aboneliği" yazısı "Abone Ol" 'a dönüşür. İlk halinin rengini değiştirmek için kodlardaki tüm ff6600'ları, ikinci halinin rengini değiştirmek için ise, kodlardaki tüm ff2a66'ları değiştirmeniz gerekiyor.


Tek Metin Sayaç



Bağlantılı

<style>#dg0 a #dg1{ background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=999999&anim=0&label=okuyucu); } #dg0 a:hover #dg1{ background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=ff2a66&anim=0&label=okuyucu); }</style><div id="dg0" style="width:88px;" ><a href=""><div style="width:88px;border:1px solid #f2f2f2;"><div id="dg1" style="border-top:2px solid #fff;border-bottom:2px solid #fff;background-position:-10px -3px;width:88px;background-repeat:no-repeat;height:13px;"><div style="border-right:12px solid #fff;width:76px;height:13px;"></div></div></div></a><div>

RSS beslemenize linklenmiştir. İmleç ile üzerine gelince yazı renk değiştirir. Yazının ikinci halindeki rengini, kodlardaki ff2a66'yı kullanarak değiştirebilirsiniz.

Bağlantısız

<div style="width:88px;border:1px solid #f2f2f2;"><div style="background-image:url(http://feeds.feedburner.com/~fc/ermanhaskan?bg=ffffff&fg=999999&anim=0&label=okuyucu);border-top:2px solid #fff;border-bottom:2px solid #fff;background-position:-10px -3px;width:88px;background-repeat:no-repeat;height:13px;"><div style="border-right:12px solid #fff;width:76px;height:13px;"></div></div></div>

Linksizdir.

Not 1: Kodlardaki http://feeds2.feedburner.com/ermanhaskan'ları kendi RSS adresinizle değiştirmeyi unutmayın. Tüm ermanhaskan'ları da kendi beslemenizin id'siyle değiştirin.


Not 2: Kodunuzu ve yapacağınız değişiklikleri şuradan canlı canlı test edebilirsiniz.


Not 3: Yaptığınız düzenlemelerden sonra ortaya çıkan kodu; Blogger blogunuza, sayfa düzeninden yeni bir HTML/JavaScript widgeti olarak ekleyebilirsiniz.


Not 2: Internet Explorer tarayıcısı CSS3'ü desteklemediği için, internet explorer'da kenarlar oval gözükmeyecektir (6-7-8 tüm IE'lerde). Ama yine de hoş gözüküyor. Internet explorer dışındaki tüm tarayıcılarda örneklerde gözüktüğü gibi görünmektedir.