Whos.Amung.us İle Biraz Oynayalım - Özelleştirilebilir Sayaçlar (-25-Yorum-)

Web sitelerimizde veya bloglarımızda kullanmamız için bize widget kodu veren ve farklı işlere yarıyan bir çok servis var. FeedBurner'ın rss abone sayımızı, Twitter Counter'ın Twitter takipçi sayımızı  ve Whos.Amung.us'ın web sitemizdeki çevrimiçi kullanıcı sayısını gösteren sayacı gibi. Ama bu sayaçlar bize istediğimiz kadar özgürlük tanımıyor.

Örneğin, whos.amung.us'ın sayacının sadece arkaplan ve yazı rengi değiştirilebiliyor. Bunun dışında, çok küçük kod değişiklikleriyle sayacı tıklanamaz veya görünmez yapmak mümkündü. Fakat, ücretli hesaba (pro) sahip olmadıkça sayaçtaki değeri çekerek siteminiz herhangi bir yerine  "xx kişi çevrimiçi" diye yazdırabilmek mümkün değildi.

Herhangi bir javascript, php kodu veya resim dosyası kullanmadan, sadece CSS ile; bize verilen ve kütüğe benzeyen whos.amung.us sayacını (sağdan en üstteki), çok şık ve tamamen kişiselleştirilebilir sayaçlara dönüştürmeyi başardım. Tıklanabilir veya tıklanamaz olması da ayarlanabiliyor.

En basittinden sayacınızı nasıl evrimleştireceğinizi anlatmaya başlıyorum.

Okumaya Devam Edin...


İlk Adım: whos.amung.us Kodunuzu Alma

<a href="http://whos.amung.us/stats/bwb814meoss3/"><img src="http://whos.amung.us/widget/bwb814meoss3.png" width="81" height="29" border="0" title="Click to see how many people are online" /></a>

<script type="text/javascript" src="http://widgets.amung.us/colored.js"></script><script type="text/javascript">WAU_colored('bwb814meoss3', 'ffc20e000000')</script>

<script type="text/javascript" src="http://widgets.amung.us/classic.js"></script><script type="text/javascript">WAU_classic('bwb814meoss3')</script>

Kullandığınız whos.amung.us sayaç kodu (kullanmıyorsanız siteye girip bir sayaç kodu almalısınız), bu 3'ünden birine benziyordur. Kırmızı ile gösterdiğim yerlerde geçen ifade sizin whos.amung.us kodunuz. Onu bir yere kaydedin. Sonraki adımlardaki kodlarda kırmızı renkle gösterdiğim yerleri kendi kodunuzla değiştirmeyi unutmayın. Mavi ve pembe yerleri de isteğinize göre değiştirebilirsiniz. Pembe yerlere 6 haneli bir renk kodu gelmeli.



Görünmez Sayaç

<div style="background-image:url(http://whos.amung.us/widget/bwb814meoss3.png)" ></div>

Kodunu sitenizin herhangi bir yerine eklerseniz; görünmez bir şekilde, whos.amung.us'a link vermiş sayılmadan, çevrimiçi ziyaretçiler hala sayılacaktır. http://whos.amung.us/stats/bwb814meoss3/ adresini ziyaret ederek kodu eklediğiniz sitedeki ziyaretçileri görebilirsiniz.


:: Özel Sayaçlar ::

<div style="cursor:default;background-image:url(http://whos.amung.us/cwidget/bwb814meoss3/f2f2f2000000.png);background-position:-25px -2px;background-repeat:no-repeat;background-color:#f2f2f2;-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #eee;width:120px;height:25px;" ><div style="color:#333;width:75px;padding-top:3px;float:right;background-color:#f2f2f2;height:22px;-moz-border-radius:10px;-webkit-border-radius:10px;">Çevrimiçi</div></div>

<div style="cursor:default;background-image:url(http://whos.amung.us/cwidget/bwb814meoss3/ff2a66ffffff.png);background-position:-25px -2px;background-repeat:no-repeat;-moz-border-radius:10px;-webkit-border-radius:10px;width:120px;height:25px;" ><div style="color:#333;width:75px;padding-top:3px;float:right;background-color:#f2f2f2;height:22px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align:center;">Okuyucu</div></div>

<div style="cursor:default;background-image:url(http://whos.amung.us/cwidget/bwb814meoss3/4edbfeffffff.png);background-position:-25px -2px;background-repeat:no-repeat;background-color:#000;-moz-border-radius:10px;-webkit-border-radius:10px;width:120px;height:25px;" ><div style="color:#fff;width:75px;padding-top:3px;float:right;background-color:#4edbfe;height:22px;-moz-border-radius:10px;-webkit-border-radius:10px;text-align:center;"><b>Online</b></div></div>

<div style="cursor:default;background-image:url(http://whos.amung.us/cwidget/bwb814meoss3/4edbfeffffff.png);background-position:-25px -2px;background-repeat:no-repeat;-moz-border-radius:10px;-webkit-border-radius:10px;width:50px;height:25px;" ></div>

Not 1: Özel sayaçları tıklanabilir yapmak için, kodların başına; <a href="http://whos.amung.us/stats/bwb814meoss3/"> ve sonuna </a> ekledikten sonra cursor:default; ifadesini silmeniz yeterli.

Not 2: Örnek resimlerdeki pembe: ff2a66, mavi: 4edbfe, sarı: fed067, gri: 999999, kırmızı: fe4e4e, siyah: 000000

Not 3: İlk 6 satırlık renk kodundan sonraki 6 satır sayaçtaki sayının rengini belirtiyor. (.../4edbfeffffff.png)

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

Not 5: Yeni kodu ekledikten sonra eski kodu silmeyi unutmayın (varsa). Silmesseniz yanlış sayacaktır.

Not 6: 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.

Not 7:  Bunu nasıl yaptığımı anlatmıyorum, çünkü anlatınca anlayabilecek olan kişi zaten kodlara bakınca anlamıştır.

Not 8: Daha hiç böyle birşey olduğunu görmedim ama Whos.Amung.us bunu tespit ederse öpebilir. Hesabınızı silebilir yani.


Güle güle kullanın!