Blogger Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?

Web sitelerinde ziyaretçilerin görüntülemiş olduğu yazılara puan vermesini sağlayan yıldız derecelendirme eklentisinin Blogger sitelerine nasıl eklendiğini anlatacağım. Yıldız decelendirme eklentisi, Google arama sonuçlarında blogunuzdaki içeriklere verilen puanların gösterildiği söyleniyor.

Herşeyden önce bir site veya blog'un faydalı olabilecek bir derecelendirme seçeneğinin olması gerekir. Diğer platformlarda blog yazarlarının ücretsiz olarak kullanabileceği iyi veya kötü bir puanlama widget'i kullanma imkanı var. Mesela; 5 yıldızlı derecelendirme, evet-hayır, 1-5 derecelendirme ve 1-10 puan verme widget'leri gibi özellikleri kullanma imkanına sahipler. Blogger platformu söz konusu olduğunda, Blogger için varsayılan widget'ler içerisinde herhangi bir derecelendirme widget'i bulunmamakta.

Şimdi, aşağıdaki adımları takip ederek yıldız derecelendirme (blog yayınlarına puan verme eklentisi olarak da bilinin) eklentisini  Blogger blog sitesine kurulumunu yapalım.

Blogger Sitesine Yıldız Derecelendirme Widget Eklentisi Nasıl Kurulur?

Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın.

Birinci adım: Widget Pack - Sing Up sayfasına gidin ve kaydolun. Burada dikkat etmeniz gereken husus, bir hesapta en fazla 1 siteyi ücretsiz olarak kaydedebilirsiniz. Bu nedenle, kaydolurken deneme amaçlı farklı bir blog sitesini kaydetmeyin.

Açılan ikinci sayfada blogunuzun adını ve URL'sini ekledikten sonra hemen bir alt kısımda bulunan açılır dil seçenekleri menüsünden hangi dilde hizmet verdiğinizi belirtin ve kaydedin.

Açılan üçüncü pencerede yorum sayısını gösteren, izleme sayısını gösteren sayaç ve yıldız derecelendirme widget'i olarak 3 (üç) farklı widget kodu bulunmakta. Tüm widgetleri kullanabilirsiniz. Şuan bizim eklemeye çalıştığımız yıldız derecelendirme widget'i olduğu için, en sağda bulunan Değerlendirme widget (Rating widget) kodlarını kopyalayıp alın.

HTML ve JavaScript

Aşağıdaki HTML kod yıldız derecelendirme widget kodudur.

<div id="wpac-review"></div>

Aşağıdaki JavaScript dosyası standart yıldız derecelendirme widget komut dosyasıdır. Blog sitenizi kaydettikten sonra kopyalamış olduğunuz kod içerisinde, aşağıdaki kodda gösterildiği gibi blogunuza özel 9949 (4 haneli) bir ID numarası alacaksınız.

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 9949});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

İkinci adım: Blog sitesite eklediğimiz yıldız derecelendirme widget'ini özelleştirmek için JavaScript dosyası içerisine bir kaç satır JavaScript HTML kodu eklemek gerekiyor. Widget içerisine metin ve sayaç eklemek için aşağıdaki kodu JavaScript dosyası içerisine eklememiz gerekir.

HTML JavaScript Dosyası

{{=it.stars}} {{?it.count>0}}Rating: {{=it.rating}} based on {{=it.count}} votes{{?}}

Yukarıdaki kodu JavaScript dosyası içerisine aşağıdaki JavaScript dosyası içerisine gösterildiği gibi eklemelisiniz.

HTML JavaScript Dosyası

Aşağıdaki kod içerisinde bazı özelleştirme düzenlemeleri yaptık. Widget içerisinde görüntülenecek olan sayaç hane renkleri oluşturan bir CSS kodu ekledik color:'ff9800', karakter rengini değiştirmek istiyorsanız bu kodu kullanabilirsiniz. Buna ek olarak, widget'in ne olduğunu belirtmek için "Kullanıcı Puanı" olarak kısa bir metin ekledik.

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 9949, color:'ff9800', html: 'Kullanıcı Puanı: {{=it.rating}} {{=it.stars}} {{?it.count>0}}Şuana kadar {{=it.count}} oy verildi. {{?}}'});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

Üçüncü adım: Yıldız derecelendirme widget'ini sadece blog yayınlarında görüntülenmesini sağlamak için veri konumlandırma etiketlerini kullanacağız. Widget Pack sitesinden aldığınız aşağıdaki kodları blogunuzun şablon editör sayfasına ekleyin.

HTML ve JavaScript

Widget görünümünün daha düzenli olması için, aşağıdaki CSS kodlarını blogunuzun ]]></b:skin> veya </style> dosyası içerisine ekleyin.

#wpac-rating{margin-top:10px;font-family:Roboto,sans-serif;font-size:14px;line-height:1}
.wp-r .wp-rating-score,.wp-r .wp-rating-stars{vertical-align:-2px;}

Aşağıdaki HTML kodu blogunuzun yayın sayfalarında görünmesini istediğiniz yere ekleyin. Yayınların üst kısmına veya alt kısmına ekleyebilirsiniz. Yardım videosunu izleyerek ayrıntılı bilgiler edinebilirsiniz. Videoda HTML widget kodunu <data:post.body/> kodunun hem altına hem de üst kısmına ekledik. Sebebi ise

<b:if cond='data:view.isPost'>
<div id="wpac-rating"></div>
</b:if>

Aşağıdaki JavaScript kodunu </body> kodunun bir satır üzerine ekleyin. Yukarıda anlatığımız özelleştirme işlemlerini yapamıyorsanız, aşağıdaki kod içerisinde belirtilen ID numarasını kendi ID'niz ile değiştirerek kullanabilirsiniz.

<b:if cond='data:view.isPost'>
<script type="text/javascript">
//<![CDATA[
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 9949, color:'ff9800', html: 'Kullanıcı Puanı: {{=it.rating}} {{=it.stars}} {{?it.count>0}}Şuana kadar {{=it.count}} oy verildi. {{?}}'});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
//]]>
</script>
</b:if>

Yukarıdaki adımları tamamladıktan şablon editör sayfanızı kaydedin ve blogunuzda bulunan herhangi bir sayfayı açarak widget'in doğru bir şekilde çalıştığını kontrol edin.