Tạo khung Comments cho Blog (kiểu 1)

Blogger có cung cấp cho người dùng tiện ích khung comments cho Blog nhưng với tiện ích mặc định này thì khung comments trông có vẻ hơi đơn điệu tính thẩm mỹ không cao. Với một đoạn code dưới đây, khung comments của bạn sẽ trông đẹp hơn.

Bạn đăng nhập vào Blog > chọn Thiết kế > thêm tiện ích HTML/Javacript rồi dán đoạn code này vào và thay đổi Link ảnh đại diện, địa chỉ blog của bạn, sau cùng bấm Lưu lại

CODE

 <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><br />
<br />
<div class="recent_comment_content" id="recent_comments_id"></div><br />
<script type="text/JavaScript"><!--
// Collect all things from json files
// Create by Tien Nguyen
// Copyright by vnblogspot.com
// Use the code without copyright agreement, you will be reported as spam

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] = "LINK ẢNH CỦA BẠN";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><br />
<script type="text/JavaScript" src="http://GIAPQB.BLOGSPOT.COM/feeds/comments/default?max-results=5&orderby=published&alt=json-in-script&callback=New_Comments_Information"><!--  --></script><br />
<br />
<script type="text/JavaScript"><!--
Install_New_Comments();
--></script><br />
;  

Bây giờ trên Blog của bạn đã có khung comments dễ thương rồi đó

Chúc bạn vui!!!

Browse More Articles

Tweet

Written by Anonymous

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.