Tạo Khung Liên Kết Bạn Bè Hover Đẹp Mắt.

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.