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

Share:
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)

17 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

Bình luận