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.
No comments:
Post a Comment