Tạo Widget Liên Kết Bạn Bè với logo cho blogspot

Bài viết hướng dẫn các bạn tạo widget liên kết danh sách bạn bè có hình ảnh dạng giống như facebook với hình ảnh thumb và hiệu ứng đổ trên các logo. Để thực hiện các bạn có thể làm theo các bước bên dưới.

1.  Blogger - Bố cục - Thêm Widget 
2. Copy đoạn code bên dưới và dán vào
3. Nhấn save và xem kết quả

<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.shopthuthuat.com/p/hop-tac.html' target='_blank' title='Đặt liên kết với  Shop Thủ Thuật' style="background:#fff url(//i.imgur.com/3amhW6K.png) no-repeat center"><span>Đặt Liên Kết</span></a></li>
<li><a href='http://www.blogspotvn.com/' target='_blank' title='Chia sẻ template blogspot miễn phí, template blogger miễn phí' style="background:#fff url(//i.imgur.com/KUYSsOL.png) no-repeat center"><span>BlogSpotVN.com</span></a></li>
<li><a href='http://www.plusthuthuat.com/' target='_blank' title='Plus Thủ Thuật' style="background:#fff url(//i.imgur.com/8Bn7Q67.png) no-repeat center"><span>Plus Thủ Thuật</span></a></li>
<li><a href='http://www.phutungcb400.com/' target='_blank' title='phụ tùng đồ chơi xe cb400' style="background:#fff url(//i.imgur.com/UNxTzJa.png) no-repeat center"><span>Phụ tùng CB400</span></a></li>
<li><a href='http://www.anhbiavn.com/' target='_blank' title='Ảnh bìa chất' style="background:#fff url(//i.imgur.com/auwGfpz.png) no-repeat center"><span>Ảnh bìa chất</span></a></li>
<li><a href='http://www.caiwintainha.info/' target='_blank' title='Cài Win Tại Nhà' style="background:#fff url(//i.imgur.com/IkkGSJE.png) no-repeat center"><span>Cài Win Tại Nhà</span></a></li>
<li><a href='http://www.nhatthienkt.net/' target='_blank' title='nhatthienkt blog thủ thuật hay' style="background:#fff url(//i.imgur.com/sHNl1Ik.png) no-repeat center"><span>Nhatthienkt's Blog</span></a></li>
<li><a href="//www.thanhhuy-it.design " target="_blank" title="Thanh Huy IT" style="background:#fff url(//i.imgur.com/zHcGn5p.png) no-repeat center"><span>Thanh Huy IT</span></a></li>
</div>

Chúc thành công!