Ẩn hiện khung comment với Jquery cho blogger

Khung Comment blogspot là phần có rất ít thủ thuật để điều chỉnh theo ý bạn. Tiện ích hôm nay namkna giới thiệu sẽ tích hợp slideToggle jQuery và hiệu ứng accordion vào box comment. Tiện ích hiển thị tốt với các trình duyệt hỗ trợ thư viện JavaScript. Hướng dẫn hôm nay sẽ giúp bạn tạo ra một nút mở rộng và thu gọn đẹp cho box comment, box comment sẽ hiển thị bằng cách trượt xuống thuận lợi khi được kích hoạt và giấu nó khi nhấp vào một lần nữa. Tiện ích sẽ sử dụng plusin jquery đơn giản để cho phép một nút để hiện/ẩn tất cả các phần div giữ ô nhận xét. Tiện ích này dduwwocj namkna cải tiến từ mybloggertricks

Cách thức làm việccủa thủ thuật:

Các bạn có thể xem minh họa: Click here to view Demo
Tất cả thủ thuật này không làm ẩn các phần div trong chế độ hoạt động nhưng hiển thị nội dung khi nhấp vào. Bạn có thể xem một bản demo ở hình ảnh bên dưới.

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Download Template Full Version.

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed)
4- Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets) => Xem vdeo:

5- Dán đọn code bên dưới vào ngay sau thẻ<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(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>

6- Dán đoạn code CSS bên dưới vào trước thẻ ]]></b:skin>

/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPMrqcGx_Q0ahJnfimXZ4Wb53tipzBaSlLuYg5JaWQg1hjWE6VwA_a8wR51wSaD1niovEvQpzjlSAJVeKjCTCFuO-Xau2hOyzJzaP2uqqoa_l8SUf-4VKifp1hXxk9KK0PXFF2ch6I8E/s1600-d/comment-boxbg-namkna.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;
}

Trong đó:

width: 518px là độ rộng của khung chứa dòng chữ "Click here to add Comment"
font-family:Arial; Là Font chữ "Click here to add Comment"
font-size: 1.4em; Là cỡchữ "Click here to add Comment"
color:#A1A1A1; Là màu chữ "Click here to add Comment"
Bạn hãy tải file ảnh comment-boxbg-namkna.png về và Upload lên blog rồi thay vào đoạn code CSS trên để sử dụng lâu dài nha. Bạn có thẻ tải về Tại đây (hoặc tại đây)

7- Tìm kiếm đoạn code sau:

<b:includable id='comment-form' var='post'>

- Thêm vào ngay dưới nó đoạn code sau:

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

- bạn có thể thay thế dòng chũ "Click here to add Comment" theo ý muốn của bạn, ví dụ như:"Bấm vào đây để viết commnet" ,...

8- tìm thẻ đóng </b:includable> tương ứng ngay sau thẻ mở ở bước 7. Và thêm ngay bên trên thẻ </b:includable> đoạn code bên dưới:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

- Các bạn có thể xem hình ảnh bên dưới để thấy rõ hơn cách thực hiện.

9- Lưu mẫu lại và vào blog của bạn để xem blog của bạn gọn gàng hoàn toàn khác so với trước đây. Khách truy cập của bạn sẽ nhận xét ngay bây giờ! :)

Cập nhật cho các bạn sử dụng mẫu threaded-comment-form của blogger?

- Với các blogger sử dụng mẫu threaded-comment-form của blogger sẽ gặp phải một lỗi nhỏ đó là tiện ích nút bấm Click here to add comment sẽ biến mất khi có một nhận xét được đăng. Để khắc phục hiện tượng này các bạn thực hiện thêm 3 bước (từ 10 đến 12) như bên dưới.
10- Tìm kiếm đoạn code sau:

<b:includable id='threaded-comment-form' var='post'>

- Thêm vào ngay dưới nó đoạn code sau:

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

- bạn có thể thay thế dòng chũ "Click here to add Comment" theo ý muốn của bạn, ví dụ như:"Bấm vào đây để viết commnet" ,...

11- tìm thẻ đóng </b:includable> tương ứng ngay sau thẻ mở ở bước 10. Và thêm ngay bên trên thẻ </b:includable> đoạn code bên dưới:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

- Các bạn có thể xem hình ảnh bên dưới để thấy rõ hơn cách thực hiện.

12- Lưu mẫu lại.

Làm thế nào để ẩn hiện cả phàn nhận xét và box comment?

Để ẩn hiện cả phần nhận xét và box comment của blogger các bạn hãy làm theo các bước sau:

1- Thực hiện từ bước 1 đến bước 6 ở trên (Bỏ qua các bước từ bước 7 đến bước 12 nha). Sau đó tiếp tục thực hiện như các bước còn lại sau đây:

6a- Tìm kiếm đoạn code sau:

<b:includable id='comment_picker' var='post'>

- Thêm vào ngay dưới nó đoạn code sau:

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

- bạn có thể thay thế dòng chũ "Click here to add Comment" theo ý muốn của bạn, ví dụ như:"Bấm vào đây để viết commnet" ,...

6b- tìm thẻ đóng </b:includable> tương ứng ngay sau thẻ mở ở bước 6a. Và thêm ngay bên trên thẻ </b:includable> đoạn code bên dưới:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

6c- Lưu mẫu lại và xem thành quả nha.

Nếu cần giúp đỡ?

Nếu bạn cần bất kỳ sự giúp đỡ nào hãy cho tôi biết. Tôi chỉ hy vọng thủ thuật mới này hữu ích cho hầu hết các bạn. Tôi rất thích nghe những suy nghĩ của bạn trên thủ thuật mới này. Đừng quên chia sẻ nó!.

Theo: Namkna.blogspot.com