Bài viết mới nhất với hiệu ứng trượt cho blogspot

Một trong số hình thức để khuyến khích độc giả comment đó chính là làm cách nào để comment của họ được hiển thị trên trang chủ của blog. Và bài viết sau đây mình sẽ hướng dẫn bạn làm cách nào để thêm widget bình luận gần đây nhất được tác giả của blog MKR viết ra vào blog. Đặc biệt hơn những bình luận trong tiện ích này sẽ được di chuyển với hiệu ứng trượt đẹp mắt và dễ gây sự chú ý cho độc giả của blog.

​

Demo​

Thêm widget Bình luận gần đây nhất vào blog
Bạn thêm widget HTML/Javascript mới tại vị trí thích hợp sau đó sử dụng đoạn code bên dưới rồi save lại

Code:

<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:"URL_blogmu",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

Thay thế URL_blogmu thành URL blog của bạn
Lựa chọn style cho tiện ích
Tác giả đã "chuẩn bị" cho chúng ta hai đoạn code sau để phù hợp với blog theo hai gam màu chính sáng và tối , mời các bạn chọn lựa cho phù hợp với blog của mình
Light style

Code:

.loadingxrcm {background:transparent url(https://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/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}

Dark style

Code:

.loadingxrcm {background:transparent url(https://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/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}

Tùy chọn
Trong đoạn code thứ nhất bạn chú ý thay thế URL_blogmu thành url blog của bạn và nama_akun blogger/google+ là tên của admin blog (việc này sẽ giúp cho widget này không hiển thị nhận xét của admin). Nếu không muốn có hiệu ứng di chuyển bạn chuyển animatedRecentcomments thành false
Mình không thể đưa ra hết những tùy chọn cho thủ thuật này tại bài viết. Các bạn có thể tham khảo chi tiết thêm tại http://bit.ly/19gOkRx