Tạo widget Liên Kết Bạn Bè 3 cột giống Facebook cho Blogspot
/ lúc / 80 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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 Bác Sĩ Windows.
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.

BÌNH LUẬN VỀ BÀI VIẾT (80)

avatar
Star Cường IT ­

Chất Chất Chất chất

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/a5dfa570b5a10f6bd837a473243d5e5b/tenor.gif

TRẢ LỜI
avatar
Star Cường IT ­

Giờ còn chờ cái Top Bình Luận Thôi =)))

TRẢ LỜI
avatar
Hưng Star - IT

đến sau nên cướp cmt 3

TRẢ LỜI
avatar
Star Cường IT ­

Sang Sờ ta cường mà cướp tiếp kìa :v

TRẢ LỜI
avatar
Phú Cường Blogger

Top bình luận Khanh nó share rồi đấy.

TRẢ LỜI
avatar
Star Cường IT ­

Oh lẹ thế cơ à, phải sang xem mới được. Vẫn hóng ver mới từ BSW :v

TRẢ LỜI
avatar
Phú Cường Blogger

Nút bình luận cùng hàng với thống kê bình luận k bấm đc ông ạ. Ông thay thành #comment-editor xem sao.

TRẢ LỜI
avatar
Trường Nguyễn

Không biết js của thằng top bình luận bị gì mà nó không hiện avatar, chưa fix nên tạm thời chưa viết bài về nó được.

TRẢ LỜI
avatar
Trường Nguyễn

Tổ quốc ghi công bạn!!

TRẢ LỜI
avatar
Trường Nguyễn

Ok được rồi, cảm ơn ông nhớ.
https://media.tenor.co/images/7df376668c8da3f37a16b93fe99b9b7f/tenor.gif

TRẢ LỜI
avatar
Niệm Style Blog

Cũng biết khai thác thủ thuật quá hả :v

TRẢ LỜI
avatar
Trường Nguyễn

Hả? Ý gì đây :v

TRẢ LỜI
avatar
Phú Cường Blogger

Không có gì ông bạn :D

TRẢ LỜI
avatar
Nguyễn Lương Duy Blog

Vỗ tay, vỗ tay bài rất có ích :)) cho anh 1 like :v

TRẢ LỜI
avatar
Nguyễn Đức Huy

https://media.tenor.co/images/a5dfa570b5a10f6bd837a473243d5e5b/tenor.gif
vỗ tay

TRẢ LỜI
avatar
Star Bình

đẹp tuyệt

TRẢ LỜI
avatar
SHuyTarUT

Hóng anh Phú Cường làm ai ngờ A.Trường làm trước rồi :)

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn mặc dù không có nút like :v

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Trường Nguyễn

Hahaa se nào :v
https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Star Bình

https://i.imgur.com/ePmW9pf.png

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

TRẢ LỜI
avatar
Phú Cường Blogger

Phải sửa là hóng a share chứ vì a làm lúc thay temp v3 rồi mà. Nhưng blog mới a k chuyên thủ thuật, hứng lên mới viết nên e cứ qua BSW là có tut :D

TRẢ LỜI
avatar
Phú Cường Blogger

Trường cho t xin cái css phần top cmt tuần nhé sau sang la liếm blog ông duy pham để ông ý xem, can tội k share cho ae :))

TRẢ LỜI
avatar
Trường Nguyễn

Ặc mới vừa xong đã xin rồi :3
Tí về send cho nhé.

TRẢ LỜI
avatar
Star Cường IT ­

Ké, cho xin luôn CSS :v

TRẢ LỜI
avatar
Star Cường IT ­

À mà có rồi :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

thì ra là đây. bác Duy Phạm cũng lấy đây tưởng tự làm ai ngờ lấy ở đây mà ổng ko share. https://sneeit.com/top-commentators-widget-for-blogger-blogspot-with-avatars/

TRẢ LỜI
avatar
Star Bình

Oh tôi cmt top 2 kìa :v

TRẢ LỜI
avatar
Star Bình

CSS đây http://notepad.vn/share/iqqprhn99

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cho hỏi ai top 1 cmt thế :v mắt tui bị mù ko thấy cái vàng chói ấy :v

TRẢ LỜI
avatar
Star Bình

Trọng Khanh Ngu...

TRẢ LỜI
avatar
Star Bình

https://i.imgur.com/ePmW9pf.png

TRẢ LỜI
avatar
Trường Nguyễn

Ông gì ích kỉ gớm, có tí code xin cũng không cho :))

TRẢ LỜI
avatar
Trường Nguyễn

Top trong tuần thôi không phải toàn thời gian :v

TRẢ LỜI
avatar
Trường Nguyễn

Cho triệu like :))))

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

sau 3 chấm là gì ?

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

(y)

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cái tên BÌNH LUẬN NHIỀU NHẤT TUẦN thấy sao sao.

TRẢ LỜI
avatar
Star Cường IT ­

Cái Top Bình Luận chính là động lực để mấy thánh comment đấy :v

TRẢ LỜI
avatar
Trường Nguyễn

True truee :)) đó là thống kê trong tuần thôi.

TRẢ LỜI
avatar
Trường Nguyễn

Thành viên tích cực. Thấy sao!?

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

Người bình loạn nhiều nhất tuần

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cái này là chất kích thích đẻ cmt blog BSW ngày càng tăng :3

TRẢ LỜI
avatar
Star Cường IT ­

Không vượt được comment boss Star Cường IT đâu :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

xem đi :v top cmt đi :v ai kia :v cơ mak ước gì mỗi tuần có 1 món quà cho top 1 ng cmt

TRẢ LỜI
avatar
Trường Nguyễn

Mỗi tuần một món quà tiền đâu, ai tài trợ đi :)))

TRẢ LỜI
avatar
Trường Nguyễn

Xét theo toàn thời gian thì đúng voại :))

TRẢ LỜI
avatar
Phú Cường Blogger

À lúc t xin là khi đó t có luôn rồi ông :)) Ông cấm chuột phải nhưng chưa cấm Ctrl+U nên t bấm ra khi đó rồi hihi.

TRẢ LỜI
avatar
Trường Nguyễn

Dài quá nhìn kì

TRẢ LỜI
avatar
Phú Cường Blogger

Ừ. A cũng biết web này đầu tiên vụ top commentors đấy, lâu lắm rồi. A còn pm hỏi thẳng admin chỉnh 7 ngày cơ nhưng đoạn đó admin k rep, chỉ rep đoạn chào hỏi phía trước thôi :))

TRẢ LỜI
avatar
Phú Cường Blogger

T đề nghị cho ai k có trên top kia đc thẻ 50k viettel nhé :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

plugin blogspot :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

chứ bình luận nhiều nhất tuần khác người bình luận nhiều nhất tuần :V

TRẢ LỜI
avatar
Trường Nguyễn

Nhiều hơn một chữ rồi còn gì :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

cơ mà bình luận nhiều nhất là dạng như cái bình luận đó nó có nhiều nhất chứ không phải ng đâu :v

TRẢ LỜI
avatar
Niệm Style Blog

Vãi toàn spam ko nên lên top comment :v

TRẢ LỜI
avatar
Star Cường IT ­

Đúng rồi đấy. Toàn spam comment.

TRẢ LỜI
avatar
Trường Nguyễn

Spam đâu? Thằng nào spam? Xoá hết !!

TRẢ LỜI
avatar
Trường Nguyễn

Tào lao

TRẢ LỜI
avatar
Hoàng Quốc Khánh

Anh có thể viết bài code đánh giá 5 sao hiện google cho blogspot được ko ạ

TRẢ LỜI
avatar
Trường Nguyễn

OK để a ngâm cứu rồi viết sau.

TRẢ LỜI
avatar
Hoàng Quốc Khánh

Với lại anh có thể thêm chữ Admin vào comment quản trị như blog của anh cho em được ko, email anh là gì để em add vào

TRẢ LỜI
avatar
Trường Nguyễn

truongdz2069 nhé.

TRẢ LỜI
avatar
Star Cường IT ­

Cái này Chỉ dành cho WP, còn blogspot chỉ có giả thôi, Giả mà google mà biết thì .... tự hiểu chuyện gì sau đó :)

TRẢ LỜI
avatar
Niệm Style Blog

Trong Khanh Nguyễn đấy! :v

TRẢ LỜI
avatar
Hoàng Quốc Khánh

Thế mới phải làm chứ

TRẢ LỜI
avatar
Trường Nguyễn

Mấy comment xì pam xoá hết rồi nhé.

TRẢ LỜI
avatar
Trường Nguyễn

Ai bảo chỉ dành cho wp
Blogspot làm được đấy.

TRẢ LỜI
avatar
Quách Nhị

Hay quá đi

TRẢ LỜI
avatar
Star Cường IT ­

Làm được thì chỉ là giả sao thôi nhé, chứ không có thật thế đâu. Đọc kĩ từng chữ tui nói nhé! còn cái plugin đánh giá sao chỉ có thật ở trên WP.

TRẢ LỜI
avatar
Phú Cường Blogger

Chắc là bạn ý muốn nói đến cái này đó ông. Nhưng là fake cho đẹp thôi, đánh giá đúng thì chưa có thật hay sao ấy.
http://www.blogthuthuatwin10.com/2017/11/huong-dan-trien-khai-du-lieu-co-cau-truc-cho-the-rich-vao-blogspot.html

TRẢ LỜI
avatar
Trường Nguyễn

Giả thì giả nhưng vẫn làm được là được rồi. Mà thiết nghĩ cái đấy không cần thiết.

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Star Cường IT ­

"Giả thì giả những mà vẫn làm là được rồi" :))), Cái đánh giá 5 sao này làm nổi bật khi tìm kiếm trên google, làm chuyên nghiệp hơn, nổi bật hơn và đương nhiên là kiếm được nhiều lượt click vào hơn. Thật thì không nói nhưng fake thì tỷ lệ bị GG phạt là rất cao.

TRẢ LỜI
avatar
Trường Nguyễn

Được rồi túm lại là khỏi làm :)

TRẢ LỜI
avatar
Duy Ripper

Blog ngày càng đẹp trai :v

TRẢ LỜI
avatar
Trường Nguyễn

Quãi c blog đẹp trai :))))

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.