17/03/2013

Tutorial: Comentários recentes com avatar

||
   ♥ Postagem Programada♥

Yo paçocas como vão hoje? Bom eu achei um tutorial que costumava ver muito em blogs, ele serve para  que colocar seus últimos comentários recebidos como uma listinha na sidebar, assim os leitores podem ver e ate visitar a pagina também para comentar. É uma ótima forma de chamar atenção de seus leitores para comentar também. O mais legal e que possui um avatar redondo, coisa que não era possível ate um tempo atrás, para adicionar e mais fácil do que se  imagina, então quer tentar? É só continuar comigo aqui.


Primeira mente em seu painel, escolha o blog que sera adicionado o código. Então vá ate layout e abra um novo gadget de HTML/JavaScript, dentro dele cole o seguinte código:

<div id="recent-comments-box">
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}   
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 4,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://www.bunnycrazy.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=4"></script>
</div>

Você vai meche em praticamente nada no código, apena nas partes que destaquei, que vou explicar agora como se arrumar.

Vermelho: E o numero de comentários, que sera exibido nele
Laranja: Se desejar que os avatares não apareçam, altere o true para false.
Verde: Tamanho dos avatares, aumente o número ou diminua ate ficar da forma deseja.
Roxo: Se não quiser os avatares redondos, altere de true para false.
Azul: Quantidade de caracteres (letras), que ira aparecer a cada comentário feito.
Dourado: E a imagem padrão para anônimos, ou, se pessoa não tiver avatar.
Rosa: Altere de true para false, se não quiser mostrar os créditos do autor.
Preto: Coloque a URL de seu blog ou site no local indicado, cuidado para não apagar os traços

O código foi feito pelo Way2bloggin, mas como achei no Noticia Blog, então os créditos vão para ambos, por postarem esse ótimo script. Mas então gostaram? Se gostaram, não esqueçam de comentar e dizer o que acharam, beijos e ate aproxima.

16 comentários:

  1. Que legal *-*, talvez eu use.

    ~Kissu! :3

    http://adventure--land.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fica bem legal eu já usei em outro blog meu

      Excluir
  2. Bem legal , gostei do tuto !

    Abraços ♥

    VISITE : http://pensamento-jhenny.tk/
    Post novo \õ

    ResponderExcluir
    Respostas
    1. Que bom, que gostou ^^
      Beijinhos

      Excluir
  3. Amei como mantenho contato com vc?
    perfecetexplosionn.blogspot.com

    ResponderExcluir
    Respostas
    1. Yo Lu-san eu tenho face e TT deixarei lá no seu blog.

      Excluir
  4. Demais já vou adc no meu blog <3

    princessofjeans.blogspot.com

    ResponderExcluir
  5. AAH não pude deixar de notar falta um seguidor para cumpri a meta o/

    ResponderExcluir
  6. Olá querida, já estou seguindo seu blog, que é muito charmoso viu?


    Convido você e suas leitoras a conhecer o meu:

    http://toobege.blogspot.com.br/


    Beijinhos e tenha uma ótima semana!

    ResponderExcluir
    Respostas
    1. Obrigada por seguir, consertesa irei retribuir.
      Fico feliz que tenha gostado de meu blog ^^

      Excluir
  7. ótimo tutorial !!
    Wendy, podes fazer um tutorial ensinando a mudar o url do blog ?
    Que nem aqueles blogs que vc poem o url e é direcionado para outro sabe ? Beijokas

    ResponderExcluir
    Respostas
    1. Claro eu já tenho aqui no blog deixarei o link lá pra voce.

      Excluir
  8. Achei muito legal, acho que vou usá-lo, em uma ideia, mais isso deve vai demorar um pouco!

    Kisus...
    Things Crazy

    ResponderExcluir
    Respostas
    1. Quando usar me avise viu? ^^

      Excluir