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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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.bacsiwindows.com" rel="nofollow" target="_blank" style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72YA5l58dMxrlbfp8amtShk4962wBqkxYdYqVC9HRJLnM9mA7__04cMPMo1m8F_mNekX7SUq1tehSvwi-f35_3b0XX8brtMdJ3vfQPbh0VKF27kR-G-UEm8cm2fRQy7QZvxVt9ggT6qEl/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>
</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.
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Giờ còn chờ cái Top Bình Luận Thôi =)))

      Trả lờiXóa
      Trả lời
      1. Top bình luận Khanh nó share rồi đấy.

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

        Xóa
      3. 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.

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

      Trả lờiXóa
    3. 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ờiXóa
      Trả lời
      1. Ok được rồi, cảm ơn ông nhớ.
        https://media.tenor.co/images/7df376668c8da3f37a16b93fe99b9b7f/tenor.gif

        Xóa
      2. Không có gì ông bạn :D

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

      Trả lờiXóa
    5. https://media.tenor.co/images/a5dfa570b5a10f6bd837a473243d5e5b/tenor.gif
      vỗ tay

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

      Trả lờiXóa
      Trả lời
      1. Hahaa se nào :v
        https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

        Xóa
      2. 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

        Xóa
    7. 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ờiXóa
      Trả lời
      1. Ặc mới vừa xong đã xin rồi :3
        Tí về send cho nhé.

        Xóa
      2. Ké, cho xin luôn CSS :v

        Xóa
      3. 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/

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

        Xóa
      5. Ừ. 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 :))

        Xóa
    8. Trả lời
      1. Top trong tuần thôi không phải toàn thời gian :v

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

      Trả lờiXóa
      Trả lời
      1. Người bình loạn nhiều nhất tuần

        Xóa
      2. 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

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

        Xóa
      4. 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

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

      Trả lờiXóa
      Trả lời
      1. True truee :)) đó là thống kê trong tuần thôi.

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

        Xóa
      3. Không vượt được comment boss Star Cường IT đâu :v

        Xóa
      4. 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

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

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

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

        Xóa
      8. plugin blogspot :v

        Xóa
    11. Đúng rồi đấy. Toàn spam comment.

      Trả lờiXóa
    12. Spam đâu? Thằng nào spam? Xoá hết !!

      Trả lờiXóa
    13. Anh có thể viết bài code đánh giá 5 sao hiện google cho blogspot được ko ạ

      Trả lờiXóa
      Trả lời
      1. OK để a ngâm cứu rồi viết sau.

        Xóa
      2. 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

        Xóa
      3. 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 đó :)

        Xóa
      4. Thế mới phải làm chứ

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

        Xóa
      6. 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

        Xóa
      7. Được rồi túm lại là khỏi làm :)

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

      Trả lờiXóa
    15. Blog ngày càng đẹp trai :v

      Trả lờiXóa
    16. Nhìn blog anh Trường đâu cũng đẹp -.-

      Trả lờiXóa
      Trả lời
      1. Lỗi tùm lum chưa fix đó em ạ @@

        Xóa
      2. Em thấy nó đẹp vê lù -.-

        Xóa
      3. Thiết kế đc như anh là 1 vấn đề -.- :))

        Xóa
      4. Thật sự thì anh cũng tầm thường thôi, không có gì quá khó cả chẳng qua em chưa học hết @@

        Xóa
    17. cái phần popular post của em nhấn vào thì nó không chuyển tới bài mà chỉ ở trang chủ :( em phải fix sao đây anh

      Trả lờiXóa