Product Add in Blogger : Amazon

Many Blogger  affiliate Product add in Artical and Post But Need to Some Technical ?

We Learn how to Add and Look Affiliate Product and Earn More from Your Affiliate . So Start Today and Earn More.

Make Images Like this:

Sanfe Foldable Pretty Face Razor for Women’s Facial Hair

Rs.299

विडियो देखे :

Start Code fro Blogger

Sidebar Use Code is:

<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9);
max-width: 250px;
margin: auto;
text-align: center;
font-family: arial;
font-size: 12px;
}

.price {
color: grey;
font-size: 18px;
}

.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #28a745;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}

.card button:hover {
opacity: 0.7;
}
</style>

<div class="card">
<img src="image link" style="width: 80%; height: auto; padding-top: 10px;">
<h1>Product Name</h1>
<p class="price">Rs.</p>
<p></p>
<p><a href="add your affiliate link" target="_blank"><button>Buy Now</button></a></p>
</div>

Code for Post/Page:

Now let’s see how to add this product card in the blogger’s page or post.

HTML Code:

<div class="card">
<img src="image link" style="width: 80%; height: auto; padding-top: 10px;">
<h1>Product Name</h1>
<p class="price">Rs.</p>
<p></p>
<p><a href="Put Your affiliate link" target="_blank"><button>Buy Now</button></a></p>
</div>

CSS Code:

<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9);
max-width: 250px;
margin: auto;
text-align: center;
font-family: arial;
font-size: 12px;
}

.price {
color: grey;
font-size: 18px;
}

.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #28a745;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}

.card button:hover {
opacity: 0.7;
}
</style>

Start in Blogger and Happy Earning.

#bloggercoding #affiliate #bloggingtipsandtricks

---