Most Commented Posts Widget for Blogger

Καλησπέρα σας, σήμερα θα σας παρουσιάσω ένα Gadget για Blogs το οποίο εμφανίζει με ωραίο τρόπο τα άρθρα που έχουν συζητηθεί περισσότερο στο blog σας δηλαδή αυτά με τα περισσότερα Comments!

Είχαμε καθυστερήσει να κάνουμε σχετική ανάρτηση διότι σχεδόν όλες οι προηγούμενες εκδόσεις παρουσίαζαν προβλήματα με το Script το οποίο δεν λειτουργούσε σε όλα τα blogs. Πιστεύουμε ότι με αυτή την έκδοση θα βρείτε όλοι αυτό που ψάχνετε χωρίς προβλήματα.

Αυτό που κάναμε εδώ ήταν να χρησιμοποιήσουμε το ήδη υπάρχον Yahoo Script για Comments και να το διαμορφώσουμε στα πλαίσια του Blogger με κάποιες πινελιές CSS3.

Ακολουθήστε τα παρακάτω βήματα για την εγκατάσταση:

1) Σύνδεση στον Blogger.

2) Επιλέγουμε Διάταξη.

3) Επιλέγουμε Προσθήκη Gadget στο σημείο που θέλουμε.

4) Επιλέγουμε HTML / JavaScript από την λίστα που μας ανοίγει,

Και προσθέτουμε τον παρακάτω κώδικα με προσοχή:

<style>
/* ######### Most Commented Widget by BloggerTricks.gr ##########*/
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF; 
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;

}
.commentbubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}
</style>

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="list-style:none; ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.bloggertricks.gr
&ShowHowMany=6 
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

5) Μπορούμε να αλλάξουμε τα σημεία με το κίτρινο και να δοκιμάσουμε τι ταιριάζει καλύτερα στο blog μας

6) Αποθήκευση και τέλος