8 de junho de 2016

Gadget de Últimos Comentários do Blogger


Mais um super tutorial aqui no Códigos Blogger, hoje estou trazendo um gadget que vai exibir os últimos comentários do seu blog com um link para visualizar cada comentário no ranking completo.

A implementação é bem fácil, porém requer um pouco de atenção e cuidado para não danificar nada em seu blog. O mesmo gadget está sendo utilizado aqui no Códigos Blogger.

Vale ressaltar que esse código vai funcionar apenas se você utilizar o sistema de comentários nativo do blogger.

Como instalar

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Clique sobre o editor de código e tecle CTRL+F e procure por </b:skin> e abaixo dele cole o código abaixo e clique em Salvar Modelo
  4. <script type='text/javascript'>
    //<![CDATA[
    /**
     * Últimos Comentários no Blogger
     * Version : 1.0
     * Author  : Códigos Blogger
     * Author Url  : http://www.codigosblogger.com
     *
     * --==Opções==--
     *   var  numComments  = 5,
     *    showAvatar  = true,
     *    avatarSize  = 60,
     *    roundAvatar = true,
     *    showMorelink = false,
     *    moreLinktext = "More &raquo;"
     *    characters  = 40,
     *    defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
     *    hideCredits = false;
     *
     */
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
    //]]>
    </script>
  5. Depois de salvar, vá até Layout, escolha a área que quer exibir o gadget e clique em Adicionar um Gadget
  6. Escolha o gadget HTML/JavaScript e cole o código abaixo nele e Salve
<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  = 20,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 showMorelink = true,
 moreLinktext = "Ler &raquo;"
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://ENDEREÇO-DO-SEU-BLOG/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Entendendo o código destacado:

numComments - Número de comentários a ser exibido pelo gadget.
showAvatar - 'true' exibe a foto do comentarista, mude para 'false' caso não queira exibir.
showMorelink - 'true' exibe o link para ler o comentário completo, mude para 'false' caso não queira exibir.
moreLinktext - Texto que é exibido para ler o comentário completo.
characters  - Quantidade de caracteres do comentário.
ENDEREÇO-DO-SEU-BLOG - Exemplo: www.codigosblogger.com

Altere os campos como desejar e salve. Pronto agora você já pode visualizar gadget no seu blog.

Dúvidas? deixe um comentário.


Classificação: 5 Gadget de Últimos Comentários do Blogger por em . Aprenda a colocar um gadget de últimos comentários do seu blog com foto e link para o ler o comentário completo.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

Um comentário: