TẠO WIDGET LIÊN KẾT BẠN BÈ 3 CỘT GIỐNG FACEBOOK CHO BLOGSPOT

CÁC BƯỚC THỰC HIỆN:

Bước 1: Vào Bố Cục 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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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/AVvXsEiGMzqMyxJrNTHh84pglx9inSke3CzMXZDt7Vp1P9iSc6YeataIKt-5ng4JYb0xMaeTMX4zfJLa3U0O4T7HBXsMiy7ORD2G3x-YJFFmXwuJscMDAXriD_8K8B2rbfD2bcRMhmJL7zOacWTo/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: www.bacsiwindow.com