Tạo nút viết bình luận style thú vị cho blogspot

Are you sure?

You want to turn off ads.

Dạo này bận, tính nghỉ blog nhưng rồi lại thấy nếu bỏ bê 2 tháng thì sợ mọi người quên mình mất nên thi thoảng mình sẽ cho ra 1 bài mới và những cái nhỏ nhặt nhất cũng làm nên 1 bài thủ thuật được, vì vậy hôm nay mình sẽ viết bài chia sẻ cho các bạn tạo nút viết bình luận style thú vị cho blogspot nha. Nghe thú vị có vẻ ngầu thôi nhưng thực ra nó đều áp dụng từ CSS mà các bạn đã biết hết rồi ý.

Tạo nút viết bình luận style thú vị cho blogspot

Nút viết bình luận style thú vị cho blogspot

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Dán đoạn CSS sau trước thẻ
]]></b:skin>

a.commentbtn { background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); background: -moz-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); background: -ms-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); background: -o-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); background: gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none !important; box-shadow: 1px 1px 10px grey; text-shadow: 0 1px 0 white; border: 1px solid gainsboro; padding-bottom: 13px; color:black !important; text-decoration: none; display: inline-block; padding: 10px 23px; border-radius: 3px; position: fixed; z-index: 9999; bottom: -3px; right: 3px; -webkit-transition: all .400s; -moz-transition: all .400s; -ms-transition: all .400s; -o-transition: all .400s; transition: all .400s; } a.commentbtn:hover { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); border-color: #999; color: #333; } a.commentbtn:active { border-color: darkRed; color: black; }
Bước 3: Tiếp tục dán đoạn hiển thị nút viết bình luận này trước
</body>

<b:if cond='data:blog.pageType == "item"'> <a class="commentbtn" href="#comment-editor">Bình luận</a> </b:if>
Bước 4: Lưu Template lại và xem kết quả.

Lời kết

Vậy là mình vừa chia sẻ cho các bạn cách tạo nút viết bình luận mới luôn chạy dọc theo blog rồi đó. CSS trên đều là loại cơ bản nên muốn tùy chỉnh gì theo ý bạn như màu sắc hay vị trí, hình dáng gì đó thì bạn hoàn toàn có thể tùy chỉnh sao cho hợp template nhất nha. Nếu có gì khó khăn hãy để lại bình luận bên dưới cho mình nhé (blog mình thì nút bình luận nhanh nằm ngay góc phải dưới blog ấy)
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    31 nhận xét:

    1. Ko cho cái demo xem thử hả ông?

      Trả lờiXóa
      Trả lời
      1. Nó ở blog t rồi đó ông, đoạn lời kết t cũng ghi rồi đó. Bận nên k có time edit code cho lên codepen ô ạ.

        Xóa
    2. Dạo này bận. Câu này nghe quen qá luôn r đó a :)

      Trả lờiXóa
      Trả lời
      1. Thì đúng là dạo này a bận còn gì. Sau 2 tháng nữa mới bớt.

        Xóa
    3. theme này nhìn phê cần quá

      Trả lờiXóa
    4. Hay đó bạn, mà giao diện blog bạn đẹp quá, mình rất thích!

      Trả lờiXóa
      Trả lời
      1. Thanks bạn nha, mình cũng chỉ dùng giao diện trên mạng thôi, giao diện mình tự làm thì dùng lâu chán rồi nên mình k dùng :D

        Xóa
      2. ahihi - mình cũng vậy :v

        Xóa
    5. anh xem hộ em sao em làm rồi mà không thấy hiển thị hả anh

      Trả lờiXóa
    6. đậy ạ anh
      https://supershareit.blogspot.com/

      Trả lờiXóa
      Trả lời
      1. Ủa, nút kia a cho thẻ điều kiện chỉ hiển thị ở trang bài viết thôi e ơi :3 blog e còn k click vào xem bài viết đc thì sao nó hiện đc, nó vẫn đang ở trang chủ hay bất kì trang nào k phải trang bài viết thì nút này bị ẩn đi nhé.

        Xóa
    7. anh xem hộ em em đã tạo cái mới và sủa rồi nhưng vẫn ko đc : https://teamvietit.blogspot.com
      Thanks you

      Trả lờiXóa
      Trả lời
      1. Nó hiện rồi nhưng e k bấm đc là đúng rồi, bài viết của e k có khung để bình luận e ơi thì sao nó kéo xuống khung bình luận đc.

        Xóa
    8. Trả lời
      1. Tức là giờ code e dùng bên a chuẩn rồi, giờ còn lại là e phải bật hệ thống bình luận của blogspot lên thôi. Có thể là trong cài đặt e ẩn đi rồi hoặc cũng do trong template có css ẩn khung đó đi rồi.

        Xóa
    9. Em bật hệ thống bình luận r
      Còn về phần code css thì em chịu

      Trả lờiXóa
      Trả lời
      1. Ý a bảo là code của a chạy và ổn hết rồi. Giờ e chỉ cần bật hệ thống bình luận của blog lên là dùng đc chứ a có bảo e là phải edit lại code đâu :3

        Xóa
    10. nhưng em bật r mà
      có phải là mk vô chỗ cài đặt xong chuyển sang phần nhận xét có chỗ chọn xong em ấn được nhúng phải hông a

      Trả lờiXóa
      Trả lời
      1. Ừ, ấn nhúng thì nó nhúng từng form vào phần bài đăng, rồi trong mỗi bài e phải check xem ô tùy chọn để để hiện khung nhận xét nữa chưa? Nếu tất cả hiện rồi thì check đến template xem code có đoạn nào ẩn khung comment đi k?

        Xóa
    11. anh ơi nó vẫn ko hiện thị nó chỉ có chữ bình luận ở góc phải bên dưới màn hình thôi a

      Trả lờiXóa
      Trả lời
      1. Hình như e chưa hiểu về thủ thuật này a viết rồi :3 Thì đúng là bài này nó sẽ chỉ làm cái nút bình luận ở góc phải chứ k phải là khi e ấn vào chữ bình luận đó nó sẽ hiện ra khung bình luận cho e. E phải cho hiện thị khung bình luận của blogspot có sẵn thì khi người dùng click vào chữ bình luận ở góc phải nó sẽ tự động nhảy xuống mà k cần phải kéo lăn chuột xuống e hiểu ý a k?

        Xóa

    Nhận bài viết mới