Làm thanh trượt cho blog khi có nhiều nhận xét

đăng nhập vào Blog > chọn Thiết kế > Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào hộp đó dòng lệnh

#comments-block.

 trong đó:

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;

}

Thay vào đoạn code trên:

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px; 
height: 400px; 
width:480px; 
overflow:auto; 

} 

Bạn có thể thay đổi kích thước của khung ở Width (chiều ngang), height (chiều dài) để phù hợp với Blog của mình và bấm Lưu mẫu

Giờ đây, trên blog của bạn sẽ có thanh trượt ở phần comments rất tiện lợi

By: Anonymous On 9:24 AM

Continue Reading

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!!!

By: Anonymous On 9:20 AM

Continue Reading

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

Blogspot có cung cấp cho người dùng tiện ích Rencent comments (các comments gần đây) nhưng với tiện ích này thì khung comments trông có vẻ đơn điệu, tính thẩm mỹ không cao. Hôm nay, tôi chia sẻ thêm một cách để bạn có một khung Recent comments khá đẹp.

 
Thủ thuật này khá đơn giả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 tất cả các đoạn code phía dưới vào.

CODE:

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/comment.js"></script>
<script type="text/javascript" src="http://www.giapqb.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Bây giờ, bạn chỉ cần thay đổi địa chỉ Blog của mình vào dòng lệnh màu đỏ và bấm Lưu lại là xong

Quá đơn giản phải không các bạn? Thử xem!!!

By: Anonymous On 9:16 AM

Continue Reading

Trang trí cho ô nhận xét (Comments).

Ở dưới mỗi bài viết đều có một ô comment để khách tham quan gởi lại những thắc mắc, những lời góp ý, những lời tâm sự...

Mặc định các ô comment này rất đơn điệu và để thu hút hơn sự chú ý của khách tham quan các bạn có thể trang trí ô này thêm sinh động hơn, đẹp hơn...
(Thủ thuật này chỉ thích hợp với các giao diện được tải trên mạng về, còn đối với giao diện sẳn có của Blogspot thì không được như ý lắm...là khi comment thì "nó" mới xuất hiện)

Hôm nay dunghennessy chia sẻ với các bạn thủ thuật này.

Mời các bạn xem hình minh hoạ phía dưới

 

VÀ

 Thủ thuật này cũng khá đơn giản, đầu tiên bạn đăng nhập vào Blog > Chọn Mẫu > Chọn Chỉnh sửa HTML.

Một bảng mã nguồn HTML hiện ra, bạn đánh dấu chọn vào ô MỞ RỘNG MẪU TIỆN ÍCH nằm phía trên góc trái của bảng mã nguồn, tiếp tục bạn bấm cặp phím Ctrl+F để mở hộp tìm kiếm ở phía dưới (nếu bạn dùng trình duyệt Google Chrome thì hộp tìm kiếm này sẽ nằm phía trên) và gõ vào hộp này dòng lệnh ]]></b:skin> và Enter thì bạn sẽ thấy dòng lệnh này xuất hiện ở bảng mã nguồn và được đánh dấu highlight

Bây giờ bạn copy đoạn code phía dưới và dán trên dòng lệnh ]]></b:skin>

CODE:

#mbt-form iframe{

background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5QTLk0Icj1AEBMKgts5v9lqNkA2evgtbMGlzmpkJTJj_V7Ulv4yOberJj8RO_okSJzgGHuBqcUD8z6v9j8tBq_QOeoKXQv7y4j-_SJjuCATZ2eJRifC0RH6PWBwBviwH43RWnHLO1pyX1/s1600/picture.jpg) repeat-x;

border:1px solid #ddd;

-moz-border-radius:2px;

-webkit-border-radius:2px;

box-shadow: 2px 2px 2px #CCCCCC;

padding:2px;

font:normal 12pt &quot;ms sans serif&quot;, Arial;

color:#2F97FF;

width:636px; height:250px !important;

}

#mbt-form a{
color:#2F97FF;
}

 

Bạn thay đổi các dòng màu đỏ (link ảnh nền) và các dòng màu xanh, trong đó color là màu chữ của ô comments, width (chiều rộng) và height (chiều cao) của ô comment.
 
Tiếp tục bạn gõ vào hộp tìm kiếm dòng lệnh <div class='comment-form'> và enter, bạn sẽ thấy dòng lệnh này xuất hiện ở bảng mã nguồn và được đánh dấu highlight

Bạn thay thế dòng lệnh <div class='comment-form'> bằng dòng lệnh <div id='mbt-form'>
Đối với giao diện sẳn có của Blogspot (không phải giao diện tải trên mạng về thì sẽ có 2 dòng lệnh <div class='comment-form'>, vì vậy bạn phải thay 2 lần cho dòng lệnh này và khi xong bạn comment thử nó sẽ xuất hiện).
 
Cuối cùng bấm Lưu mẫu để hoàn tất.

Bạn trở lại vào Blog xem thành quả nha.

* Mở rộng thêm:
Bạn nên Resize ảnh nền cho đúng kích thước của ô comments ở code phía trên (Width và height màu xanh) thì sẽ đẹp hơn.
Chúc các bạn vui!!!

By: Anonymous On 8:50 AM

Continue Reading

Trang trí cho khung thông báo nhận xét.

Ở cuối mỗi bài đăng, các bạn sẽ thấy có ô comments để các "quý khách" ghé thăm bình luận, trao đổi hoặc kết bạn...

Trên ô comment, các bạn có thể tạo một thông báo hoặc ghi chú nào đó đến khách tham quan và để trang trí cho bảng thông báo đẹp hơn các bạn cần đến thủ thuật nhỏ sau.

 

Đầu tiên bạn cần phải tạo thông báo cho comments (xem TẠI ĐÂY).

Khi có bảng thông báo rồi, bạn bắt đầu trang trí cho "nó".

Bạn đăng nhập vào Blog > Chọn Mẫu > Chỉnh sửa HTML (xem hình).

Một bảng mã nguồn Blog hiện ra, bạn bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào hộp tìm kiếm dòng lệnh ]]></b:skin>

Bây giờ bạn copy toàn bộ code phía dưới dán trên dòng lệnh ]]></b:skin> này.

 

CODE:

.comment-form p {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjabHnurzWege1egzxAIy6csTe02bYWQWbpziSYhOqSZ3rPQoOZx_tK9xA2ovGrm7kalkxd9Ie2QHeDflxi9aNmOl29vCWroP7OhCikmSHOSyBVFuKG145Q55bNdr3_-YrgpsBzaaSXCQQ/s1600/0055.gif);
background-position: 1em 3em;
background-repeat: no-repeat;
background-color:#151B8D;
width: 124%;
border: #00FFFF dashed thin;
padding: 1em;
padding-left: 110px;
color: #ffffff;
}

Bạn có thể thay đổi dòng lệnh màu đỏ (đây là link ảnh ở góc trái) và các dòng lệnh màu xanh để phù hợp với blog của mình, trong đó:

* background-color: màu nền của ô thông báo

* border: màu của đường viền

* color: màu chữ thông báo   

Cuối cùng bấm Lưu lại rồi trở lại Blog xem kết quả nha.

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

By: Anonymous On 8:46 AM

Continue Reading