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!
Tạo nút viết bình luận đơn giản cho blogspot
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!

CHIA SẺ BÀI VIẾT

- - 23 bình luận
CHUYÊN MỤC

BÌNH LUẬN (23)

  1. Không nói được nhưng blog sẽ ngưng hoạt động một thời khá dài đấy.

    Trả lờiXóa
  2. Anh Cường ơi viết bài về phần này đi :D
    Demo: https://i.imgur.com/2FVwHze.png
    Mong anh reply sớm ^^

    Trả lờiXóa
    Trả lời
    1. Có 2 Cường lận :( K rõ đề cập đến Cường nào luôn :3

      Xóa
    2. Nhìn chủ thớt đăng bài là biết ngay mà :3

      Xóa
    3. Oke thế để hôm nào rảnh rảnh a ngồi viết cho. Mỗi tội viết ra thì dễ nhưng áp dụng thì tùy template vì có temp dùng js auto read more thì thumbnail sẽ k có code riêng. Nhưng e đang dùng temp starcuong thì sẽ làm đc.

      Xóa
    4. temp starcuong thì sẽ hiện ra đc mà :D

      Xóa
  3. Ad ơi, cho em 1 code bình luận mới nhất cho Blogspot đi ạ. Em đang cần

    Trả lờiXóa
    Trả lời
    1. Bạn cần code Bình Luận Mới cho widget hay cho page ?

      Xóa
  4. Wiget ạ, em có tìm trên mạng nhưng link file JS đều die hết nên nó ko chạy. Ad cho em 1 cái code với ạ

    Trả lờiXóa
    Trả lời
    1. Code đây :
      https://anotepad.com/note/read/m93wek

      Xóa
    2. Trên này là code Bình luận mới của blog Star Cường IT nên có thể không được với các blog khác :))

      Xóa
    3. Em đã làm được ạ, cảm ơn ad nhiều. Tiện em muốn nhờ ad cái này luôn: Blog của em là: https://olympictoanhoc.blogspot.com/, không hiểu sao phía bên phải nó lại thừa ra 1 khoảng trống, làm sao dể bỏ vậy ạ

      Xóa
    4. Bên phải thừa chổ nào chỉ, bạn nói rõ hơn hoặc chụp ảnh sang mình xem được không?

      Xóa
    5. Ảnh đây ạ: https://2.bp.blogspot.com/-Bg9ChLw0u9c/WfhgU782SmI/AAAAAAAABck/pg54zd_INW4Yusqdd9BjVjpWyoySQ29MQCLcBGAs/s320/l%25E1%25BB%2597i.bmp

      Xóa
    6. Trong hình thì mình chả thấy nó trống chổ nào cả, với lại hình hơi nhỏ nên xem không rõ lắm.

      Xóa
    7. Ad vào blog em trượt sang phải sẽ thấy ạ. Có mà

      Xóa
    8. Bên mình không trượt sang trái được, chắc là do trình duyệt của bạn hay do máy của bạn rồi.

      Xóa
    9. Vậy ạ, vậy có lẽ do trình duyệt của em. Em cảm ơn, ad nhiệt tình quá!

      Xóa