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 Hoàng Anh Z

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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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/AVvXsEgoMe-y-TmTbQ1fkz6GzFQeEGS_Bt1jcfsqjJ1G0RggsgUOQeBWdL36Oaj3sYwXf7lone79iE93OooCTt3EO4mjz9F-psFDg5QjPZy3s2_45wV9vYvYcYcG-dD2odiYwgCq0rSmxRxvfUA/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.

Nguồn : Bác Sĩ Windows

Lời Kết

Nếu thấy hay hãy để lại một bình luận cũng như theo dõi blog của mình để đón nhận những bài viết tiếp theo nhé