TẠO HỘP BÌNH LUẬN MỚI NHẤT (RECENT COMMENTS)

Người đăng: buonkhongem on Thứ Bảy, 26 tháng 1, 2013

 Là người "quản trị" Blog chắc hẳn các bạn đều muốn các khách tham quan khi ghé thăm đều để lại những lời nhắn động viên, trao đổi chia s, tâm sự kết bạn tại hộp comment....???
Với thủ thuật này, các commet của khách tham quan được xếp theo thứ tự mới nhất nằm trên hàng đầu tiên kèm theo ảnh avatar của khách (số lượng comments được hiển thị do bạn tuỳ chọn tối đa là 200 comment) và được chứa đựng trong một hộp gọn gàng có thanh trượt để bạn có thể kéo xuống phía dưới đđc hết các comments mà không chiếm khoảng không gian của Blog.
Mời bạn bấm vào th"Xem th" phía dưới để trải nghiệm trước thủ thuật này.


Thủ thuật này cũng khá đơn giản, bạn đăng nhập vào Blog > Chọn Bố cục > Chọn thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTMl/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó copy tất cđoạn code phía dưới dán vào.

 <center><div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;"><span style="color: red; font-size: large;">Bình luận mới nhất của các bạn</div></span>
<div style="border: 5px solid orange; color: cyan; height: 450px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 280px;">
<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  = 200,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script src="https://sites.google.com/site/dunghennessyjs/comment2.js" type="text/javascript"></script>
<script src="http://www.dunghennessy.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=200" type="text/javascript"></script>
</div>
</center>



Bây giờ bạn thay đổi các dòng lệnh màu đ, trong đó:
* Background: màu nền của tiêu đề phía trên
* Color: màu chữ tiêu đề.
* Bình luận mới nhất của các bạn: bạn có thể thay đổi chữ nào mà bạn muốn.
* Orange: màu của khung hộp, có thể thay red (đỏ), black (đen), white (trắng), Pink (hồng), yellow (vàng), green (xanh)....
* height: chiều cao của hộp.
* Width: chiều rộng của hộp 
 
Thay đổi dòng lệnh màu xanh, trong đó:
* Color: Mã màu của comment
* Font-size: kích thước chữ comment
* AvatarSize: kích thước của Avatar
* Characters: số lượng từ của comment
* http://www.dunghennessy.blogspot.com bằng địa chtrang Blog của bạn
 
Thay đổi dòng lệnh màu vàng đây là số comments được hiển thị trong hộp (2 số này phải bằng nhau).
Cuối cùng bấm Lưu lại rồi trở lại blog xem kết quả nha.

Bạn có thể tham khảo cách làm KIỂU 2 TẠI ĐÂY.
Chúc các bạn thành công!!!
      


More about

TRANG TRÍ Ô NHẬN XÉT (COMMENT)

Người đăng: buonkhongem on Thứ Hai, 21 tháng 1, 2013

 Ở 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




 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>

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvq8uy6t1ikvKIblbfmqsqv-Y7Vn2rni-jDhQxPoUJiafTRENHNFeDlkQYkdKpWrSu4YBHuMMpH88dVsPNIHKqp-0GCXp-yHz4JgJrC8jR4parpstYZOXBtX3jtQvGgSdiMBMIh3Zp3zTF/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'> 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.

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


Nguồn: trollvl 
More about