Whos.Amung.us Kodunu Düzenleme

İnternette gezinirken güzel bir döküman buldum ve kullandım.Sizlerllede paylaşmak istedim.





Web sitelerimizde veya bloglarımızda kullanmamız için bize widget kodu veren ve farklı işlere yarıyan bir çok servis var. http://Üye Ol'ın rss abone sayımızı, http://Üye Ol'ın http://Üye Ol takipçi sayımızı ve http://Üye Ol'ı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.




İ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 http://Üye Ol 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://Üye Olbwb814meoss3.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://Üye Olbwb814meoss3/ adresini ziyaret ederek kodu eklediğiniz sitedeki ziyaretçileri görebilirsiniz.


:: Özel Sayaçlar ::


<div style="cursor:default;background-image:url(http://Üye Olbwb814meoss3/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://Üye Olbwb814meoss3/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://Üye Olbwb814meoss3/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://Üye Olbwb814meoss3/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.

Arkadaşlar Bunu Fan P++eme Nası Koycam Bilen Varmı Yanlıs Ç.içi SayIsı Gösteriyor

teşekkürler hocam

çok güzel anlatılmış, çok teşekkür ederim arkadaşım

Sayın @Eldarion sizi tebrik ederim.
Faydalı bir çalışma yapmışsınız, nette hiç bir site yada forumda bu işin çaresini bulan yada bulup paylaşanı görmedim.Paylaşımınız için teşekkürler ilave olarak da sormak istiyorum bu kodun bir script haline getirilerek webmasterin amung dan bağımsız olarak kendi sitesinde çalıştırması mümkün mü ve bant genişliği olarak trafiğe etkisi nedir bilgilendirirseniz sevinirim.
Çalışmalarınızda başarılar.

http://Üye Ol cok tesekkurler