Blogger'a En Çok Yorum Alan İçerikler Widget'ı Eklemek

Merhaba içerik üreticileri!

Bu yazımda; blogunuza nasıl En Çok Yorum Alan İçerikler Widget'ı ekleyeceğinizi anlatacağım. Adımları anlatmaya başlamadan önce dilerseniz bu widget'ı kullanarak neler elde edeceğimize bir göz gezdirelim:

1. İnsan psikolojisi; her zaman kendisini bir topluluğa ait hissetme odaklı çalışır. Bu tarz widgetlar ile özelleştirilmiş internet sitelerini ziyaret eden kullanıcılar; kendileriyle ortak ilgi alanlarına sahip diğer insanların görüşlerini merak ederler. Özelleştirilmiş widgetlar; kitle oluşturmak için atılabilecek en iyi adımlardan biridir.

2. Görsel tasarımın hakim olduğu siteler; yazı ağırlıklı sitelere oranla %100 daha fazla ziyaret ediliyor. Bu nedenle bu tarz widgetları düz yazı şeklinde sunmaktansa grafik şeklinde sunmak her zaman daha avantajlı.

3. Siteyi ziyaret eden kişiler diğer kullanıcıların en çok ne hakkında konuştuklarını merak ettikleri için bu tarz widgetlar aracılığıyla bağlanmış içerikler daha çok okunuyor.

En Çok Yorum Alan İçerikler Widget'ı Nasıl Eklenir?

1. blogger.com adresini ziyaret edin ve oturum açın.

2. Düzenlemek istediğiniz internet sitenizin başlığına tıklayın ve sağ tarafta bulunan Şablon sekmesine tıklayın. Açılan sayfada HTML'yi düzenle butonuna tıklayın.

3. Açılan editör penceresinde herhangi bir yere tıklayın ve Ctrl+F tuş kombinasyonlarını kullanarak arama kutusunu aktifleştirin.

4. Aşağıdaki kodu aratın:
</Group>

5. Kodun hemen altına aşağıdaki kodu yapıştırın.
<group description="Most Commented" selector=".most-commented"> <variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/> <variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/> <variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/> <variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/> <variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/> </Group>

Eğer </Group> etiketini bulamazsanız bu kodu aratabilirsiniz:
<b:skin><![CDATA[

6. Şimdi aşağıdaki kodu aratın:
]]></b:skin>

7. Bu kodun hemen üstüne aşağıdaki CSS kodunu yapıştırın:
.comment-count { padding: 3px 10px; background: #fff; color: #000; font-size: 10px; float: right; } .most-commented ul { padding: 0px !important; font-family: Century Gothic, sans-serif; } .most-commented ul li { list-style-type: none; padding: 10px; color: #555; margin-top: -10px; } .most-commented ul li a { color: #444; font-weight: bold; text-decoration: none; font-size: 11px; } .most-commented ul li img { float: left; margin: 0px 5px 0px 0px; width: 60px; height: 60px; } .most-commented:nth-child(3n+0) { background: $(most.commented.background1); width: 100%; } .most-commented:nth-child(4n+0) { background: $(most.commented.background2); width: 95%; } .most-commented:nth-child(5n+0) { background: $(most.commented.background3); width: 90%; } .most-commented:nth-child(6n+0) { background: $(most.commented.background4); width: 85%; } .most-commented:nth-child(7n+0) { background: $(most.commented.background5); width: 80%; }

8. Editörde yaptığınız değişiklikleri kaydedin ve sağ köşedeki menüde bulunan Yerleşim sekmesine tıklayın. Gagdet Ekle menüsününden HTML/JavaScript Ekle eklentisini kurun. Kutunun içine aşağıdaki kodu yapıştırın:
<script type="text/javascript"> function stripTags(s,n) { return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ") } function mostcommented(feed) { var i; for (i = 0; i < feed.count ; i++) { var postURL = "'" + feed.value.items[i].link + "'"; var postTitle = feed.value.items[i].title; var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />"; var postDescription = feed.value.items[i].postdescription; var postComments = feed.value.items[i].commentcount; var postList = '<div class="most-commented"> <ul> <li><div class="comment-count"> ' + postComments + "</div> " + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>" + '<p> ' +stripTags(postDescription,10)+'...</p> ' + '</li> </ul> </div> '; document.write(postList); } } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? AddUrlHere=http://helplogger.blogspot.com &NumberofPosts=5 &_id=2cb5eb603ed55a6264ee1484e5fdd45c &_callback=mostcommented &_render=json" type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span>

9. AddUrlHere= bölümündeki url'yi kendi url'nizle değiştirin. Açıklama kısmının uzunluğunu değiştirmek isterseniz PostDescription,10 kısmındaki rakamı artırın/azaltın.

10. Daha minimal bir görünüm elde etmek isterseniz sekizinci adımdaki script'i bu script ile değiştirebilirsiniz:
<script type="text/javascript"> function stripTags(s,n) { return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ") } function mostcommented(feed) { var i; for (i = 0; i < feed.count ; i++) { var postURL = "'" + feed.value.items[i].link + "'"; var postTitle = feed.value.items[i].title; var postComments = feed.value.items[i].commentcount; var postList = '<div class="most-commented"><ul> <li style="margin-bottom: 10px"><div class="comment-count"> ' + postComments + "</div> " + "<a href="+ postURL + '">' + postTitle + "</a>" + '</li> </ul> </div> '; document.write(postList); } } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? AddUrlHere=http://tasarimsozlugu.blogspot.com &NumberofPosts=5 &_id=2cb5eb603ed55a6264ee1484e5fdd45c &_callback=mostcommented &_render=json" type="text/javascript"></script> <span style="font-size: 80%; float:left;"><a href="http://tasarimsozlugu.blogspot.com.tr/2016/09/blog-yorumlarina-emoji-ekleme.html">Add this widget</a></span>

Script'i değiştirdiyseniz url adresini tekrar değiştirmeyi unutmayın.

11. Yorumları sıralandırmak isterseniz yukarıdaki script'te bulunan bu kodu:
<div class="comment-count"> ' + postComments + "</div> "

Bununla değiştirin:
<div class="comment-count"> ' + postComments + " comments" + "</div> "

12. Kaydet tuşuna basın. En Çok Yorum Alan İçerikler Widget'ının renklerini değiştirmek isterseniz; Şablon > Özelleştir > Most Commented > Renk Paleti adımlarını izleyebilirsiniz.

Takıldığınız herhangi bir nokta varsa yorumlar kısmında belirtebilirsiniz. İçeriği faydalı bulduysanız lütfen paylaşmayı unutmayın.