Let’s learn how to add a download button in Blogger quickly and easily.
Here’s step by step instructions on how to add download button in Blogger using custom CSS and a simple line of HTML code.
- Go to this CSS button generator website and choose the button of your choice. Customize the button with the design options given on the right side.
- After you finish customizing the button, click on the generated button to see the backend code.
- Don’t forget to click on the ‘Prefix’ checkbox at the top.
- Copy this code. The first line here is the HTML code. The rest of the lines below that are all CSS code.
- Next, go to your Blogger blog, click on ‘Theme’ and then click on ‘Customize’.
- Then click on Advanced – and click on the drop-down there to scroll down and see ‘Add CSS’ option.
- Paste only the CSS code here.
- Click on Save at the bottom.
- Now go to any blog post, page or sidebar widget wherever you want to add the button to display.
- Paste the HTML code (the first line in the generated code that we copied earlier). Now modify this HTML code like this:
You can change and customize the attribute values in the above given HTML code to suit your needs.
Here’s what the code does:
- A tag with the HREF attribute helps with in adding the URL / hyperlink you want to add to the button.
- Target=”_blank” helps in opening your URL in a new tab.
- Input tag and everything on the second line is for creating the button. The class helps to style the button with the CSS code we pasted in the ‘Add CSS’ section in Blog theme settings.
Hope this helped you. If you need further help, simply watch this video where I show all the steps so you can follow along.