Tạo widget Liên Kết Bạn Bè 3 cột giống Facebook cho Blogspot

Hello xin chào tất cả các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Vừa giới thiệu đến các bạn theme mới giống Facebook cho blogspot, thì trong đó có widget liên kết bạn bè (hay gọi ngắn là bạn bè) cho blogspot và nó đã lọt vào tầm mắt của một số bạn :v nên hôm nay viết bài này chia sẻ code đó cho các bạn luôn, cũng khá đơn giản không có gì khó cả.
Với thiết kế 3 cột đẹp mắt tương tự Facebook, widget này rất phù hợp với những blog cá nhân, đơn giản.

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.

<style>
.subs{margin-top:10px;font-size:14px;color:#4b4f56}
.buttondk{background:#f6f7f9;border:1px solid #ced0d4;float:right;height:30px;width:auto;margin-right: 10px;color:#4b4f56!important;padding:5px;font-weight:500;border-radius:2px;margin-top:-5px}
#lienketbanbe{overflow:auto;padding:0;margin:0;list-style:none}
.buttondk:hover{background:#3a5795!important;color:#fff!important;text-decoration:none!important}
#lienketbanbe li{padding:0;line-height:normal;display:block;float:left;text-align:left;width:31.5%;margin:0 5px 5px 0;}
#lienketbanbe a{display: block; font: 400 14px Roboto!important; color: #fff; width: 100%; height: 90px; position: relative;}
#lienketbanbe a i{color:#0174DF;font-size:10px}
#lienketbanbe a span{background: linear-gradient(transparent, #333); display: block; text-align: center; position: absolute; bottom: 0; left: 0; font-size: 12px; padding: 5px; box-sizing: border-box;width:100%}
#lienketbanbe a:hover span {background:rgba(0,0,0,.35)}
</style>
<div id="lienketbanbe">
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
<li><a href="http://www.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSyTUxPd17u8nIGyotc5nI19ZeRg-gM5ztFxmy_XA3o7Y8QKoXiih125xSNjn9qFEkVLUyy3UbYfssPXBUHn3f0hrlKlVP1dzPDofN4nkdOIhVhO-AFD1Wh871rMifs4TtphO4WKF-w4a/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="Bác Sĩ Windows"><span>Bác Sĩ Windows</span></a></li>
</div>

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

Tổng kết

Ok đã hoàn thành xong mẫu widget liên kết đẹp và đơn giản.
Sắp tới mình sẽ ra mắt thêm widget liên kết dạng thanh chat giống trên facebook (hiện đã hoàn thành rồi nhưng chưa viết bài).
Code có thể lỗi đối với một số template, vì vậy bạn cần phải chỉnh sửa lại một chút CSS nếu như gặp lỗi nhé. Còn nếu không biết sửa thì bình luận bên dưới để mình giúp.
Chúc các bạn thành công.