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/AVvXsEgDujbqqzjvXzlz0eD_Mepblz_UhwUJvZiHrepuPwmsh46-D7kORhwBrPAbISBPcZSGbPW3e-z9IQeLT3ScytOBzGgQM1gEklbyWHcUUS7UYdvUOEVbAuqQ-kY6TquJVTV80n904EEeI2o/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 !

Sưu tập từ Terocket.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..