Últimos comentários na sidebar

Resolvi refazer essa dica e de quebra colocar algumas imagens, enfim, dar uma "papagaiadinha básica" no widget. Esse tipo de widget é muito bom para quem tem muitas postagnes e se não for esse recurso pode acabar nem lendo os cometários referentes a postagens mais antigas.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Para instala-lo em seu blog é bem simples.

Vá até o HTML de seu blog e depois de: ]]></b:skin>

Cole o código abaixo.

<script type='text/javascript'>
//<![CDATA[
// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 3
// Date:    2009-02-13
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   var postlink = alturl.split("?");
   var commentid = alturl.split("#");
   postlink = postlink[0];
   commentid =commentid[1];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Fev";
   monthnames[3] = "Mar";
   monthnames[4] = "Abr";
   monthnames[5] = "Mai";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Set";
   monthnames[10] = "Out";
   monthnames[11] = "Nov";
   monthnames[12] = "Dez";
   if ("content" in entry) {
     var comment = entry.content.$t;}
   else
   if ("summary" in entry) {
     var comment = entry.summary.$t; }
   else var comment = "";
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   document.write('<div class="bbrecpost">');
   if (showcommentdate == true) document.write('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbkT8ItQ9cilgaUinq176GWLahwBjnQIl3FQZD7RyR29-gxIPgwMuRg9tJFqUwSDEmlra1jo9w5hp5qLe1LwzTmTj6cCZz3ZzvtRSkMmKOpZiAGfDyysbFzLDa0GkhAdMJGb_Bq3ST8U/s1600/attach.png"/> Em ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
   document.write('<a href="' + postlink +'#' + commentid + '">' + entry.author[0].name.$t + '</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYt5HPnQzdGAzkCuiWT8sQXImOFs1y9JfaVRkvJS1WebNaNdqnSeATBD9WyxdRA_aCRkG68VlKmPjz2LUv6jY3P20XO2C6u6Hht-geyN3Ff0rHPBvWpArwFKxLlS025J5zrcz_QHVmM-A/s1600/030.png"/> comentou');
   if (showposttitle == true) document.write(' : <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOWCDLJJt9eIEm5e6tgtg7imzrbT-jtmFR_HQeoJga-g35R28fhGwHcax2xOxaZmw7vLhM_twN0n1P46p9uynq_ZAYtZRHQtVK4NiXwonobhof28Z0PCFjjeo8PJkSxRH_ZSgoDDCkfJU/s1600/link.png"/> ' + posttitle);
   document.write('</div><div class="bbrecpostsum">');
   if (comment.length < numchars) {
         document.write(comment);
   }
   else
        {

         comment = comment.substring(0, numchars );
         var quoteEnd = comment.lastIndexOf(" ");
         comment = comment.substring(0, quoteEnd);
         document.write(comment + '...<a href="' + alturl + '">(mais...)</a>');
   }
   document.write('</div>');
  }
document.write('<div class="bbwidgetfooter">');
document.write('<span style="font-size:80%;">Widget by <a href="http://templateseacessorios.blogspot.com">Templates e Acessórios</a><br/>Powered by <a href="http://beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
document.write('</div>');}
//]]>
</script>

Agora antes de: ]]></b:skin>

Cole o código abaixo.

/*Showrecentcomments-----------------------------------------*/

.bbrecpost {
background: #EBF1F1;
margin: 13px 2px 3px 2px;
padding: 6px 3px;
}
.bbrecpostsum {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYt5HPnQzdGAzkCuiWT8sQXImOFs1y9JfaVRkvJS1WebNaNdqnSeATBD9WyxdRA_aCRkG68VlKmPjz2LUv6jY3P20XO2C6u6Hht-geyN3Ff0rHPBvWpArwFKxLlS025J5zrcz_QHVmM-A/s1600/030.png) no-repeat left top;
border: 1px dashed #EBF1F1;
color: #000;
margin: -3px 2px;
padding: 14px 2px 4px 18px;
}
.bbwidgetfooter{
background: #EBF1F1;
padding: 6px 3px;
margin: 13px 2px 3px 2px;
}
.bbrecpost, .bbwidgetfooter, .bbrecpostsum a{
color: #808080;
}

Salve.

Agora vá até "Elementos de página" e clique em "Adicionar widget" agora clique em HTML/Javascript e cole este código abaixo colocando o endereço de seu blog no local indicado.

<script style='text/javascript'>var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 150;</script><script src='AQUI O ENDEREÇO DE SEU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'></script>