(Blopspot) Tạo recent comment đẹp và chuẩn

{Svip4u.InFo}
Nối tiếp bộ công cụ "Tạo recent posts widget" chắc chắn không thể thiếu công cụ "Tạo recent comments widget". Trong công cụ này, Vnblogspot đã thiết kế những tính năng rất "đỉnh", mà nổi bật nhất là lấy tiêu đề bài đăng cho mỗi comment. Chức năng này giúp blogspot có một bô widget recent comment ngang bằng về cấp độ với các nền tảng blog khác.

Một ví dụ về recent comments widget

   Code : 

<style type="text/css"><!--



<style type="text/css"><!--
.recent_comment_content{width:100%;}
.recent_comment_content img
{width:32px;height:32px;background-position: center;margin:7px;padding:
2px;border:#888 solid thin;}
.recent_comment_content_item {border-top:#888 thin dashed;}
.recent_comment_content_item table,
.recent_comment_content_item tr, .recent_comment_content_item td
{vertical-align: middle;}
.recent_comment_content_item table
{margin-bottom:2px;margin-top:3px;}
.recent_comment_content_item:hover
{background-color:#4A3829;}
.recent_comment_title a{font-size:12px;text-decoration:none;}
.recent_comment_info a{font-size:11px;text-decoration:none;}
.recent_comment_content_item:hover .recent_comment_title
a{color:#FFFFCC;}
.recent_comment_content_item:hover .recent_comment_info
a{color:#888;}
.recent_comment_content_item:hover .recent_comment_title
a:hover{color:#FFCC00;}
.recent_comment_content_item:hover .recent_comment_info
a:hover{text-decoration:underline;}
--></style>
<div class="recent_comment_content"
id="recent_comments_id"></div>
<script type="text/JavaScript"><!--
var New_Comments_Url = [];var New_Comments_Author = [];var
New_Comments_Thumbnail = [];var New_Comments_Snippet = [];var
New_Comments_Post_Title = [];var New_Comments_Index = 0;
function
New_Cmnt_P_Title(json){New_Comments_Post_Title[New_Comments_Index] =
json.entry.title.$t;New_Comments_Index++;}
function New_Comments_Information(json){var entry;var re =
/<\S[^>]*>/g;var blog_feed;var post_feed;var admin_id =
"admin";var admin_name="admin";if ("uri" in
json.feed.author[0]) admin_id=json.feed.author[0].uri.$t;if ("name"
in json.feed.author[0]) admin_name=json.feed.author[0].name.$t; for (var i = 0;
i < 5; i++){entry = json.feed.entry[i];New_Comments_Snippet[i] =
entry.title.$t.replace(re, "");for (var k = 0; k <
entry.link.length; k++){if (entry.link[k].rel == 'alternate'){New_Comments_Url[i]
= entry.link[k].href;} else if (entry.link[k].rel == 'self'){blog_feed =
entry.link[k].href;post_feed = blog_feed.substring(49, 68);blog_feed =
blog_feed.substring(0, 48);document.write("<script
type=\"text/JavaScript\" src=\"" + blog_feed +
"/posts/default/" + post_feed +
"?alt=json-in-script&callback=New_Cmnt_P_Title\"><\/script>");}}New_Comments_Author[i]
= entry.author[0].name.$t;if ("uri" in entry.author[0]){if ((admin_id
== "admin") && (admin_name == New_Comments_Author[i]) ||
(entry.author[0].uri.$t.search(admin_id) != -1)) New_Comments_Thumbnail[i] =
"http://1.bp.blogspot.com/-1CHH3O24lL8/TYQtmdHtXKI/AAAAAAAAAs0/uQTHRR2k7_c/s1600/recent_comment_avatar_admin.jpg";else
if (entry.author[0].uri.$t.search("blogger.com") !=
-1)New_Comments_Thumbnail[i] = "http://4.bp.blogspot.com/-WFhS3n3k5PQ/TYQoaLYxOVI/AAAAAAAAAsc/Zgl35BBvhq0/s1600/recent_comment_avatar_blogger";else
if (entry.author[0].uri.$t.search("openid.net") !=
-1)New_Comments_Thumbnail[i] =
"https://lh3.googleusercontent.com/_kck7-TEWM-M/TWpelOlYQLI/AAAAAAAAAkA/fvkwjD7u1dw/openid_avatar.jpg";else
if (entry.author[0].uri.$t.search("livejournal.com") !=
-1)New_Comments_Thumbnail[i] =
"https://lh5.googleusercontent.com/_kck7-TEWM-M/TWpelF9mBbI/AAAAAAAAAj4/o-B9qpp8ofg/livejournal_avatar.jpg";else
if (entry.author[0].uri.$t.search("wordpress.com") !=
-1)New_Comments_Thumbnail[i] =
"https://lh6.googleusercontent.com/_kck7-TEWM-M/TWpelrHxJRI/AAAAAAAAAkI/2nfARDO9a6E/wordpress_avatar.jpg";else
if (entry.author[0].uri.$t.search("typekey.com") !=
-1)New_Comments_Thumbnail[i] =
"https://lh3.googleusercontent.com/_kck7-TEWM-M/TWpelRrTbuI/AAAAAAAAAj8/JxIMFCJGz0U/typepad_avatar.jpg";else
if (entry.author[0].uri.$t.search("aol.com") !=
-1)New_Comments_Thumbnail[i] = "https://lh5.googleusercontent.com/_kck7-TEWM-M/TWpek0tHUGI/AAAAAAAAAj0/u5gjGgWkUVg/aol_avatar.jpg";
else New_Comments_Thumbnail[i] =
"http://1.bp.blogspot.com/-eLt9G40UfrA/TYQoxYyhOKI/AAAAAAAAAss/zFt4rNYUB58/s1600/comment_avatar_ano.jpg";}else{New_Comments_Thumbnail[i]
= "http://1.bp.blogspot.com/-eLt9G40UfrA/TYQoxYyhOKI/AAAAAAAAAss/zFt4rNYUB58/s1600/comment_avatar_ano.jpg";}}}
function Install_New_Comments(){var str_out =
"";for (var i = 0; i < 5; i++){str_out += '<div
class="recent_comment_content_item">';str_out += '<table
width="0%" border="0">';str_out += '<tr>';str_out
+= '<td>';str_out += '<a href="' + New_Comments_Url[i] + '"
title="Comment trong bài: ' + New_Comments_Post_Title[i] +
'">';str_out += '<img src="' + New_Comments_Thumbnail[i] +
'" width="32px" height="32px"/>';str_out +=
'</a>';str_out += '</td>';str_out += '<td>';str_out +=
'<div class="recent_comment_title">';str_out += '<a
href="' + New_Comments_Url[i] + '" title="Comment trong bài: ' +
New_Comments_Post_Title[i] + '">';str_out += New_Comments_Snippet[i];str_out
+= '</a>';str_out += '</div>';str_out += '<div
class="recent_comment_info">';str_out += '<a href="' +
New_Comments_Url[i] + '" title="Comment trong bài: ' +
New_Comments_Post_Title[i] + '">';str_out += 'By ' +
New_Comments_Author[i];str_out += '</a>';str_out +=
'</div>';str_out += '</td>';str_out += '</tr>';str_out +=
'</table>';str_out +=
'</div>';}document.getElementById('recent_comments_id').innerHTML =
str_out;}
--></script>
<script type="text/JavaScript" src="http://vuilenblog.co.cc/feeds/comments/default?max-results=5&orderby=published&alt=json-in-script&callback=New_Comments_Information"><!--  --></script>
<script type="text/JavaScript"><!--
Install_New_Comments();
--></script>

Bạn có thể điều chỉnh lại CSS cũng ảnh avatar cho phù hợp hơn với sở thích của mình. Còn nếu không, bạn cứ giữ nguyên, Vnblogspot đã tối ưu để nó có thể hiển thị tốt ở các điều kiện khác nhau.

Nguồn : Vnblogspot

Góp ý tác giả :Tác giả

Posted in: Blogspot