Lista animada de últimos comentarios

Un blog está generalmente equipado con espacio para comentar, un lugar donde los visitantes pueden dejar su opinión sobre los artículos que leen. 

Para ver si un comentario es nuevo o no, generalmente se agrega un widget en la sidebar que nos muestra los comentarios recién llegados. Bueno, esta vez voy a compartir un widget de comentarios recientes con controles de animación y administración, equipado con avatar y efectos de animación similares a los widget de post recientes con animación.
Puede que en algunos blogs se comporte de manera diferente, pero será cuestión de ir variando el CCS para que se ajuste.
El CCS que dejo aquí es una adaptación propia ya que el que publicó el autor no era ni remotamente parecido a la demo y aún (cuando publico este post) no lo corrigió. Entre otras adaptaciones preferí hacerlo transparente para que se adapte a cualquier fondo y le coloqué borde a la imagen circular.
También he copiado el archivo de animación en HTML-JAVA para evitar depender del medio de almacenamiento del autor original que con el tiempo suele dejar de existir y por lo tanto nos deja sin el widget.
Si quiere evitar que se muestren los comentarios de respuesta del administrador del blog, simplemente ponga su nombre en el parámetro que dice adminBlog:"OPin", es decir cambie el OPin por su propio nombre y dejarán de aparecer.


Para su instalación en el blog siga estos pasos luego de haber salvado su plantilla actual:

Añadir un elemento de página HTML / JavaScript, y luego copiar el siguiente código :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>// Komentar Terbaru dengan Animasi dan admin kontrol // http://mkr-site.blogspot.com var _0xccb9=["1P.2G=(2(){3 a=2(p){3 e=p||{},k=e.2p||\x22\x22,c=e.2g||\x22#2j\x22,l=e.2s||6,j=e.2a||1e,i=e.2m||1b,b=e.1B||4,h=e.28||29,g=e.2e||1i,f=e.2k||2l,n=e.2o||\x221m://4.2q.2r.1r/-2v/2w/2E/2F/2H/2J-2O-1y.1A\x22,m=e.1C||1e,d=e.1F||\x22\x22;$.1G({1J:\x22\x22+k+\x22/1M/1N/1O?1a=1R-1T-1V\x22,1Z:\x2220\x22,22:\x2225\x22,26:2(D){3 v,x=D.2b.2d;5(x!==2f){v=\x22\x3C13 2h=\x272i\x27 Q=\x271g\x27\x3E\x22;Y=0;15(3 u=0;u\x3Cm;u++){3 t,z,w,o,y,r;5(u==x.W){1d}5(Y\x3E=l){1d}3 C=x[u];15(3 s=0;s\x3CC.14.W;s++){5(C.14[s].18==\x221z\x22){t=C.14[s].12}}15(3 B=0;B\x3CC.T.W;B++){z=C.T[B].1D.$t;w=C.T[B].1k$1E.1l}5(z!=d\x26\x26Y\x3Cl){Y++;v+=\x22\x3C7\x3E\x22;5(w==\x221m://1H.1I.1r/1n/1K.1L\x22){o=n}1o{o=w.1q(/\x5C/s[0-9]+(\x5C-c|\x5C/)/,\x22/s\x22+j+\x22$1\x22)}3 r=(C.T[0].1t)?C.T[0].1t.$t:\x22#1Q\x22;v+=\x27\x3CV Q=\x221S\x22\x3E\x3Ca 18=\x2219\x22 12=\x22\x27+r+\x27\x22\x3E\x3C1n 1l=\x22\x27+o+\x27\x22 1a=\x22\x27+z+\x27\x22 1U=\x22\x27+j+\x27\x22 U=\x22\x27+j+\x27\x22/\x3E\x3C/a\x3E\x3C/V\x3E\x27;3 y=C.1k$1W[1].1X;v+=\x27\x3CV Q=\x221Y\x22\x3E\x3Ca 18=\x2219\x22 12=\x22\x27+t+\x27\x22\x3E\x27+z+\x22\x3C/a\x3E \x3CZ\x3E\x22+y+\x22\x3C/Z\x3E\x3C/V\x3E\x22;3 A=C.21.$t;3 q=A.1q(/\x3C\x5CS[^\x3E]*\x3E/g,\x22\x22);5(q.W\x3Ef){q=q.23(0,f)+\x22...\x22}v+=\x27\x3Cp Q=\x2224\x22\x3E\x27+q+\x22\x3C/p\x3E\x22;v+=\x22\x3C/7\x3E\x22}}v+=\x22\x3C/13\x3E\x22;$(c).10(v);(2(E){E.27.1c=2(F,H,G){F=F||4;H=H||2c;G=G||1i;1f 8.1h(2(){3 O=E(8),N=1j,M=[],L=F,I=O.11(\x22\x3E 7:2n\x22).U(),K=0;2 J(){5(N){3 P=E(M[L]).1p({U:0,16:0}).2t(O);O.11(\x22\x3E 7:2u\x22).17({16:0},G,2(){P.17({U:I},G).17({16:1},G);E(8).1s()});L++;5(L\x3E=K){L=0}}2x(J,H)}O.11(\x22\x3E 7\x22).1h(2(){M.2y(\x22\x3C7\x3E\x22+E(8).10()+\x22\x3C/7\x3E\x22)});K=M.W;O.2z(\x27\x3CV Q=\x222A\x22 /\x3E\x27).2B().1p({U:I*F});O.11(\x22\x3E 7\x22).2C(\x22:2D(\x22+(F-1)+\x22)\x22).1s();O.X(\x221u\x22,2(){N=1b}).X(\x221v\x22,2(){N=1j});J()})}})(R);R(2(){5(i){R(\x2213.1g\x22).1c(b,h,g).X(\x222I\x22,2(){R(8).1w(\x221u\x22)}).X(\x222K\x22,2(){R(8).1w(\x221v\x22)})}})}1o{$(c).10(\x22\x3CZ\x3E2L 2M!\x3C/Z\x3E\x22)}},2N:2(){$(c).10(\x22\x3C1x\x3E2P 2Q 2R!\x3C/1x\x3E\x22)}})};1f 2(b){a(b)}})();","|","split","||function|var||if||li|this||||||||||||||||||||||||||||||||||||||||||||class|jQuery||author|height|div|length|bind|ntotal|span|html|find|href|ul|link|for|opacity|animate|rel|nofollow|alt|false|simpleSpyRkm|break|50|return|rcomnetspy|each|1000|true|gd|src|http|img|else|css|replace|com|remove|uri|stop|start|trigger|strong|icon|alternate|png|limitspyrkm|maxfeeds|name|image|adminBlog|ajax|img1|blogblog|url|blank|gif|feeds|comments|default|window|nope|json|kmtimg|in|width|script|extendedProperty|value|ketkomt|type|get|content|dataType|substring|komtsum|jsonp|success|fn|intervalspyrkm|4000|avatarSize|feed|5000|entry|tickspeedrkm|undefined|id_containrc|id|kmtranimasi|rcentcomnets|characters|100|animatedRecentcomments|first|defaultAvatar|url_blog|bp|blogspot|numComments|prependTo|last|AEWksK942OE|UFiyLzXJhiI|setTimeout|push|wrap|spyWrapperrkm|parent|filter|gt|AAAAAAAAFKE|jBegaGPClxI|rccommnetsx|s70|mouseenter|user|mouseleave|No|result|error|anonymous|Error|Loading|Feed","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (_0x9005x1,_0x9005x2,_0x9005x3,_0x9005x4,_0x9005x5,_0x9005x6){_0x9005x5=function (_0x9005x3){return (_0x9005x3<_0x9005x2?_0xccb9[4]:_0x9005x5(parseInt(_0x9005x3/_0x9005x2)))+((_0x9005x3=_0x9005x3%_0x9005x2)>35?String[_0xccb9[5]](_0x9005x3+29):_0x9005x3.toString(36));} ;if(!_0xccb9[4][_0xccb9[6]](/^/,String)){while(_0x9005x3--){_0x9005x6[_0x9005x5(_0x9005x3)]=_0x9005x4[_0x9005x3]||_0x9005x5(_0x9005x3);} ;_0x9005x4=[function (_0x9005x5){return _0x9005x6[_0x9005x5];} ];_0x9005x5=function (){return _0xccb9[7];} ;_0x9005x3=1;} ;while(_0x9005x3--){if(_0x9005x4[_0x9005x3]){_0x9005x1=_0x9005x1[_0xccb9[6]]( new RegExp(_0xccb9[8]+_0x9005x5(_0x9005x3)+_0xccb9[8],_0xccb9[9]),_0x9005x4[_0x9005x3]);} ;} ;return _0x9005x1;} (_0xccb9[0],62,178,_0xccb9[3][_0xccb9[2]](_0xccb9[1]),0,{}));</script> <div id="rcentcomnets"> <span class="loadingxrcm">Loading...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:5, url_blog:"URL_blogmu", adminBlog:"OPin" }); }); //]]> </script><br />
Copiar y pegar el siguiente código CCS antes de ]]></b:skin>.

.loadingxrcm{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTDfKj18zoUdZNpWzF_izIFCjWfnKGf-pjzlPJK4VIacbFXuYW2gAxaaANi3C7LQo38QJFaX7XJwUNzXEEf2dusqfkLSQ4lVTg38ujAZDabrosfiurU2XEzRVGn17dVT0b1dU8q-6ZSE/s1600/progress_ani.gif) no-repeat 50% 50%; width:32px; height:32px; display:block; margin:0 auto; text-indent:-9999px; } b.headnya{ font-size:16px; display:block; text-align:center; margin:0 0 20px; color:#0045AD; } b.hdnya{ margin:20px 0 0; display:block; color:#04693D; text-align:center; } b.hdnya a{ color:#181818; background:transparent; border-radius:2px; padding:0 10px; display:inline-block; } #box{overflow:hidden} #box .half{width:50%;float:left} #box .half b{text-align:center;display:block;font-size:11px;margin:0 0 25px} #box .areaisi{width:auto;margin:0 auto} ul.rcomnetspy,ul.rcomnetspy li{ margin:0; padding:0; list-style:none; overflow:hidden; position:relative; } ul.rcomnetspy li{ height:120px; background:transparent; padding:0 8px; border:0px solid #DFDFDF; border-top:1px solid black; } ul.rcomnetspy img{ border-radius:9999px; overflow:hidden; background:grey; border:2px solid grey; float:left; margin:5px 5px 0 0; } ul.rcomnetspy .ketkomt{overflow:hidden} ul.rcomnetspy .ketkomt a{ display:block; color:black; font-weight:bold; overflow:hidden; background:#363636; border-radius:12px; float:left; padding:0 25px; margin:5px 5px 10px; } ul.rcomnetspy .ketkomt span{ font-size:8px; position:absolute; z-index:2; top:30px; border-radius:12px; display:block; line-height:11px; padding:0 25px ; left:68px; background:#222; } ul.rcomnetspy p{ margin:15px 10px 10px; }

url_blog                 Llenelo con la url de su blog: url_blog: "http://generacionopin.blogspot.com.ar".

id_containrc           Identificación en la que se muestra  el widget <div id="rcentcomnets"> <span class="loadingxrcm"> </ span> </ div> luego id_containrc: "# rcentcomnets".

numComments      El número de comentarios que se muestra, por defecto: 6

avatarSize             Tamaño de avatar que aparece, por defecto 50.
 
animatedRecentcomments   Si es true, entonces la animación / efecto se activará. default false.

limitspyrkm          El número de comentarios límite que aparecen si la animación está activa, por defecto 10.
 
intervalspyrkm     SlideDown velocidad de la animación (en milisegundos), por defecto 4000
 
tickspeedrkm        FadeIn velocidad de transición (en milisegundos), por defecto 1000.

 characters             Longitud de caracteres / número de caracteres que se desea mostrar, por defecto 100.
 
defaultAvatar       Avatar que aparece si un comentario no tiene avatar por ejemplo, por defecto anónimo,
 
maxfeeds              El número máximo de feeds para buscar, por defecto 50. NB: La carga de widget será más lenta.
 
adminBlog            Si no desea mostrar los comentarios que contienen el nombre del administrador del blog indique el nombre del admin blog, adminBlog:"OPin".

Si tiene alguna consulta o duda puede visitar el blog del autor original aunque esté escrito en Indonesio:

 http://mkr-site.blogspot.com.ar/2013/01/komentar-terbaru-blogspot-animasi.html