Como criar uma tabela de produtos afiliados no WordPress e no Blogger GRATUITAMENTE

Neste artigo, mostrarei como você pode criar uma tabela de produtos afiliados usando HTML e CSS e adicioná-la ao seu site do blogger e do Wordpress.

Este método é totalmente gratuito e você pode facilmente adicionar esta tabela de comparação de produtos ao seu site.

Mas antes vamos entender porque você precisa desse tipo de tabela em seu site.

Suponha que você esteja executando um blog de afiliados da Amazon e queira exibir os produtos e os links de compra de maneira organizada.

Nesse caso, esta tabela de produtos afiliados o ajudará em sua campanha de marketing de afiliados.

Como adicionar tabela de produtos afiliados no Blogger?

Para adicionar a tabela de produtos afiliados, siga as etapas abaixo.

#1 . Acesse o painel do Blogger e abra qualquer postagem do blog.

#2 . Agora mude para a visualização HTML e copie o código HTML daqui.

 <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>

#3 : Agora altere o nome do produto, a descrição do produto, o URL da imagem e os URLs do link neste código.

#4 : Agora copie o código CSS abaixo e cole-o abaixo deste código.

 <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>

#5 : Agora publique a página e a tabela de afiliados do produto é adicionada ao site do seu blogger.

Agora a tabela de comparação de produtos ficará assim. Você também pode alterar a cor do botão, a cor do cabeçalho da tabela alterando o código CSS.

Aqui, você tem controle total sobre a aparência da mesa e ela é gratuita.

Você também pode conferir o vídeo abaixo sobre como editar este código.

Como adicionar tabela de produtos afiliados no Wordpress?

Adicionar essas tabelas de produtos de afiliados é bastante fácil. Você pode adicionar esta tabela usando o código acima ou usando um plug-in de tabela para isso.

Para adicionar esta tabela usando o código, tudo o que você precisa fazer é abrir a postagem do blog.

Agora procure por blocos HTML personalizados e cole o código acima. Agora altere os campos necessários, como nome do produto, links do produto, descrição, etc.

Aqui, você pode ver a visualização no editor de postagem, o que ajuda a ver os blocos visualmente.

Depois disso, clique no botão publicar e a tabela será adicionada ao seu site Wordpress.

A grande dor de cabeça nesse método é que você tem que alterar manualmente tudo no código e então a tabela funcionará.

Se você deseja uma abordagem mais simples, pode usar um plug-in dedicado para isso. assim, você pode editar a tabela visualmente.

Mas, a maioria deles tem funcionalidade limitada na versão gratuita e você precisa pagar algum dinheiro para ter acesso total.

Aqui estão alguns plugins de tabela para Wordpress que permitem criar uma tabela de comparação de produtos.

1. TablePress (GRATUITO)
2. Construtor de tabelas WP
3. AAWP
4. AzonPress
5. AmaLinks Pro
6. Afiliado

E se você estiver usando qualquer construtor de páginas como o Elementor, o construtor de blocos Kadence, poderá criar esses tipos de tabelas de afiliados da Amazon a partir do zero.

Você também pode usar a tabela padrão do Wordpress, mas essa tabela não é responsiva e funciona perfeitamente para uma pequena tabela com duas colunas.

É por isso que recomendo que você use o método de código, pois ele oferece personalização completa e a tabela é totalmente responsiva. Ajusta o tamanho da tabela de acordo com o tamanho da tela.

Você pode usar esta tabela para promover seus produtos afiliados da Amazon ou quaisquer outros serviços afiliados, como hospedagem, plugins, etc.

Essa tabela de afiliados dá ao conteúdo uma aparência profissional e aumenta as chances de clique no link e conversão.

Se você tiver alguma dúvida sobre isso, sinta-se à vontade para me perguntar na seção de comentários.

Se você quiser se manter atualizado com as últimas dicas e truques relacionados a blogs, considere se inscrever em nosso canal do Youtube Key2blogging.

Recomendado: Como adicionar uma tabela de prós e contras usando HTML e CSS?