TẠO KHUNG LIÊN KẾT BẠN BÈ HOVER ĐẸP CHO BLOGSPOT

Chào các bạn, hôm nay là 20-11 - Ngày Nhà Giáo Việt Nam, mình xin chúc các thầy cô giáo, các bạn học sinh luôn luôn có sức khỏe và cố gắng trong học tập. Và mặc dù chả liên quan gì đến bài viết hôm nay cả, rảnh nên làm cái bài viết cho các bạn ^^.

Tạo Khung Liên Kết Bạn Bè Hover Đẹp Cho Blogspot

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.

<div class="widget-content">
<style>
#lkbb-widget::-webkit-scrollbar{width:5px}
#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:310px;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:50%}
.lkbb-widget a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 5px 5px 0; padding: 7px 15px; font: 400 17px Roboto!important; -webkit-transition: .3s; letter-spacing: -.35px; border-radius: 0; -moz-transition: .3s; -o-transition: .3s; color: #777!important; border: 1px solid #484848;border-radius: 40px}
.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='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/lienket' target='_blank' title='Đặt liên kết'>Đặt Liên Kết</a></li>
<li><a href='//www.starcuongit.com/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 & lưu lại.

LỜI KẾT

Bên trên là cách tạo khung liên kết bạn bè có hover đơn giản cho các bạn, đối với mình thì khá là chất =)) Còn bạn ? bạn thấy như thế nào ? Hãy cho mình biết bên dưới phần comment nhé! Những comment của bạn là nguồn động lực để mình cố gắng viết tiếp những thủ thuật, bài hay cho các bạn xem.

Chúc các bạn thành công!