Cách tạo khung Comment cho Blogger [ Blogspot]

BloggerGuide

Monday, November 16, 2015

0 comments

Khung comments là một trong những chức năng cần thiết cho blogger tương tác với người xem dễ quản lí giúp người đọc phản hồi của họ.

Cách tạo khung Comment cho Blogger [ Blogspot]

1 Đăng nhập vào Blogger Chọn mẫu (Template) > Chỉnh sửa HTML (Edit HTML).

Thêm đoạn code bên dưới vào trước thẻ]]></ b: skin>:

ul.w2b_recent_comments {
list-style: none;
margin: 0 auto;
padding: 0;
}

.w2b_recent_comments li {
display: block;
clear: both;
overflow: hidden;
list-style: none;
border-bottom: dashed 1px #ccc;
padding: 10px 0;
margin-left: -5px;
}

.w2b_recent_comments li a {
color: #222;
text-transform: uppercase;
font-style: 600;
}

.w2b_recent_comments li a:hover {
color: #F89C21;
}

.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;
margin-top: 2px;
position: relative;
overflow: hidden;
display: block;
}

.w2b_recent_comments li span {
margin-top: 4px;
margin: 0 10px 0 50px;
color: #111;
display: block;
font-size: 13px;
font-style: italic;
line-height: 1.4;
}

.w2b_recent_comments li:last-child {
border-bottom: 0 !important;
}

2. Thêm Widget HTML/Script vào vị trí bạn muốn, ở đây mình thêm trong SideBar:

<div>
<script type='text/javascript'>//<![CDATA[

var numComments  = 8, showAvatar  = true, avatarSize  = 40, roundAvatar = true, characters  = 55, defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;
//]]></script>
<script src='https://googledrive.com/host/0BxH71HJ3wF1QR0tKWHZXcVNPS2s/w2b-recent-comments-gravatar.JS' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=8' type='text/javascript'/>
</div>

Các bạn nhớ sau lưu đoạn js trên vào host của bạn nhé. Chúc các bạn thành công!

Tag : Blog Comments, Blog Design