Thay nền chuyển tiếp độc đáo cho khung bình luận

Bạn sở hữu cho mình một blog? Và thi thoảng đi bình luận dạo hoặc trả lời bình luận của bạn đọc bên blog mình. Khi đó, bạn có thấy khung viết bình luận của mình trông hơi ảm đạm không?
Chính vì thế mà hôm nay, mình xin hướng dẫn cho các bạn một thủ thuật nho nhỏ giúp bạn làm đẹp khung bình luận trong blog hơn. Thủ thuật này chỉ dùng toàn CSS nên gần như không ảnh hưởng đến tốc độ tải trang đâu nhé.
Thay nền chuyển tiếp độc đáo cho khung bình luận
Hình Minh Họa

Demo Thay Nền Chuyển Tiếp Khung Bình Luận

  • Chưa rê chuột:
Thay nền chuyển tiếp độc đáo cho khung bình luận
Hình Minh Họa

  • Khi rê chuột vào:
Thay nền chuyển tiếp độc đáo cho khung bình luận
Hình Minh Họa

Xem Demo

Cách thực hiện: 

Bước 1: Truy cập vào Quản Trị Blogger - Chủ đề - Chỉnh Sửa HTML.
Bước 2: Dán đoạn CSS dưới đây trước thẻ ]]></b:skin>
.comment-form iframe{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7VyN6uZrZ2Cx3SHD3rbWxc0H6HKMAXMkQnXAJk333IUNp2pmjBKgSzyGijfp3WWFznZ4K5NBQ5BjJb8A1r91ZhPXwIijcsRCxi_PEP9oF9nsNpexk9vqk6VY7ngTU0MDrHBn5oWF8JX6/s1600/Galaxy-Tab-S-Wallpaper-SamMobile_014.jpg) no-repeat; padding:0;width:618px;height:250px;border:1px solid #fff}
.comment-form iframe:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiZ8xF4pYEIFWe7r5mlyqNA32qRogOti3EKOndfSwc6cFHs5tVy73H9eEQvLkYr3rNlO496nk9IK2pfSiA9xtQKtzJmCBdWUu3rpK-IKcUQB01ms3ngddoobElSzC2VYbAtz2F-BaaQiiE/s1600/commenteditor+%25281%2529.png) no-repeat;}
#comment-editor{width:100%!important;opacity:0.7;transition: all 0.5s ease-in-out}
#comment-editor:hover{opacity:1}

  • Bạn có thể thay 2 link hình ảnh trên bằng hình ảnh bạn thích, hiệu ứng hình ảnh 2 độc đáo sẽ hiện ra khi bạn rê chuột vào khung bình luận nhé.
  • Lưu ý không phải template nào cũng làm phát được luôn, bạn có thể phải thay lại 2 thông số width và height sao cho phù hợp với blog bạn nhất nhé.
Bước 3: Lưu template lại và kiểm tra kết quả.

Lời Kết

Ok vậy là xong rồi đó. Chúc các bạn thành công nhé :)

22 nhận xét:

  1. Hay vậy, để test thử :))
    Cho anh 1 share nhé ^^

    Trả lờiXóa
    Trả lời
    1. Okie :) Tặng gì chứ share thì mình nhận luôn Tính ơi :v

      Xóa
    2. Úp Share Nào AE ^^

      Xóa
  2. tiếc là dùng cmt facebook <3

    Trả lờiXóa
    Trả lời
    1. Ông dùng 2 blog à?

      Xóa
    2. đâu. dùng có mỗi blog à

      Xóa
    3. Tưởng bác xài cả anhbiachat @@

      Xóa
    4. lúc trước admin Hiếu tạo giao cho a ng em, Dii Nô vs Star Bình. blog để lâu có mình em làm nản h nghỉ luôn chuyển qua LinkThuThuat

      Xóa
  3. Bài viết có ích 1 like :v

    Trả lờiXóa
  4. ; Bài viết hay quá đã share <3

    Trả lờiXóa
  5. đào một khen xíu hay lắm vợ :))))

    Trả lờiXóa

➥ Nhập địa chỉ Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
➥ Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
➥ Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.