Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

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

Cập nhật: 25/04/2019 Bởi Duy... - A- A+

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 của mình.
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.

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

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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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://4.bp.blogspot.com/-SwT7JnILVGw/WgsYrJv0iFI/AAAAAAAAA3M/5Ua7nESJSf0sewJAlXNA9Iv2k_EYqQSxgCLcBGAs/s100/Logo-Bac-Si-Windows%2B%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.

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter