How to Add Product Card in Blogger

Hello friends, in this article we will how you can add product card in the Blogspot blog. You can add this product card in the blogger’s sidebar or in any of your post.

First, we will see how you can add a product card in the blogger’s sidebar, and then we will see how to add that product card in your post.

For adding this product card we will use HTML and CSS. this card won’t affect your blogger’s design or any of post or page design.



Now let’s see how to add this product card in the blogger’s sidebar.

Code for Sidebar:

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