Cũng tối thứ 2 rồi. Rảnh rỗi nên tạo bài share cho ae đoạn code ngắn nhằm tạo một thanh bạn bè kiểu hover nhé, nhìn cũng nhẹ mắt không rối, kèm theo một thanh cuộn cho ae nhé. :))
Các Bước Thực Hiện

Bước 1: Tạo một widget HTML/Javascript mới.

Bước 2: Dán toàn bộ code này vào.

 Khung Liên Kết Bạn Bè Hover Đẹp Mắt.
<div class="widget-content">
<style>
#lkbb-widget::-webkit-scrollbar{width:4px}
#lkbb-widget::-webkit-scrollbar-thumb{background:#484848;border-radius:100px}
#lkbb-widget::-webkit-scrollbar-thumb:active{background:#777}
#lkbb-widget{padding:0;margin:0;list-style:none;max-height:270px;overflow:auto}
.lkbb-widget{margin:0;padding:0}
.lkbb-widget li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center;width:100%}
.lkbb-widget a{color:#555;font-weight:500;font-family:"Roboto",sans-serif;padding:8px;letter-spacing:-.35px;font-size:20px;text-transform:uppercase;transition:.3s;border-radius:9px 9px 0 0;background:#dfd09b;text-align:center;border-bottom:2px solid #ff0064}
.lkbb-widget a:hover{color:#069999!important;border:1px solid;border-radius: 12px;}
</style>
<div id="lkbb-widget">
<div class="lkbb-widget">
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='https://www.huyrocket.ml/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
</div></div></div>

Bước 3: Chỉnh sửa và lưu lại.


Lời Kết:
- Khung này nhìn chỉ có một cột nhưng nó sẽ rất tương thích với người dùng. Vậy ngại gì không thử nhỉ. Rất đẹp đấy bạn à. Nếu có ý kiến gì thì comment bên dưới nhé. Cảm ơn các bạn.
- - 30 bình luận
CHUYÊN MỤC

BÌNH LUẬN (30)

  1. CSS nhìn quen quen, chỉnh sửa lại phần display phải k nhỉ Huy ?

    Trả lờiXóa
    Trả lời
    1. Em lấy từ cái này sang cái kia rồi cái kia bổ sung cho cái kế. Cái nó ra vậy e share luôn. Vs lại e chú ý máy cái lkbb của các blog css gần giống nhau hết á :)

      Xóa
  2. klq cơ mak title widget background ko khớp vs màu blog, ko đẹp vs cả border ul li của rc cmt vàng vàng thô thô sao á. nên để no border đẹp hơn. ak mam cho ava ở rc cmt tròn chắc cũng đẹp hơn hjhj

    Trả lờiXóa
    Trả lời
    1. Thik máy cái cmt giống a. Cảm ơn a. Lần sau e sẽ khắc phục.

      Xóa
  3. ông có code khung nhãn 2 cột đẹp đẹp tý hok

    Trả lờiXóa
  4. Nếu 2 cột thì phải tự thêm vào đó ông huyitstar

    Trả lờiXóa
  5. 2 cột thì sửa width 100% chỗ thẻ li thành 50% thử xem sao :v

    Trả lờiXóa
  6. Cái đánh giá t ngoài trang chủ bên phải là gì đấy e

    Trả lờiXóa
    Trả lời
    1. À cái tiêu đề cho đẹp thôi a :)

      Xóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)