Star Cường IT | Blog chia sẻ thủ thuật

Chào các bạn, bây giờ là 12h10p. Giờ mới là lúc tranh thủ để viết bài cho các bạn vì giờ này rảnh và yên tĩnh nữa. Thôi không dài dòng nữa, thủ thuật của chúng ta hôm nay sẽ là cách làm sao để chèn một nút mà khi click vào sẽ tự động chuyển xuống khung viết bình luận. Nó sẽ rất thuận tiện khi không phải cuộn chuột xuống tận đó. Giờ thì bắt tay vào làm nha!

Hình Minh Họa

Cách thực hiện

Bước 1: Truy cập Quản trị blogger   Chủ đề    Chỉnh sửa HTML
Bước 2: Nếu Template chưa có thư viện Fontawesome thì thêm code dưới trước thẻ </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Bước 3: Thêm CSS dưới đây trước thẻ ]]></b:skin>

.comments-publish a{color:#fff!important;line-height:5px;font-size:13px;margin-top:3px}
.comments-publish{float:right}
.comments-publish a{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:2px;background:linear-gradient(to left, #ff9800, #f44336);border:1px solid #ddd;border-radius:4px}
.comments-publish .fa{margin-right:5px}

Bước 4: Chèn đoạn code dưới vào nơi bạn muốn hiển thị nút viết bình luận:

• Style 1: Không có hiệu ứng trượt (không có Js, không ảnh hưởng tốc độ tải trang)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comments-publish'>
<a href='#comment-editor' onclick=''>
<i class='fa fa-plus'/> Viết bình luận
</a></div>
</b:if>

• Style 2: Có hiệu ứng trượt (chuyên nghiệp hơn nhưng có thể sẽ không áp dụng được cho các Template như blog StarCuongIT đang dùng, Js trượt lấy ở dạng nút Back To Top thôi)

<div class='comments-publish'>
<a href='#comment-editor' onclick=''>
<i class='fa fa-plus'/> Viết bình luận
</a><script type='text/javascript'>$(&#39;.comments-publish&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:$(&quot;#comment-editor&quot;).offset().top},1000);});</script></div>
</b:if>

Trong đó, các bạn lưu ý cho mình những chỗ sau:

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>...</b:if>: chỉ cho phép hiển thị ở trang bài viết.
2. #comment-editor: vị trí sẽ đi đến khi click nút đó, sẽ có 1 số bạn dùng #footer, #comment-form...tùy Template nhưng mình khuyên nên dùng #comment-editor vì mặc định có sẵn id này rồi.
3. 1000: tốc độ trượt

Bước 5: Lưu Template lại.

Lời Kết

Ok. Vậy là xong rồi đó. Chỉ 1 vài bước đơn giản, bạn đã có thể sở hữu cho mình 1 nút viết bình luận cực kì đơn giản và tiện lợi rồi.
Chúc các bạn thành công!