Saiba como:"Adicionar "..." últimos comentários com avatar"... na sidebar do Blogger  
Autor: Edilene brandao da silva | Publicado: 2014-06-29T15:08:00-07:00


Tutorial:


Para que tenha 
"destaque" :
"comentaristas"&nbsp;
e&nbsp;
"comentários"&nbsp;
no blog.





"Porém,&nbsp; antes, não esqueça ,

de salvar uma "cópia" de seu template,

que está em uso!&nbsp; 

Porque, caso ocorra algo inesperado&nbsp;

ou não dê certo, é só reinstalá-lo.&nbsp;





&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Essa dica é para o 




template "Simple do novo Blogger,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; implementado em julho 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; de 2011 .

Vamos&nbsp;
ao passo - a - passo :

1. Primeiro Passo:

.Logado no painel blogger
.Vá até ao Modelo/Lay-out" de seu blog,&nbsp;
e clique em :
►Editar modelo&nbsp;


...

Em seguida: 
&nbsp;procure por:&nbsp;
&nbsp;]]&gt;&lt;/b:skin&gt;

...encontrando-o, depois dele,  
cole, 
o código a seguir:
▼ 
___________________________________ 





&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
/**
&nbsp;* Recent Comments Widget with Avatar for Blogger
&nbsp;* Version : 1.3
&nbsp;* Author  : Harish
&nbsp;* Author Url  : http://www.way2blogging.org/
&nbsp;* (c) 2012 allrightsreserved.
&nbsp;*
&nbsp;* --==Options==--
&nbsp;*   var  numComments  = 5,
&nbsp;*    showAvatar  = true,
&nbsp;*    avatarSize  = 60,
&nbsp;*    roundAvatar = true,
&nbsp;*    showMorelink = false,
&nbsp;*    moreLinktext = "More &amp;raquo;"
&nbsp;*    characters  = 40,
&nbsp;*    defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
&nbsp;*    hideCredits = false;
&nbsp;*
&nbsp;*/

eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?'':e(parseInt(c/a)))+((c=c%a)&gt;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 
&amp;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=\'&lt;Y 
C="12"&gt;\';H(7 i=0;i&lt;D;i++){7 
x,y,2,k;4(i==L.14.8.q)1g;b+="&lt;X&gt;";7 8=L.14.8[i];H(7 
l=0;l&lt;8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 
a=0;a&lt;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&amp;&amp;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+"&amp;s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="&lt;V
 C=\\"1T "+k+"\\"&gt;&lt;B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 
1w=\\""+9+"\\" 1I=\\""+9+"\\"/&gt;&lt;/V&gt;"}b+="&lt;a 
w=\\""+x+"\\"&gt;"+y+"&lt;/a&gt;";7 11=8.1v.$t;7 
6=11.u(/(&lt;([^&gt;]+)&gt;)/1u,"");4(6!=""&amp;&amp;6.q&gt;A){6=6.1r(0,A);6+="&amp;1s;";4(z==j){6+="&lt;a
 
w=\\""+x+"\\"&gt;"+E+"&lt;/a&gt;"}}e{6=6}b+="&lt;r&gt;"+6+"&lt;/r&gt;";b+="&lt;/X&gt;"}b+=\'&lt;/Y&gt;\';7
 F="";4(M==j){F="10:1F;"}b+="&lt;r 
1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\"&gt;1y 1t&lt;a 
w=\\"h://W.1x.1L/\\"&gt;1Q&lt;/a&gt;&lt;/r&gt;";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,{}))

//]]&gt;
&lt;/script&gt;



Visualize!
Se estiver tudo certo,
Salve! 



...Segundo Passo:


Clicando&nbsp; em "lay-out"


Você irá&nbsp;
novamente "clicar" 
"Adicionar um Gadget"




&nbsp;&nbsp;
Abrirá uma janela "pop",
e,
ao abrir, você
clicará
em&nbsp;
"HTML/Javascript"



Cole,
o próximo código:
▼
........................................................................ 







&lt;style type="text/css"&gt;
&nbsp; &nbsp; ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
&nbsp; &nbsp; .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;}
&nbsp; &nbsp; .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;}
&nbsp; &nbsp; .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
&nbsp; &nbsp; .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
&nbsp; &nbsp; .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
&nbsp; &nbsp; // Recent Comments Settings
&nbsp; &nbsp; var
&nbsp;numComments &nbsp;= 20,
&nbsp;showAvatar &nbsp;= true,
&nbsp;avatarSize &nbsp;= 30,
&nbsp;roundAvatar = true,
&nbsp;characters &nbsp;= 30,
&nbsp;defaultAvatar &nbsp;= "http://www.gravatar.com/avatar/?d=mm",
&nbsp;hideCredits = true;
//]]&gt;
&lt;/script&gt;

&lt;script type="text/javascript" src="APAGAR AQUI E ESCREVER O ENDEREÇO DE SEU BLOG/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5"&gt;&lt;/script&gt;








.........................................................................................................

Nota:
&nbsp; 
Aonde está&nbsp; escrito&nbsp; na cor verde ,
apagar e escrever o endereço de seu blog.




Pronto! 


Agora, quando alguém comentar ,&nbsp;
em seu blog,
aparecerá,&nbsp;
na sidebar, barra lateral ,&nbsp;
de seu blog!

Facilitando para você,&nbsp;
dono do blog,
para quem comentou e&nbsp; 
e para
os visitantes se orientarem!




Deixar o seu comentário.

&nbsp;Antes de comentar pense no que vai dizer.

&nbsp;Lembre-se que todo o mundo vai ler o seu comentário.&nbsp;

&nbsp;Pode utilizar alguns tags HTML, 
"

...não permite-se  comentários anônimos."&nbsp;

"A moderação de comentários foi activada.&nbsp;

Todos os comentários têm de ser aprovados."