Widget mais comentados posts para blog

Ir para Blogger > Layout
Clique em " Adicionar um Gadget "
Escolha HTML / JavaScript do widget
Cole o código a seguir dentro dele:

<style>
/* ######### Widget mais comentados por TSB ##########*/

.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 + "  </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.tudoseo.com
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Faça essas pequenas alterações:

Substitua com seu URL Blog http://www.tudoseo.com
Substituir esta 6 com quantos títulos pós que você deseja exibir na lista.
Para mudar a cor das bolhas comentário fundo, simplesmente substituir o amarelo realçado códigos de cores hexadecimais ( # 292D30 ) com a sua cor personalizada.
Para mudar a cor de texto da contagem Comentário Substitua #FFF .
Substitua #dedede se você deseja alterar a cor da borda que aparece abaixo de cada título do post. Se você não quiser mostrar uma borda abaixo de cada item da lista, em seguida, simplesmente exclua essa linha: border-bottom: 1px tracejada#dedede ;