Tạo khung liên kết bạn bè hover đẹp cho blogspot

Hầu như ở các Blogger hiện nay đều có một widget để đặt liên kết bạn bè với nhau. Hôm nay Star Cường IT chia sẻ đến các bạn cách 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='link liên kết' 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!