Rotating Popular Posts widget for Blogger

• Σύνδεση στον Blogger
• Σχεδίαση / Στοιχεία Σελίδας
• Προσθήκη Gadget 
• Επιλέξτε "Δημοφιλείς Αναρτήσεις" με εικόνες
• Ακριβώς πάνω από τις "Δημοφιλείς Αναρτήσεις" επιλέξτε ξανά "Προσθήκη gadget"
• Επιλέξτε HTML/JavaSccript
• Επικολλήστε τον παρακάτω κώδικα:

<style type="text/css" media="screen">
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}
#PopularPosts1 ul { 
width:290px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}
#PopularPosts1 li { 
 width:270px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvBQDeK0xrEEbRL8RDuHbRy5RBGMseQk6IG4vU4Bu5VIHN53hx32ChO_QAeN-SU1aZ2OGzz5Y7r5stLUaJcLaTiLCL3LT32DoLe8dQS_LeocVOWv0derfz1PgG0MS9aB2D96-qtuKXU0/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}
#PopularPosts1 li .item-title { 
    
    font-size:1em; 
    margin-bottom:0.5em; 
}
#PopularPosts1 li .item-title a { 
text-decoration:none; 
color:#7CA2C4; 
font:bold 12px verdana; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
}
#PopularPosts1 li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:2px solid #7CA2C4; 
}
#PopularPosts1 li .item-snippet { 
  overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#289728; 
padding:0px 0px; 
margin:0px 0px; 
}
#PopularPosts1 .item-snippet a, 
#PopularPosts1 .item-snippet a:visited { 
    color:#3E4548; 
    text-decoration: none; 
}
#PopularPosts1 .spyWrapper { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
}
#PopularPosts1 { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}
.tags span, 
.tags a { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
}
a img { 
    border: 0; 
}
--> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
$(function () { 
    $('.popular-posts ul').simpleSpy(); 
}); 
</script> 
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

• Κρατήστε αυτά τα δύο gadgets μαζί ενωμένα για να μπορούν να δουλέψουν.
• Αποθήκευση και είστε έτοιμοι.

Αν θέλετε να αλλάξετε τις διαστάσεις φροντίστε το "310" και το "290" να έχουν πάντα τη διαφορά των "20"

Ο συγκεκριμένος κώδικας είναι για ανοιχτόχρωμα πρότυπα. Αν θέλετε να το βάλετε σε σκούρα πρότυπα αντικαταστήστε το παρακάτω σημείο του κώδικα

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvBQDeK0xrEEbRL8RDuHbRy5RBGMseQk6IG4vU4Bu5VIHN53hx32ChO_QAeN-SU1aZ2OGzz5Y7r5stLUaJcLaTiLCL3LT32DoLe8dQS_LeocVOWv0derfz1PgG0MS9aB2D96-qtuKXU0/s400/popular+posts.jpg) repeat-x;

με τον background:#ffffff αντικαθιστώντας το χρώμα #ffffff με τον κώδικα που θα ταιριάζει στη δικήσας Σελίδα.