Share code widget liên kết bạn bè cho Blogspot

Liên kết bạn bè với blog của mình có rất nhiều lợi ích như:

  • Tăng trafic, giúp trang của bạn có nhiều người biết đến hơn và có PageRank cao hơn trên Google tìm kiếm.
  • Các trang liên kết với nhau để mọi người có thể dễ dàng tìm kiếm, trao đổi và học hỏi thêm nhiều thông tin, tài liệu,...
  • Các admin của các blog có thể liên hệ tương tác qua lại, giúp đỡ lẫn nhau trong quá trình làm blog.

Mình có mở đặt liên kết với bạn nào muốn liên kết, hãy để lại comment bên dưới nhé

Để tạo Widget các bạn làm theo các bước như sau:

Bước 1

Tại giao diện chính của Blogger, chúng ta vào "Bố cục" >> đi đến phần cần hiển thị liên kết bạn bè

Ví dụ ở đây mình sẽ đặt phía bên menu bên phải blog

Bước 2

Tại đây, chúng ta click "Thêm tiện ích"

Tiếp theo chúng ta chọn tiện ích "HTML/JavaScript"

Bước 3

Các bạn copy đoạn code dưới đây

 <style>
#blogFriends::-webkit-scrollbar{width:5px}
#blogFriends::-webkit-scrollbar-thumb{background:#484848;border-radius:100px}
#blogFriends::-webkit-scrollbar-thumb:active{background:#777}
#blogFriends{padding:0;margin:0;list-style:none;max-height:310px;overflow:auto}

  .blogFriends{margin:0;padding:0}

  .blogFriends li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center;width:50%}

  .blogFriends a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 8px 8px 0; padding: 7px 15px; font: 400 13px 'Noto Sans', sans-serif; -webkit-transition: .3s; letter-spacing: -.35px; -moz-transition: .3s; -o-transition: .3s; color: inherit; border: 1px solid rgb(230,230,230);border-radius: 2px}

  .blogFriends a:hover{border-color: var(--link-bg);}

</style>
<div id="blogFriends">
<div class="blogFriends">
<li><a title="Tiêu đề" href="Url liên kết bạn bè" target="_blank">Tên blog/website bb</a></li>
<!-- Các bạn muốn thêm bao nhiêu bạn bè thì thêm bấy nhiêu thẻ vào à đc nhá -->
<!-- Ví dụ -->
<li><a title='Bạn bè 2' href='link bạn bè 2' target='_blank'>Tên blog/website bb 2</a></li>
<li><a title='Bạn bè 3' href='link bạn bè 3' target='_blank'>Tên blog/website bb 3</a></li>

 </div></div>

Các bạn vào trình chỉnh sửa code hoặc notepad gì đó, sửa phần Tiêu đề bằng Tiêu đề của web/blog của bb bạn, Url liên kết bạn bè là đường dẫn url hay link đến web/blog của bb, thay Tên blog/website bb bằng tên web.blog của bb

Bước 4

Các bạn copy đoạn code đã chỉnh sửa ở bước 3 và dán vào phần "Nội dung" của tiện ích nhé, đừng quên đặt tiêu đề cho tiện ích, vd ở đây mình để là "Liên kết bạn bè"

Bước 5

Nhấn "Lưu" để save lại tiện ích

Ok, vậy là chúng mình đã hướng dẫn cho các bạn cách thêm phần widget bạn bè rồi đó, đừng quên để lại ý kiến commet bên dưới nhé, tks mọi người.