Create a 3-column Friends Link widget like Facebook for Blogspot

Create a 3-column Friends Link widget like Facebook for Blogspot

Just introduced to the new theme like Facebook for Blogspot, there is a widget that links friends (or short friends) for Blogspot and it has caught the eye of some friends: v so today write an article This shares that code for you always, it's pretty simple, it's not difficult at all.
With a beautiful 3 column design similar to Facebook, this widget is very suitable for personal blogs, simple.

Create a 3-column Friends Link widget like Facebook for Blogspot

Create a new HTML / Javascript widget .
Paste all of this code.

<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.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
<li><a href="http://www.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/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.thugsofbd.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR84EZ-QHp9kzSYISXKdx1zcgr120oAdd4WwGmxubQZzYy6bPuQnmJwv8BDy1SstudpAjkjm3yo2z9qCe0arUtLkH-563b8SdJu0prxbHOK9rQfyWQcXzQu_UbJk3ZKE7F6gRvINyB-xHt/s100/Logo-Bac-Si-Windows+%25281%2529-min.png) no-repeat center" title="thugsofbd"><span>thugsofbd</span></a></li>
</div>

3. Edit & save.

summary

Ok, finished the beautiful and simple link widget template.

In the near future, I will launch more chat bar widgets like Facebook (currently completed but not yet written).

Code can be faulty for some templates, so you may need to revise your CSS a bit if you get an error. If you don't know how to fix it, leave a comment below to help me.

Good luck.

Source: bacsi windows

THÔNG TIN THANH TOÁN & DỊCH VỤ:

Tên tài khoản: Nguyễn Anh Tuấn
Số tài khoản: 0501000058467
Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
Hỗ trợ cài đặt: fb.com/kequaduongvodanh
Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form