How to Add Animated Demo and Download Buttons in Blogger

Hello friends, welcome to our today's tutorial. Guys today, I'll discuss how to add animated demo and download buttons on your blogger site.
Friends, in my previous post, I had told you how to add animated demo and download buttons in a blogger without coding. Now, I'm going to acknowledge you how to add animated demo and download buttons with hover effects on your blogger site.


how-to-add-animated-demo-and-download-buttons-in-blogger
How to Add Animated Demo and Download Buttons in Blogger

How to Add Animated Demo and Download Buttons in Blogger







What are the uses of Demo and Download Buttons in Blogger?

Use of Demo Button: Demo button is a clickable button to overview any tutorial or widget. Like when you download a template site theme, there is a demo / live button on the left side of it, we can see how that theme will look on our site or blog, so this is called live demo.

Use of Download Button: We use it to place the download button on any App or any video site. Whenever you want to download some mp3 songs on your phone or save a computer, you have to download it by clicking the download button.



These are Following Steps to Add Animated Demo and Download Buttons in Blogger -

Applying the Blogger button is very easy, but first, we have to add a CSS code to our blog.

<Method- 1>

Step: 1

Sign in Blogger and select your blog, which you want to add buttons then go to your dashboard.

Now click on the template option in the dashboard.



Step: 2

Now click on the customize button.



Note -  It highly recommended to you keep a backup your theme before changing any code.



Step: 3

If you click on Advanced, click on Add CSS Code option.

Add the CSS code of the button and click on the Apply to Blog button.



how-to-add-animated-demo-and-download-buttons-in-blogger



<Method- 2>

Step: 1
Sign in Blogger and select your blog, which you want to add buttons then go to your dashboard.
Now click on the template option in the dashboard.

Step: 2
Now click on the Edit HTML option by clicking on three dots.



Step: 3

Then press anywhere in code area and press Ctrl+F then a popup box will appear the left side of the code area then type ]]></b:skin> and press enter.



Step: 4

Now two styled demo and download buttons CSS codes will be given below; you can choose your own desired style. Then just copy it and paste above the code ]]></b:skin> .

<Demo and Download Button Style - 1>





                                        <Demo and Download Button Style - 2>





After adding your desire demo and download button CSS code in your blogger template, make sure to add this following code after <head> unless your demo and the download button are not work in your blog.


How to Add Animated Demo and Download Buttons in Blogger Post -

After successfully adding the CSS code in your blog, now post the HTML code in your blog post editor to display the demo and download button.

To Display Demo and Download Button in Blogger Post these are following Steps:

Step: 1
Sign in Blogger and select your blog, which you want to add buttons then go to your dashboard.
Now click on the Posts option in the dashboard.

Step: 2
Now go to edit post, which are you want to add demo and download button. Goto HTML mode on blogger post section and paste the following code to display demo and download button.

<For Demo and Download Button Style - 1>



<For Demo and Download Button Style - 2>



Click on Save Theme, and you are done.


Conclusion:

This is how to add an animated demo and download buttons in a blogger. I hope this post may help you. If you face any difficulty, let me know in the comment box below.


Thank You!
Sharing is Caring.

Related Articals

Post a Comment