Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 20/12/13.

Lượt xem: 4,835

  1. TrollVL Thành viên cấp 2

    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.

    [​IMG]

    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

    Chỉnh sửa lần cuối: 24/12/13
    Hồng Sơn thích bài viết này
  2. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    làm như hướng dẫn chỉ hiện loading ...
  3. TrollVL

    TrollVL Thành viên cấp 2

    dinhhiep36 à, bạn đã thay URL_blogmu thành URL blog của bạn chưa?
  4. dinhhiep36

    dinhhiep36 Thành viên cấp 1

    làm được rồi, nhưng ... đời không như là mơ. không đẹp lắm
  5. TrollVL

    TrollVL Thành viên cấp 2

    dinhhiep36 về cơ bản là vậy, phải sửa CSS sao cho phù hợp với bố cục với màu sắc toàn blog nữa :D
    dinhhiep36 thích bài viết này
  6. cảm ơn bài viết của chủ thớt, các bác có thể tham khảo thêm style của thằng này, thấy khá ok nè => obinb.com/2015/09/tao-widget-bai-viet-moi-nhat-recent.html

Ủng hộ diễn đàn