Blogger comment box widget

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/AVvXsEhNu05DtuuZZ_vEYepGynihEqHVlnFLa_5gxGq9OIp_QiMueeW33oTGyb7uieAnMidCRW9EOjQPK2pZ3KPIl9BsiXFwVKttS9lG14U4nCDPeZgimchlB-JJvrrAyfOvWCN4L2551-AujEs/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:

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