Widgets

Widget mais comentados posts para blog

0 comentários

Widget mais comentados posts para blog 

Widget mais comentados posts para blog

 

  1. Ir para Blogger > Layout 

  2. Clique em " Adicionar um Gadget "
  3. Escolha HTML / JavaScript do widget
  4. 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 + "&#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.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 ;  
  5. Salve e está tudo feito!

Visite seu blog e veja uma belo widget com a lista de  Posts populares com coluna de comentários destacados! :)



O que achou deste post? comente agora

Todo comentário é bem vindo, pois acrescenta muito aos nossos posts, portanto, fique a vontade para debater sobre nossos assuntos...

setaretornoaotopo