Cara Membuat Tabel Produk Afiliasi di WordPress & Blogger secara GRATIs
Dalam artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat tabel produk afiliasi menggunakan HTML & CSS dan menambahkannya ke situs web blogger & WordPress Anda. Metode ini benar-benar gratis dan Anda dapat dengan mudah menambahkan tabel perbandingan produk ini ke situs web Anda. Tetapi, sebelum itu, mari kita pahami mengapa Anda memerlukan jenis tabel ini di situs web Anda. Misalkan, Anda menjalankan blog afiliasi Amazon dan Anda ingin menampilkan produk dan tautan pembelian secara terorganisir. Dalam hal ini, tabel produk afiliasi ini akan membantu Anda dalam kampanye pemasaran Afiliasi Anda.
Daftar Isi
- Bagaimana Cara Menambahkan Tabel Produk Afiliasi di Blogger?
- Bagaimana cara menambahkan tabel produk afiliasi di WordPress?
Bagaimana Cara Menambahkan Tabel Produk Afiliasi di Blogger?
Untuk menambahkan tabel produk afiliasi, ikuti langkah-langkah berikut.
- Buka dasbor Blogger dan buka salah satu posting blog.
- Sekarang beralih ke tampilan HTML dan salin kode HTML dari sini:
<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>
- Sekarang ubah Nama Produk, Deskripsi Produk, URL Gambar, dan URL Tautan dalam kode ini.
- Sekarang salin kode CSS di bawah ini dan tempelkan di bawah kode ini:
<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>
- Sekarang terbitkan halaman dan tabel afiliasi produk ditambahkan ke situs web blogger Anda. Sekarang tabel perbandingan produk akan terlihat seperti ini. Anda juga dapat mengubah warna tombol, warna judul tabel dengan mengubah kode CSS. Di sini, Anda memiliki kendali penuh atas bagaimana tabel terlihat dan gratis. Anda juga dapat memeriksa video di bawah ini tentang cara mengedit kode ini.
Bagaimana Cara Menambahkan Tabel Produk Afiliasi di WordPress?
Artikel ini tidak secara eksplisit memberikan langkah-langkah untuk menambahkan tabel produk afiliasi ke situs web WordPress, tetapi prosesnya kemungkinan akan mirip. Anda perlu memasukkan kode HTML dan CSS ke dalam pos atau halaman WordPress, mungkin menggunakan blok HTML atau widget HTML kustom jika menggunakan editor blok, atau langsung di editor pos jika menggunakan editor klasik.
Ingatlah untuk menyesuaikan kode HTML dan CSS sesuai dengan produk afiliasi Anda dan preferensi desain yang diinginkan. Selain itu, pastikan mematuhi pedoman pemasaran afiliasi dan persyaratan pengungkapan.
Post a Comment for "Cara Membuat Tabel Produk Afiliasi di WordPress & Blogger secara GRATIs"