How To Add A Product Post Or Page Widget To The Blogger

If you are looking for how to add a Product Post or Page Widget to the Blogger website then this post is just for you.

I am Monish. I have been involved with coding for a long time. I will give you proper advice from long experience so let's start.

We only used then HTML, CSS and JS. Are you upset about your website speed? do not worry it doesn't affect your website speed.

Also do not worry about it this Accordion Section also has dark mode CSS that you just want to change the dark mode class that we gave with your theme dark mode class, you can fluently change it by following this tutorial precisely.

Features:-

Multiply photo image slider support
Bootstrap typography added
Amazing button with vibrate sound effect
Rating option
Price and description section available
Amazing background and Shadow

So without wasting important time let's check How To Add A Product Post Or Page Widget To The Blogger?

You can see the demo here:-

Demo

How To Add A Product Post Or Page Widget To The Blogger?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* Product Post Css by The Pro Project */.st svg{fill:#ffd447}
.border_and_bg{background-color:#fff;border-radius:10px;padding:15px;box-shadow:rgba(0,0,0,.24) 0 3px 8px;background-color:#fff;opacity:1;background-image:radial-gradient(#eee 2px,#fff 2px);background-size:40px 40px}.img_cas img{border-radius:10px;border:1px solid gray}a:link{text-decoration:none}.orginal_price{font-size:30px;color:#1f93ff}
.drK .border_and_bg{box-shadow:0 10px 30px rgba(225,225,225,.1);background-color:#323332;opacity:1;background-image:radial-gradient(#424242 2px,#323332 2px);background-size:40px 40px}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Find the tag </body> or some template will be </body> and add the JavaScript below and above it:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

Step 7: Now search the code </title> or </title> and paste the following Codes just bellow to it.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"/>

Step 7: Save the html changes by clicking on this icon

Step 8: Then go to the page/post or place which you want to add Product Post.

Step 9: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view

Step 10: Now paste the following HTML code to that place

<!--=============[ Border and Bg ]=============-->
<div class="border_and_bg">
<!--=============[ Bootstrap html document Carousel ]=============-->
<div class="img_cas">  
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true"><div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button></div><div class="carousel-inner">
<div class="carousel-item active"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQthKWCAz6GyCbstD2nZ3SwZEtuR9z47M4B8ocDs9Q5iQYaDJfTWo8q1PimVksqHNl_t2_cUc5c4D7K_rTOn5Zj1Tp9qmRArQ3RgYsVGHq6xuB_9J0jZJ84dFYSziojfwfSgkkHQsdfJ6jdyW-z31pSethor4yrkGimKFH6gtdkD_0X8t-2m5DfRi5mA/s320/images%20%284%29.jpeg-rw" class="d-block w-100" alt="..."></div>
<div class="carousel-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif0yK8GyyZE5H8apyz9FmGqY4ml6AJ1o8gVkDma78j4cRBKElvK0sGhYSxCc6fMBXoW5wVmtYbTAIkCFd-kyBQpGJna5p-gWar5aEMqndjijMeh3vZ2I-un0nOtE8F0ZJ1W_i8sOhN2-KKgm3iMgHevF2DQZzSeuPzhDCXNFrPYr3JE0f9NBFL-tcewQ/s320/IMG_20220927_201543.jpg-rw" class="d-block w-100" alt="..."></div>
<div class="carousel-item"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4PEL3eZqbSU41cVb4eLkkjs3rRpTooN3PLBBiwQKtdAPGNovlA1EWw0hC4IBQXEVL97hAjqVIbvffD4b4grqcEp-Tb6qt07l41yGP1IJz0BkP1LOrQh5WNtDQ41HTzrP3SUQx07VkAqfQgIoe1z56qk7LAk8GSTyLMHb9W1qh7M7TuUgHruztSUS9Q/s320/IMG_20220927_201617.jpg-rw" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div>  
</div>
<!--=============[ Product Payment Price  ]=================-->
<div class='price'>
<strike>Rs. 500/-</strike><br/>
<span class="orginal_price"><b>Rs. 50</b></span>
</div>  
<!--=============[ rating using svg ]=============-->   
<div class="st">4.5<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-half" viewBox="0 0 16 16"><path d="M5.354 5.119 7.538.792A.516.516 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.537.537 0 0 1 16 6.32a.548.548 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.52.52 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.58.58 0 0 1 .085-.302.513.513 0 0 1 .37-.245l4.898-.696zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.565.565 0 0 1 .162-.505l2.907-2.77-4.052-.576a.525.525 0 0 1-.393-.288L8.001 2.223 8 2.226v9.8z"/></svg></div>  
<!--[ Morden Toggle Content Or Accordion Section tutorial link = https://the-pro-project.blogspot.com/2022/10/how-to-create-morden-toggle-content-or.html]--> <br>
<!--=============[ Buy button ]=============-->  
<a href="#"><div class="d-grid gap-2"><button class="btn btn-primary" type="button" onclick='vibRate(50)'><b><svg style="fill: #FFF;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
  <path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z"/>
  <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg> Order Now</b></button></div></a> 
</div>

You can change highlighted texts as you want in the code box!

Step 11: Then Save or Publish.

Important Information:

If Bootstrap is already added to your website then there is no need to add bootstrap library. It is not necessary to follow the procedures shown in steps 6 and 7. If you followed the procedure shown in step 6 and 7 then remove these two below from your website theme.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"/>

The procedure to follow if any photo is omitted in the product image slider. The HTML code I shared (step 10) has three image sliders. In case you want to close or remove an image slider then you need to remove this entire code 👇
<div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div>
And along with that you need to change the code of the button in <div class="carousel-inner">.
And with that you need to change the button.
Button code within <div class="carousel-indicators"> 👉 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label=" Slide 3"></button> It should be removed.
Likewise if you want to add images you want to add an image slider then you need to add this entire code 👇
<div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div>
And along with that you need to change the code of the button in <div class="carousel-inner">.
And with that you need to change the button.
Button code within <div class="carousel-indicators"> 👉 <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label=" Slide 4"></button> It should be added.
Change the above book marked numbers as you wish depending on the number of your photos.
 Product information should be added here.
You can add Morden Toggle Content or Accordion Section to add product information.
Click this link to know how to create Morden Toggle Content or Accordion Section.
To change the color of the rating svg icon, change this code .st svg{fill:>#ffd447} and add your desired color code here

Best SVG resources for Bloggers

Now the main question is where can I find SVG icons for my website.

Well, there are a lot of free SVG resources you can use. Here, are some of my favourite website.

Here, note that some SVG codes has predefined style in it, so it may looks different in actual website and you have to edit the SVG code according to your website.

Conclusion

In this article I have made a tutorial on How To Add A Product Post Or Page Widget To The Blogger? I Hope you have liked this article and please do share with your friends and follow up blog for more.

The Pro Project

How To Add A Product Post Or Page Widget To The Blogger

Features:-

How To Add A Product Post Or Page Widget To The Blogger?

Important Information:

Best SVG resources for Bloggers

Conclusion

About the Author

Post a Comment

How to Add Lazy Load AdSense in Blogger?

How To Add Social Media Follow Box Widget To Blogger?

How to Lazy load embedded YouTube videos in Blogger?

How to Create a New Tab Look Sitemap for Blogger

How to Create a Grid Style Category Section Using HTML & CSS In Homepage Of Blogger?