Recent comment với avatar

Hôm trước mình đã giới thiệu một mẫu recent comment nhưng nó còn đơn giản, hôm nay mình xin giới thiệu một mẫu mới có kèm cả avatar và hiệu ứng trượt.

#Thêm tiện ích

1. Đăng nhập Blogger > Bố cục > Thêm tiện ích > HTML/Scrip. 2. Dán code dưới vào và save lại

<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:10,
url_blog:"http://www.khanh98.blogspot.com",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

Thay http://www.khanh98.blogspot.com thành url blog của bạn.

#Thêm css

1. Mẫu > Chỉnh sửa HTML

2. Tìm thẻ ]]></b:skin>

3. Dán code dưới vào trên thẻ vừa tìm.

Có hai kiểu cho chúng ta lựa chọn:

• Màu đen

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN5XclnMCzM_XmpGZgfkcUVYv_YJobVNM5Vimi7lQRT7ehE9fgZF3n2gsAYv9GLxIWeQY42l9lfSorTBtFiS2NSIns-h_QSv3cCTr8G570r_ELXqc6BAAhggSeFuBSVRNaIqHDfRvbHl4/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black}
ul#kmtranimasi p{margin:15px 0 0}

• Màu trắng

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN5XclnMCzM_XmpGZgfkcUVYv_YJobVNM5Vimi7lQRT7ehE9fgZF3n2gsAYv9GLxIWeQY42l9lfSorTBtFiS2NSIns-h_QSv3cCTr8G570r_ELXqc6BAAhggSeFuBSVRNaIqHDfRvbHl4/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}

Nguồn Mkr