How to add download button in Blogger Post

How to add download button in Blogger post

To add a download button to a Blogger post, you can follow these steps:

Step 1: Upload the file to a file hosting service or your preferred cloud storage platform (e.g., Google Drive, Dropbox).

Step 2: Get the download link of the file. Make sure the link is public and accessible to anyone who clicks on it.

Step 3: Log in to your Blogger account and navigate to the post editor.

Step 4: In the post editor, switch to the HTML mode by clicking on the "< >" button in the top left corner.

Step 5: Find the section of your article where you want to insert the download button. It could be at the beginning, middle, or end of the post.

Step 6: Place your cursor in the desired location and paste the following HTML code:

html


<a href="YOUR_DOWNLOAD_LINK" target="_blank" rel="noopener noreferrer" class="download-button">Download</a>

Replace "YOUR_DOWNLOAD_LINK" with the actual download link you obtained in Step 2.

Step 7: Customize the appearance of the download button by adding CSS styles. You can add the following code to the <head> section of your Blogger template or use an inline style attribute within the download button HTML code:

html

<style>
.download-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  border-radius: 4px;
}

.download-button:hover {
  background-color: #e2e2e2;
}
</style>

Feel free to adjust the styles (e.g., colors, padding) to match your blog's design.

Step 8: Once you've added the HTML code and CSS styles, switch back to the Compose mode by clicking on the "< >" button again.

Step 9: Preview your post to ensure the download button appears correctly.

Step 10: Publish your post to make the download button accessible to your readers.

Remember to replace "YOUR_DOWNLOAD_LINK" with the actual download link you obtained, and feel free to modify the CSS styles to suit your preferences.

Second Way Button:

Style Download Buttons

HTML Code download button

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.btn {

background-color: DodgerBlue;

border: none;

color: white;

padding: 12px 30px;

cursor: pointer;

font-size: 20px;

}

/* Darker background on mouse-over */

.btn:hover {

background-color: RoyalBlue;

}

</style>

</head>

<body>

<h2>Style Download Buttons</h2>

<p>Auto width:</p>

<button class="btn"><i class="fa fa-download"></i> Download</button>

<p>Full width:</p>

<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

</body>

</html>

How to add download button in Blogger Post