Product added in Blogger: Amazon blogger

बहुत सरे ब्लोगर को अपनी affiliate प्रोडक्ट add करने में परेशानी होती थी . अब आपकी परेशानी दूर होगी और अपनी इनकम ज्यादा होगी. अगर अप वर्डप्रेस यूज़ करते हो तो easy होगा परन्तु ब्लोगर में कोडिंग अपने को करना पड़ेगा तो चलो जानते हे की अपनी प्रोडक्ट कैसे add करे.

विडियो देखे :

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: