How To Hide Powered by Blogger Footer Attribution from Your Blog

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.

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

or /*]]>*/ 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

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

Step 7: Now search the code

or </title> and paste the following Codes just bellow to it.

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

  













  







Rs. 500/-


Rs. 50

  

   

4.5
  

 


  

 

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.
  

• 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 👇
  
  
  
  And along with that you need to change the code of the button in
  .
  And with that you need to change the button.
  Button code within
  👉 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 👇
  
  
  
  And along with that you need to change the code of the button in
  .
  And with that you need to change the button.
  Button code within
  👉

" aria-label=" Slide 4"> 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.

• SVG icons in Jagodesain docs
• feathericons
• ionic.io
• iconfinder

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.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © The Pro Project | All Rights Reserved

© Copyright:
www.the-pro-project.blogspot.com

Go to Link