6 Ocak 2014 Pazartesi

Blogger Yıldızlı Oy Verme Eklentisi

33 yorum

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım eklenti Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum.

Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim.

1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle widget oluşturma sayfasına giderek Create account butonuna basın.

Rating Widget üye ol
Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz.


2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz.

Rating widget stiller
Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz.

3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.  

Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.

 

<div class="rw-ui-container"></div>

 

Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz.

Yıldızlı oy verme eklentisi

 

İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne <br/> kodunu ekleyebilirsiniz.

 

İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-container"></div>
</b:if>

 

Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.

33 yorum:

  1. Paylaşım için teşekkür ederim. Daha önce bu konuda detaylı bir çalışma incelememiştim.

    YanıtlaSil
  2. google aramalarında yıldızlar gözüküyormu peki

    YanıtlaSil
  3. selam hocam Guzel paylasim icin tesekkur ederim hemen uyguladim bir sorunla karsilastim. yildizlar yazinin bitiminde cikmiyor http://www.yazdirmaca.nl/2014/01/istenmeyen-adam-tayip-erdogan.html bu sekilde cikti

    her iki koduda kullandim kesin bir seyi yanlis yaptim ama neyi? :) saygilar

    YanıtlaSil
  4. Hocam ayrica bir sey rica etmistim sizden sizin 125x125 bannerinizi bumerangda oldugu gibi 250x50 yaparmisiniz daha oncede sormustum ilgilenecektiniz tekrar hatirlamak istedim saygilar

    YanıtlaSil
  5. 250x50 banneriniza Ornek ( Bloghocam Uyesi ) yazisi koyarsaniz sevinirim cunki bizler size uyeyiz buda bir ayricalik olsun :)

    YanıtlaSil
  6. @yazdirmaca makale
    Siz daha önce aynı yere adsense reklam kodunu ve yazı paylaşma kodunu eklemişsiniz. Bu y verme kodunu paylaşım kodunun üstüne eklerseniz yazının hemen altında gözükür.

    YanıtlaSil
  7. tesekkur ederim hocam aynen dediginiz gibi yaptim duzeldi saygilar

    YanıtlaSil
  8. olmadı malesef tüm deneni yaptım ama olmadı görümüyor

    YanıtlaSil
  9. ne kadar faydalı bir blog :)
    sevgiler,

    Dilara
    http://iletisimkarmasi.blogspot.com/

    YanıtlaSil
  10. Dün gece kafama takıldı ve bugün detaylı bir araştırma sonucu istediğime ulaştım.

    http://blogagaci.blogspot.com/ bu arada bu blog projesi uzun zamandır kafamda olan birşeydi.

    YanıtlaSil
  11. Teşekkürler. Dediklerinizi aynen uyguladım. Sorunsuz çalışıyor :)
    Bakmak isteyenler için http://yoncademirel.blogspot.com

    YanıtlaSil
  12. Tesk.arkadasim emeğine sağlık

    YanıtlaSil
  13. Bloghocam yine farkını gösterdi her zamanki gibi... Teşekkürler... Ben yazı içine yaptım daha iyi oldu bence...

    www.murat-aktas.com

    YanıtlaSil
  14. bi tane body kodu buldum uzun metini onun üstüne ekledimde post footer kodu bloğumda bulunmamakta malzemeden çalmışlar :) tr.gg sitesinden bloggera geçtim css den az çok anlıyorum ama bloggerda ctrl f yaptığımda vermiş olduğunuz kodları aratınca sonuç çıkmıyor tek tek bütün wideget kodlarına bakıyorum ama yok :(

    YanıtlaSil
  15. Ali bey ctrl f tusuna sayfanin genelinde deyil kodlarin yazili oldugu bolume birkez tiklayin ve sonra ctrl f yapin yani arama kutucugu kodlarin yazildigi pencerede cikacak oyle aratin
    belki faydasi olur

    YanıtlaSil
  16. sorunu buldum tşk. ... ile gizlenen kodları açtım ama ctrl + f yapınca yine aradığımı bulamıyordum kaydırma çubuğunu kaydıra kaydıra ilerleterek arayınca aradığım kodlara ulaştım genelinde arama yapmadığı için kaydırma çubuğu kullanıyorum biraz zor oluyor ama :) Siteme uyguladım güzel paylaşım

    YanıtlaSil
  17. Verdiğiniz link e tıkladm ama sayfa açılmıyor. Acaba sorun benim bilgisayarımda mı? :(

    YanıtlaSil
  18. @Altın Zen
    Sitede problem yok.

    YanıtlaSil
  19. Yaptım ama kod hata verdi. Ne yapabilirim?

    YanıtlaSil
  20. google da gözükmüyorsa beş para etmez

    YanıtlaSil
  21. merhaba,
    paylaşım için teşekkür ederim,
    denilenleri aynen yaptım ama şablonu önizleme adımında

    Şablon önizlemesi yüklenemedi: XML, satır 1617, sütun 5 ayrıştırılırken hata oluştu: The element type "b:includable" must be terminated by the matching end-tag "".

    böyle bir hata aldım. sorun nedir?

    teşekkürler

    YanıtlaSil
  22. @İlkay Kirişçioğlu
    Eksik veya fazla kod silmişsiniz.

    YanıtlaSil
  23. Artık bu güncel değil.

    YanıtlaSil
  24. Teşekkürler çok işime yaradı.

    YanıtlaSil
  25. güzel paylaşım teşekkürler hocam.

    YanıtlaSil
  26. Merhaba, rating widget.com ücretlimi sadece üye olup kodlarımı alıcaz onun dışında başka bir şey yok değil mi ?

    YanıtlaSil
  27. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  28. dediklerinizi yaptım ama olmadı http://kaansahinofficial.blogspot.com.tr/

    YanıtlaSil
  29. O sayfa açılmıyor hocam ?
    >>> http://rating-widget.com/get/rating/

    YanıtlaSil
  30. Sayfa açılmıyor, alternatif bildiğiniz var mı acaba hocam, 5 üzerinden yıldız verme eklentisi blogger için

    YanıtlaSil
  31. Selam rating sistem google gorunen hangisi bu sistemmi yoksa baskami bide resimlerin altinda yildiz seklinde gorunuyor o nasil oluyor admin hic siteye bakmiyon

    YanıtlaSil

Picardes

LİNKLER