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!
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>
Bước 3: Thêm CSS dưới đây trước thẻ ]]></b:skin>
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)
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 NguyenGia đang dùng, Js trượt lấy ở dạng nút Back To Top thôi)
Trong đó, các bạn lưu ý cho mình những chỗ sau:
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.
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 == "item"'>
<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 NguyenGia đ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'>$('.comments-publish').click(function(){$('html,body').animate({scrollTop:$("#comment-editor").offset().top},1000);});</script></div>
</b:if>
Trong đó, các bạn lưu ý cho mình những chỗ sau:
- <b:if cond='data:blog.pageType == "item"'>...</b:if>: chỉ cho phép hiển thị ở trang bài viết.
- #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.
- 1000: tốc độ trượt
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!
Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!
ConversionConversion EmoticonEmoticon