Chào mọi người, trong bài viết này mình sẽ chia sẽ cho mọi người đoạn code hiển thị dạng liên kết để mọi người tiếp thị sản phẩm một dạng AFFILIATE.
 
Code thủ thuật này hoàn toàn đơn giản và có giao diện đẹp, và mình đã tối ưu seo để phù hợp với những người thích tối ưu website/blog tốt nhất.

Làm thế nào để thêm bảng tiếp thị liên kết có hình ảnh vào website/blog.

Để thêm bảng sản phẩm liên kết này vào website/blog, chúng ta làm như sau.

Bước 1: Đi vào bảng điều khiển blogger hoặc mỡ bài đăng bất kỳ nào trên blog.
 
Bước 2: Chuyển sang chế độ HTML và sao chép mã HTML ở bên dưới.
  <table class="Affiliate-product-table">
        <thead>
            <tr>
                <th>Image</th>
                <th>Product</th>
                <th>Feature</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="Affiliate-image">
                    <div class="p_tag">TOP Pick </div>  
                    <a href="#" rel="nofollow" target="_blank">
                        <img src="https://dlcdnwebimgs.asus.com/gain/418d0f3b-aeef-44a0-81e0-4a68cc46e9f0/" class="p-img"></a>
                    </td>
                    <td class="Affiliate-product">
                        <a href="#" rel="nofollow" target="_blank">
                            <div class="p_title">
                            Asus ROG Zephyrus G14
                          </div></a>
                    </td>
                    <td class="Affiliate-feature">
                        It delivers the goods in gaming but also delivers 11 hours of battery life
                      </td>
                    <td class="Affiliate-btn">
                        <a href="#" rel="nofollow" target="_blank">Buy Now
                        </a>
                    </td>
                </tr>
          
                <tr>
                    <td class="Affiliate-image">
                        <div class="p_tag"> Trending </div>
                        <a href="#" rel="nofollow" target="_blank">
                            <img src="https://res-1.cloudinary.com/grover/image/upload/e_trim/c_limit,f_auto,fl_png8.lossy,h_1280,q_auto,w_1280/v1623749139/bq18ot4ooj4h9g3ciuki.png" class="p-img"></a>
                        </td>
                        <td class="Affiliate-product">
                            <a href="#" rel="nofollow" target="_blank">
                                <div class="p_title"> Razer Blade 14 
                              </div> </a>
                        </td>
                        <td class="Affiliate-feature">
                        Razer Blade 14 offers powerful components and excellent performance.
                      </td>
                        <td class="Affiliate-btn">
                            <a href="#" rel="nofollow" target="_blank">Buy Now </a>
                        </td>
                    </tr>
          
          
                </tbody>		
            </table>

Bước 3: Bây giờ bạn hãy thay đổi tên sản phẩm, mô tả, url hình ảnh, url liên kết trong bảng.

Bước 4: Sao chép đoạn mã CSS này vào trong blog để hiển thị bố cục cho bàng tiếp thị của bạn.
<style>
    /* Affiliate Product Box */
    .Affiliate-product-table {
      margin: 30px 0;
    }
    .Affiliate-product-table thead {
      background: #424242;
      color: #fff;
    }
    .Affiliate-product-table,
    .Affiliate-product-table td,
    .Affiliate-product-table th {
      border: none;
      box-sizing: border-box;
    }
    .Affiliate-product-table thead th {
      font-weight: 300;
      font-size: 17px;
      padding: 10px;
      margin: 0;
    }
    .Affiliate-product-table tr {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center;
      transition: 0.3s;
    }
    .Affiliate-product-table tbody tr:hover {
      transform: scale(1.02);
      transition: 0.3s;
      box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
    }
    .Affiliate-product-table tbody tr {
      border: 2px solid #e1e1e1;
      margin-bottom: 5px;
    }
    .Affiliate-product-table tr td:first-child,
    .Affiliate-product-table tr th:first-child {
      width: 25%;
    }
    .Affiliate-product-table tr td:nth-child(2),
    .Affiliate-product-table tr th:nth-child(2) {
      width: 25%;
    }
    .Affiliate-product-table tr td:nth-child(3),
    .Affiliate-product-table tr th:nth-child(3) {
      width: 30%;
    }
    .Affiliate-product-table tr td:last-child,
    .Affiliate-product-table tr th:last-child {
      width: 20%;
    }
    .Affiliate-product-table .Affiliate-image {
      position: relative;
    }
    .Affiliate-product-table .p_tag {
      position: absolute;
      left: -10px;
      top: 0;
      background: #5898ff;
      padding: 5px 5px;
      color: #fff;
      font-size: 12px;
      text-transform: uppercase;
    }
    .Affiliate-product-table .p_tag::after {
      content: ' ';
      display: block;
      position: absolute;
      left: -10px;
      bottom: -7px;
      border-color: rgba(0, 0, 0, 0) #133091 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      border-style: inset solid inset inset;
      border-width: 0 10px 7px;
    }
    
    .Affiliate-product-table .p-img {
      width: 90%;
      max-height: 140px;
      margin: 0 auto;
      display: block;
      height: auto;
      object-fit: contain;
    }
    .Affiliate-product-table .Affiliate-product .p_title {
      font-weight: 600;
      font-size: 17px;
      line-height: 1.2;
      text-decoration: none;
      color: #4b77b7;
    }
    .Affiliate-product-table .Affiliate-btn a {
      background: #ef651e;
      text-transform: capitalize;
      padding: 10px;
      border-radius: 5px;
      color: #fff;
      font-size: 15px;
      display: block;
      text-align: center;
      transition: 0.3s;
    }
    .Affiliate-product-table .Affiliate-btn a:hover {
      background: #000;
      transition: 0.3s;
    }
    .Affiliate-product-table .Affiliate-feature {
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 10;
      -webkit-box-orient: vertical;
    }
    @media only screen and (max-width: 768px) {
      .Affiliate-product-table .p_tag {
        position: absolute;
        left: -20px;
      }
      .Affiliate-product-table tbody tr {
        padding: 10px;
      }
      .Affiliate-product-table tr td:first-child {
        width: 40%;
      }
      .Affiliate-product-table tr td:nth-child(2) {
        width: 60%;
      }
      .Affiliate-product-table tr td:nth-child(3),
      .Affiliate-product-table tr th:nth-child(3) {
        width: 100%;
      }
      .Affiliate-product-table tr td:last-child,
      .Affiliate-product-table tr th:last-child {
        width: 100%;
      }
      .Affiliate-product-table .Affiliate-btn a {
        margin-top: 20px;
      }
      .Affiliate-product-table tr th:nth-child(2) {
        width: 100%;
      }
      .Affiliate-product-table tr th:first-child,
      .Affiliate-product-table tr th:nth-child(3),
      .Affiliate-product-table tr th:last-child {
        display: none;
      }
    }
    /* End Affiliate Product Box */
    </style>

Bước 5: bây giờ các bạn lưu lại và xem kết quả của bạn thân.
DEMO THỦ THUẬT.
TOP Pick
Asus ROG Zephyrus G14
It delivers the goods in gaming but also delivers 11 hours of battery life Buy Now
Trending
Razer Blade 14
Razer Blade 14 offers powerful components and excellent performance. Buy Now

Chúc các bạn thành công với thủ thuật này.