Hiển thị trích đoạn cho bài đăng mới nhất dạng tooltip

Trước đây mình đã giới thiệu thủ thuật Hiển thị trích đoạn cho bài đăng phổ biến dạng tooltip và để đồng bộ giao diện blog mình xin giới thiệu thêm cách hiển thị tương tự nhưng đối với bài đăng mới nhất. Và tiện ích bài viết mới nhất mình áp cho thủ thuật này do bạn Duy Phạm viết ra

Thực hiện:

Bước 1: Thêm đoạn code sau vào trước ]]></b:skin> trong template của bạn sau đó lưu lại

.tooltip{position:relative;display:block}
.tooltip span{visibility:hidden;position:absolute;bottom:30px;left:50%;z-index:999;width:230px;margin-left:-127px;padding:10px;border:2px solid #0F83A0;opacity:.9;background-color:#A6CED8;background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tooltip:hover{border:0;}
.tooltip:hover span{visibility:visible}
.tooltip span:before,.tooltip span:after{content:"";position:absolute;z-index:1000;bottom:-7px;left:50%;margin-left:-8px;border-top:8px solid #A6CED8;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:0}
.tooltip span:before{border-top-color:#0F83A0;bottom:-10px}
#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

• Nếu bạn đã áp dụng thủ thuật Hiển thị trích đoạn cho bài đăng phổ biến dạng tooltip rồi thì bỏ qua bước này

Bước 2: Tạo một widget Javascript/Html mới sau đó dán đoạn code sau vào rồi lưu lại

<div id='recent-posts'>
    <script type='text/javaScript'>
        var rcp_numposts = 5;
        var rcp_snippet_length = 150;
        var rcp_info = 'yes';
        var rcp_comment = 'Comments';
        var rcp_disable = 'Comments off';
        function recent_posts(json) {
            eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('3 9=\'\';a=1d.n;y=a.N(\'?m=0\');9+=\'<v>\';x(3 i=0;i<T;i++){3 2=R.15.2[i];3 s=2.19.$t;b(\'z\'h 2){3 6=2.z.$t}d{b(\'B\'h 2){3 6=2.B.$t}d{3 6=""}};6=6.L(/<[^>]*>/g,"");b(6.F<G){3 o=6}d{6=6.c(0,G);3 w=6.O(" ");o=6.c(0,w)+"&#Q;"};x(3 j=0;j<2.p.F;j++){b(\'u$A\'h 2){3 q=2.u$A.$t+\' \'+J}d{q=K};b(2.p[j].C==\'M\'){3 f=2.p[j].n;b(y!=-1){f=f+\'?m=0\'}3 e=2.P.$t;b(\'D$E\'h 2){3 r=2.D$E.S}d{r="I://U.V.W/--X/Y/Z/11/12-13.14"}}};9+=\'<H>\';9+=\'<16 17="\'+s+\'" 18="\'+r+\'"/>\';9+=\'<l><a 1a="1b" n="\'+f+\'" C="1c">\'+s+\'<k>"\'+o+\'"</k></a></l>\';b(1e==\'1f\'){9+=\'<k>\'+e.c(8,10)+\'/\'+e.c(5,7)+\'/\'+e.c(0,4)+\' - \'+q+\'</k>\'};9+=\'<l 1g="1h:1i"></l></H>\'};9+=\'</v>\';1j.1k(\'1l-1m\').1n=9;',62,86,'||entry|var|||rcp_get_snippet|||dw||if|substring|else|rcp_postdate|rcp_posturl||in|||span|div||href|rcp_snippet|link|rcp_commentsNum|rcp_thumb|rcp_posttitle||thr|ul|space|for||content|total|summary|rel|media|thumbnail|length|rcp_snippet_length|li|http|rcp_comment|rcp_disable|replace|alternate|indexOf|lastIndexOf|published|133|json|url|rcp_numposts|lh3|ggpht|com|Z8SVBQZ4X8|TdDxPVMl_sI|AAAAAAAAAAA||jhAgjCpZtRQ|no|image|png|feed|img|alt|src|title|class|tooltip|nofollow|location|rcp_info|yes|style|clear|both|document|getElementById|recent|posts|innerHTML'.split('|'),0,{}))        };
        document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=' + rcp_numposts + '&callback=recent_posts\"><\/script>');
    </script>
</div>

*Đoạn code trên là của Duy Phạm và mình chỉ thêm một chút style cho title trích dẫn của bài đăng để tạo dạng tooltip thôi

Chúc bạn thành công!