[HAIPHONG TP TOI YEU]

 

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)


Blogger comment box widget

Posted: 17 Mar 2014 04:09 AM PDT

Bài viết này mình sẽ chia sẻ một thủ thuật với phần comment của Blogger, đó là tạo một widget cho phép ẩn/hiện các comment và khung comment. Các bạn có thể xem hình bên.

Sau đây là các bước thực hiện:




Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML (các bạn nên sao lưu mẫu của mình trước khi thực hiện thủ thuật).
Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$(document).ready(function(){

$(".toggle_container").hide();

$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});

});
</script>

Xóa đoạn màu xanh nếu blog của bạn đã có thư viện jQuery

Bước 3: Chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/*----- Comment box - www.đoàntrịnh.vn ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIWHkj6osGWwVo3ziNROFunNTU9bbhYO_s1lgQHlwHdgKh7MWWRComeF_njboGemcEYJXBhqP-MTHhJ-opOQPFs6AeczqZYWlhyg8dGytUGGN2RObZtXyhEF0v-t41GGKC6sPhBxqpF8/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

- Có thể thay đổi độ rộng 518px cho phù hợp với blog của bạn
- Có thể tùy chỉnh style của widget tùy ý nếu bạn hiểu biết về code

Bước 4: Tìm dòng <b:includable id='comment-form' var='post'> và chèn đoạn code sau vào bên dưới nó:

<h3 class='trigger'>Click Here To add Comment</h3> 
<div class='toggle_container'>
<div class='block'>

Bạn có thể sửa dòng chữ màu xanh theo ý thích của mình

Bước 5: Tiếp tục tìm </b:includable> và chèn phía trên nó đoạn code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.đoàntrịnh.vn' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>

Để việc thực hiện thủ thuật được chính xác, các bạn hãy xem hình sau:



Nếu có bất cứ thắc mắc gì hãy để lại comment bên dưới.

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

Xem thêm: http://www.đoàntrịnh.vn/2014/03/blogger-comment-box-widget.html

Bài viết liên quan

Related Posts Plugin for WordPress, Blogger...