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
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
Nào ta cùng bắt tay thực hiện nào
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
*Đ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<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>
Chúc các bạn thành công, nếu bạn có thắc mắc hay làm không được bạn có thể để lại câu hỏi, mình sẽ giúp các bạn
Thienhieu(nguồn : Trollvl.com)
0 nhận xét:
Đăng nhận xét