Thứ Tư, 28 tháng 5, 2014

Bài 2: Tạo hộp comments trong blogspot.





Tạo hộp comments trong blogspot.

Khi mới chuyển bài vở từ Multiply qua Blogspot, tôi thấy thật là bất tiện khi bạn bè vào chia sẻ bài viết với mình, mà mình không biết, muốn biết thì phải click kiểm tra từng bài hoặc phải click vào thiết kế để ra trang tổng quan của từng trang blog để mà xem.. thật là phiền.

Phải vào trang chủ:




Phải vào trang Guest Book:




Thế là tôi đã qua trang blog của anh Từ Thức và Bongnguoilangle để học cách đưa các cụm thuật ngữ về để lập hộp comments cho những trang blogs của mình.

Hôm nay, có nhiều bạn bè từ Yahoo cũng phải di tản qua blogspot này, có lẽ cũng còn nhiều bỡ ngỡ, nên tôi viết lại bài hướng dẫn này cho các bạn.

Muốn tạo hộp comments trong trang blog của mình cách bạn làm theo cách như sau:

1. Click vào thiết kế -> trang tổng quan -> click vào bố cục sẽ ra trang thiết kế của trang blog.



2. Click vào Thêm tiện ích -> chọn HTML/Javascript -> Sẽ hiện 1 hộp với 2 ô:
Tiêu đề: Comments
Hộp trống: (dùng để bỏ đoạn code dưới đây vào ô này)


<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: 15px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 8,
    showAvatar     = true,
    avatarSize     = 40,
    roundAvatar    = true,
    characters     = 50,
    showMorelink    = false,
    moreLinktext    = "Xem thêm..»",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = false;
//]]>
</script>
<script type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://ttm123.blogspot.co.uk/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=8"></script><br>





3.  Click lưu. Trở về trang bố cục, kéo hộp hội thoại này vào vị trí mà mình muốn đặt hộp comment này.

4. Sau đó click vào "Lưu sắp xếp" rồi trở về trang blog của mình.


* Lưu ý:

1. Những con số dưới đây chúng ta có thể tùy chỉnh theo ý muốn của mình. Tuy nhiên, con số của "numComments" phải bằng với con số ở dòng cuối cùng của đoạn code này.



numComments     = 8,
showAvatar     = true,
avatarSize     = 40,
roundAvatar    = true,
characters     = 50,


2. Thay thế đường link cuối cùng (màu đỏ) ở cụm code bằng đường link của từng trang blog của bạn.


Như vậy là ta đã có 1 hộp comments xinh xắn ở trong từng trang blog của mình rồi đó.

Một lần nữa cám ơn anh Từ Thức và Bongnguoilang lẽ.
Chúc các bạn mình vui với blogspot nha.

TTM
PP. 27/12/2012.


·     


Bài viết cùng chủ đề:
=====================================


=






2 nhận xét: