Tạo widget liên kết bạn bè đơn giản cho Blogspot

Mục lục bài viết

Việc tạo widget liên kết bạn bè trên Blogspot không chỉ giúp blog của bạn trông chuyên nghiệp hơn mà còn giúp tăng cường liên kết giữa các blog, hỗ trợ SEO và tạo sự kết nối trong cộng đồng blogger. Dưới đây là hướng dẫn chi tiết để bạn có thể tự tạo một widget liên kết bạn bè đơn giản cho Blogspot.

Widget liên kết bạn bè là gì?

Widget liên kết bạn bè là một tiện ích nhỏ được hiển thị trên thanh bên (sidebar) của blog, thường hiển thị các liên kết đến các blog hoặc website bạn bè mà bạn muốn giới thiệu.

Lợi ích khi sử dụng widget liên kết bạn bè

Tăng cường SEO nội bộ và ngoại vi: Việc đặt liên kết bạn bè có thể giúp cải thiện thứ hạng SEO.
Xây dựng cộng đồng: Tạo ra sự kết nối giữa các blogger trong cùng lĩnh vực.
Giao diện chuyên nghiệp: Blog trông hấp dẫn và thân thiện hơn.

Cách tạo widget liên kết bạn bè đơn giản

Bước 1: Đăng nhập vào Blogspot
Truy cập blogger.com và đăng nhập vào tài khoản Google của bạn.
Bước 2: Truy cập Giao Diện Quản Lý
Chọn blog mà bạn muốn thêm widget.
Chọn Bố cục từ menu bên trái.
Bước 3: Thêm tiện ích (widget)
Nhấp vào Thêm tiện ích tại khu vực bạn muốn hiển thị widget (thường là thanh bên).
Tìm và chọn HTML/Javascript.
Bước 4: Thêm Mã HTML
Dưới đây là đoạn mã HTML cơ bản để tạo widget liên kết bạn bè (thay đổi các liên kết và tên blog cho phù hợp):

<div class="ahi-blog-list-container">
  <ul id="aHiBlogList">
    <li>
      <div class="web-icon">
        <img alt="icon" src="https://www.google.com/s2/favicons?domain=https://www.anhtrainang.com" />
      </div>
      <div class="web-title">
        <a href="https://www.anhtrainang.com/" target="_blank"
          title="Anh Trai Nắng Blog - Thủ thuật blogspot - Blogger template - chia sẻ tổng hợp.">
          Anh Trai Nắng Blog
        </a>
      </div>
    </li>
    <li>
      <div class="web-icon">
        <img alt="icon" src="https://www.google.com/s2/favicons?domain=http://www.blogspotvn.net" />
      </div>
      <div class="web-title">
        <a href="http://www.blogspotvn.net/" target="_blank" title="Blogspot VN - Chia Sẻ Thủ Thuật Blogger - Internet">
          Blogspot VN
        </a>
      </div>
    </li>
    <li>
      <div class="web-icon">
        <img alt="icon" src="https://www.google.com/s2/favicons?domain=https://www.dantocking.com" />
      </div>
      <div class="web-title">
        <a href="https://www.dantocking.com/" target="_blank"
          title="Kho sách cũ quý hiếm - Ký sự phía bên kia không gian chiều thứ tư">
          Dân tộc KING
        </a>
      </div>
    </li>
    <li>
      <div class="web-icon">
        <img alt="icon" src="https://www.google.com/s2/favicons?domain=https://kinhnghiem-affiliate.marketing" />
      </div>
      <div class="web-title">
        <a href="https://kinhnghiem-affiliate.marketing/" target="_blank" title="Kinh Nghiệm Affiliate Marketing 2024">
          Kinh Nghiệm Affiliate
        </a>
      </div>
    </li>
    <li>
      <div class="web-icon">
        <img alt="icon" src="https://www.google.com/s2/favicons?domain=https://www.thanhtruongblog.com" />
      </div>
      <div class="web-title">
        <a href="https://www.thanhtruongblog.com/" target="_blank"
          title="SEO website, blogspot/blogger, tài liệu học tập">
          Thành Trương Blog
        </a>
      </div>
    </li>
    <li>
      <div class="web-title">
        <a href="/2024/04/dat-lien-ket-ban-be-cung-blogger-anh-hi.html" title="Đặt liên kết bạn bè cùng Blogger anh Hí">
          Gửi yêu cầu đặt liên kết
        </a>
      </div>
    </li>
  </ul>
</div>
<style>
  .ahi-blog-list-container ul {
    padding: 0;
    max-height: 320px;
    overflow: auto;
  }
  #aHiBlogList li {
    margin-bottom: 5px;
    height: 25px;
    margin: 0;
    padding: 0;
    line-height: normal;
    display: flex;
    float: left;
    text-align: center;
    width: 100%
  }

  #aHiBlogList .web-icon {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    float: left;
  }

  #aHiBlogList img {
    height: 16px;
    width: 16px;
  }

  #aHiBlogList .web-title {
    height: 25px;
    float: left;
  }
</style>

Bước 5: Lưu và kiểm tra
Nhấp Lưu để hoàn tất.
Truy cập blog để kiểm tra widget đã hiển thị đúng chưa.

Kết luận

Việc tạo widget liên kết bạn bè trên Blogspot rất đơn giản nhưng mang lại hiệu quả cao trong việc xây dựng mạng lưới liên kết và cải thiện SEO. Hãy bắt tay vào thực hiện và chia sẻ kết quả của bạn nhé!