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 được phát triển bởi mybloggertricks các bạn có thể xem bài viết gốc tại đây.
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ách tiến hành:
1- Đăng nhập (login) vào Blog
2- Tải mẫu về lưu lại sau đó mới tiến hành các bước bên dưới nha.
3- Vào Mẫu (Template)
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ờ! :)
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ách tiến hành:
1- Đăng nhập (login) vào Blog
2- Tải mẫu về lưu lại sau đó mới tiến hành các bước bên dưới nha.
3- Vào Mẫu (Template)
4- Chọn Chỉnh sử HTML (Edit HTML) => 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'/>6- Dán đoạn code CSS bên dưới vào trước thẻ ]]></b:skin>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
/*----- Comment Box by www.MybloggerTricks.com ----*/Trong đó:
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTM1bFFRE-RCOQyu3sPii_vwagXPYgJT9oVO6j9kzkeLZYnJuWuXCNle5CMtfFDnMf4AgBcWW8iqvD1ueBpkHe1QCU0p731Ng9sZn90HVfFD8O81II4zR09iuwSyacLgNfQvrG8ooD8w/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;
}
- 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)
<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>- 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.
</div>
</div>
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ó!. Và tất nhiên bạn có thể xem phiên bản tiếng anh tạimybloggertricks.com
