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

0 Share Share Share Send by Email Copy URL

Hello xin chào tất cả các bạn, chào mừng các bạn đã trở lại với Phố Nhỏ Blog
Hôm nay mình viết bài này chia sẻ widget liên kết bạn bè giống facebook cho các bạ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="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
<li><a href="https://www.ngoduykien.xyz/" rel="nofollow" target="_blank" style="background:#fff url(https://i.imgur.com/HW3Ttcf.jpg9-min.png) no-repeat center" title="Duy Kiên Blogger"><span>Duy Kiên Blogger</span></a></li>
</div>

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

Demo Click here

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.

...