Wednesday, July 11, 2018

Thay Đổi Avatar Khi Bình Luận Nặc Danh

Hello mấy bạn, lâu quá rồi mấy bạn chưa có đọc bài nào do chính tay của mình viết phải không? Tại dạo gần đây bận quá nên lười viết bài ấy mà =)). Còn bây giờ thì xong rồi nha nên các bạn đừng bơ mình nữa :) mình sẽ cố gắn ra bài nhiều hơn cho các bạn tham khảo!

Thôi vào bài luôn nha! Do là hôm bữa phần css comments của mình nó bị lỗi hiển thị hình ảnh khi bình luận Nặc Danh (Anonymous) và mình cũng muốn thay hình ảnh khi cmt Nặc Danh. Mình đã tham khảo một số cách trên google nhưng tất cả đều không được mà thậm chí còn làm lỗi form comments. Vì vậy nên mình đã ngồi nghiên cứu và cuối cùng thì cũng thay được rồi nên mình quyết định share cho các bạn tham khảo ngay và luôn =))
Để thay đổi avatar khi bình luận Nặc Danh thì các bạn làm theo hướng dẫn bên dưới đây.

Đầu tiên thì như bao thủ thuật blogger khác, bạn truy cập vào trang quản trị blog ➝ Chủ Đề ➝ Chỉnh Sửa HTML

Các bạn tìm đến đoạn css comments của các bạn hoặc tìm thẳng đến:
comments .avatar-image-container img
Và thay đoạn css định dạng trong {} phía sau nó thành:
 [src="//img1.blogblog.com/img/blank.gif"] {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wVBTyD1C4z1gayZwHpyccI2_wadOcYWv6oJdrQwwQBPCPZkEzjIO74aK4tJuXjTFdjiahVKj-ofa_2sWU5OjakFzzSBLtPnMIRz7Vb5azWDWuXo4xzt9av4e4LljMFYsdReCJ-3_WmbI/s1600/21-44-52-globalspy-730x482-01.jpeg) !important;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wVBTyD1C4z1gayZwHpyccI2_wadOcYWv6oJdrQwwQBPCPZkEzjIO74aK4tJuXjTFdjiahVKj-ofa_2sWU5OjakFzzSBLtPnMIRz7Vb5azWDWuXo4xzt9av4e4LljMFYsdReCJ-3_WmbI/s1600/21-44-52-globalspy-730x482-01.jpeg);background-position: 0px 38px;background-size: 38px;}
 Chú ý: Thay link mình đã bôi đỏ thành link mà bạn muốn hiển thị khi bình luận Nặc Danh!
 Và còn nếu Blog các bạn chưa mở tính năng bình luận Nặc Danh thì có thể tham khảo bài của anh Phan Niệm Tại Đây
Thế thôi còn dưới đây là một số đoạn code mà mình tham khảo mà đã không thành công.
[src="http://img1.blogblog.com/img/blank.gif"] {content: url(LINK ẢNH BẠN ĐẶT);background-image: url('LINK ẢNH BẠN ĐẶT');background-size: cover;}
Đoạn này thì mình hoàn toàn không thể sử dụng được mà còn bị lỗi hình ảnh khi mình cmt bằng tài khoản google. Nhưng có khi là nó không thể khả dụng trong template của mình do temp mình là temp mặc định của Blogger chỉnh sửa lại còn temp các bạn thì có khi được đó. Hoặc là nó chỉ hiển thị trên một số trình duyệt nào đó thì mình không biết. Các bạn có thể test!

Còn trong quá trình mình tìm cách chỉnh thì mình khám phá ra cái này cũng khá hay đó là Mặc Định Avatar Cho Tất Cả Các Bình Luận trên blog của mình nên mình xin phép hướng dẫn cho các bạn luôn.
Các bạn làm theo mình như ở trên hướng dẫn cho đến bước 2.
Tiếp theo đến bước 3 bạn thay thế đoạn code ở trên thành:
{content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wVBTyD1C4z1gayZwHpyccI2_wadOcYWv6oJdrQwwQBPCPZkEzjIO74aK4tJuXjTFdjiahVKj-ofa_2sWU5OjakFzzSBLtPnMIRz7Vb5azWDWuXo4xzt9av4e4LljMFYsdReCJ-3_WmbI/s1600/21-44-52-globalspy-730x482-01.jpeg)}
Chỉ với một mẹo đơn giản như vậy thôi là các bạn đã có thể tạo một style avatar comments cực chất cho blog của mình rồi phải không? Nếu có thắc mắc hay cản trở nào khi thực hiện các bạn có thể Bình Luận bên dưới để mình giải đáp (12h).
  Chúc các bạn thành công.
 Chào tạm biệt và hẹn gặp lại các bạn trong bài tiếp theo!

20 comments:

  1. Replies
    1. Cám ơn Phú nha, lời ns của Phú là động lực của Phúc đó =))

      Delete
  2. Ờ hay. Đang cần để cập nhật cho blog :)

    ReplyDelete
    Replies
    1. Dạ, ahiuhiu. Cơ mà em thấy nó cx chưa hay ho và thu hút đọc giả cho lắm ạ

      Delete
  3. Test cmt css
    [pre css].sharepost li{width:19%;padding:0;list-style:none;}
    .sharepost li a{color:#fff;display:block;font-size: 13px;font-family:Roboto;font-weight:700;height:40px;line-height:40px;border-radius:3px;transition:all .3s ease;}
    .sharepost{overflow:hidden;text-align:center;}
    .sharepost li a:hover{opacity:0.8;color:#444;}
    .sharepost li .twitter{background-color:#55acee;}
    .sharepost li .facebook{background-color:#3b5998;}
    .sharepost li .gplus{background-color:#dd4b39;}
    .sharepost li .ltt{background-color:#FF4A00;}
    .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
    .sharepost li .ltt:hover{background: #9da387;border: 1px solid #f90}
    .sharepost li{float:left;margin-right:1.2%}
    .sharepost li:last-child{margin-right:0}
    .sharepost li .fa {float: left; padding: 13.4px; overflow: hidden; background: rgba(0, 0, 0, 0.14);}[/pre css]

    ReplyDelete
  4. [youtube]https://youtu.be/StYTUWtItuo[/youtube]

    ReplyDelete
  5. [pre html]
    Https://www.phucstar-it.tk
    [/pre html]

    ReplyDelete
  6. [pre html]
    Https://www.phucstar-it.tk
    [/pre html]

    ReplyDelete