How To Create Download Link In Blogger

I keep wanting to give out free downloads, but I have struggled finding a way to provide downloads on a blog. They keep changing things on me!

Looking for an easy button like a plug-in has proven to be the hard way.

I've tried several plug ins for WordPress, but every time WordPress updates, they stop working. Not good. I also tried downloading from Google Drive, but they changed that so all my old links no longer work. That's the problem with depending on other places. They change things. Stuff stops working when they do.

People provide free downloads for many reasons, but the popular reason is to bribe people with a free thing for their email address.

Downloads you can provide include

Easy WordPress: Upload a Zip File to your Media
- How to Zip a File
Manual HTML
- STEP 1: Get your File on the Internet and Get its Address
  - Name your file
  - Move Your File to the Internet
  - Move File to Internet FOR BLOGGER
  - Move File to Internet FOR SELF HOSTED
  - for self-hosted with FILE MANAGER
  - for self hosted with NO FILE MANAGER >>> 3rd PARTY FTP
  - A: Install Filezilla
  - B: Connect Filezilla
  - C: Upload File
  - D: Get File Address
- STEP 2: Create Code for Download
  - The DropBox Hack
  - Add an Image… Do you want it to have a pretty Download Button?
  - Download from Image
- To get the address of the image file…
- Code for Image and Download
  - CSS Download Button
  - Step 1: Create the CSS Styles
  - Step 2: Apply CSS Styles in HTML
  - Some Sources:
Let's Be Friends!

Downloads you can provide include

PDF's
Music
Video
Photoshop Elements
Fonts
Word Document Templates

ANY COMPUTER FILE you find in your folders.

For purposes of this article, I'm trying to help people have a DOWNLOAD button that once clicked, it just downloads the file.

Easy WordPress: Upload a Zip File to your Media

For the most part with wordpress, you can

upload a file to your media library that's less than 512 MB,
grab the link from the right,
paste it where you want the link
optional: click open in new window option

What happens depends on how it's saved. If it's an image or pdf, it will probably open it. Most bloggers are content letting pdf's open in a new window because it has a save to your computer option.

If you want it to just download, like say you have an image you don't want to force people to right click and hit save as, your best bet is to ZIP it.

So far in my experience, all ZIP files are an immediate download.

How to Zip a File

Create a Folder and put in all the files you want to give away in that folder
Right click folder, for 7-Zip, choose "add to archive," for WinZip, choose "add to zip file," for Compress Zip, choose "compress." If you don't have any of those, you might need to get one. I recommend 7-Zip.

Manual HTML

STEP 1: Get your File on the Internet and Get its Address

Name your file

MAKE SURE you name your file in your hard drive something that is internet friendly.

Use underscores instead of spaces
Avoid any characters besides text and numbers
Use all lower case
And for purposes of SEO, you probably want a keyword in the name.

You can get away with using symbols and upper case, but it's harder to remember, and depending on which method you go with, there's a chance you'll need to remember the exact file name.

Move Your File to the Internet

Most files that end with JPG, GIF, and PNG, you can upload as a media file in your blog's gallery. WordPress also allows PDFs and ZIP files to be uploaded right into the media gallery.

Whatever file you want to provide for download, you upload the file to a server. Basically your computer has a storage space, but the internet can't access your computer's storage unless you somehow let them, but you don't want that. So you have to move it to a storage space that the internet can access, and since most of us are not hosting companies, the best thing is to find a place that's on the internet to store your stuff.

But the end result, your primary goal with this step is to obtain a web address that starts with html:// and ends with a file like .jpg or .mp3 or .docx.

Move File to Internet FOR BLOGGER

Blogger blogs are hosted by Google for free, and they do not have a place to directly upload files to. You will have to find a 3rd party place to host your files.

I personally struggled finding any method that works well beyond DROPBOX. This is why…

Why aren't my files downloading anymore?

Updated for June 2019…

Some things were updated in Spring of 2018 making it difficult or impossible to download things that have a different web address than the one you're on. See the problem is when you upload a photo to your blog, Blogger saves it to a completely different web domain than the one your blog is on. So all photos and just about any files you save at a 3rd party location (like Google Drive) is a cross origin problem in Blogger. HTML just doesn't like that shit anymore, or maybe it's Chrome because that would just be irony if the issue is only in Chrome.

Here's a quote from StackOverflow…

UPDATE: As of spring 2018 this is no longer possiblefor cross-origin hrefs. So if you want to create <a href="https://i.imgur.com/IskAzqA.jpg" download> on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement

I honestly am just completely too stupid to fully understand what that means. I've read several places talking about this, and NONE OF IT MAKES SENSE TO ME! So I 'm just going to skip the bull shit and give you the one hack that I managed to make work for Blogger.

The only hack I can find is to go Drop Box.

DropBox Hack — When Direct Download Links not Working

You can use DropBox's free plan.

Upload to DropBox
Click to Share
Create a Link
Copy Link

Paste your link the way they have it. After your file name like svg or doc, it should have a ? and some other stuff like

https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?dl=0

Change the dl=0 to raw=1

https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1

And that should work.

You can upload almost any file to dropbox.

Now I will add that I found a blog post here that suggests washing Google Drive's shareable links through THIS TOOL in order to get a direct link. I've not tried it.

Move File to Internet FOR SELF HOSTED

Some places that provide hosting provide access to your files or some kind of file manager. Some places do not.

In my experience, Go Daddy and Dreamhost did NOT provide any kind of file manager and required that I use a 3rd party FTP. Lyrical Host DOES provide a file manager, and if you decide to switch you can save 10% with my affiliate coupon code: BeHappy (I get a small commission if you use that, but you also save money).

Definitely make sure here that the file you wish to upload is named something internet friendly with no spaces. It's best to keep it to lowercase letters, numbers, and underscores. It's just easier to type in an address without adding 20% to things.

for self-hosted with FILE MANAGER

If your hosting company provides a place to access your website files, you can go there. You basically find the public folder usually titled HTML or at Lyrical Host, they call it Public_html …

There you can choose to create a new folder for organization and ease reasons. I created one called DOWNLOADS. I also have FONTS (to install fonts on my site).

In the folder where you want your file to be, where you can find it again later if you want to, and try to be pretty decisive about this because moving the file will change the link's address (which will break your links), go ahead and upload the file to that folder.

The address is usually

yoursite.com/folderinhtml/filename.file

So if you uploaded the file Foxy.TTF to your folder DOWNLOADS in your public_html or html folder, it will be

Yoursite.com/DOWNLOADS/foxy.ttf

If you named your folder ROCKYMOUNTAINOYSTERS it would be

Yoursite.com/ROCKYMOUNTAINOYSTERS/foxy.ttfd0e8f7

In essence, it's

Yoursite.com/ENTIRE DIRECTORY or PATH OF FOLDERS IN HTML FOLDER/fid0e8f7lename.file

but you don't include HTML or public_html's folder in the path…

You may want to plug YOUR PATH in the navigation bar and go to that file just to make sure it works. If it's web page at all (usually files that end in html, svg, jpg, png, or pdf), it will open up as a page. If not (such as files like otf, docx), it will just automatically download it.

for self hosted with NO FILE MANAGER >>> 3rd PARTY FTP

A: Install Filezilla

For Self-Hosted WordPress blogs, the best way to handle a means to upload and edit your website's direct files is through an FTP so that the file is stored on your server or hosting service. I use Filezilla.

B: Connect Filezilla

Once you've installed Filezilla, you may have to call your hosting to find out how to obtain the information you need to connect Filezilla from your computer to the files in your site, but most hosting providers show this on the website under your account somewhere.

The Filezilla program wants to know a few things (right under the toolbars before the status box)

Host
Username
Password
Port

In GoDaddy, I had to go to Gateway, From there, I click on my wordpress site's settings, from there, I click the tab SSH & SFTP, and there it lists those things. You have to click the toggle button to turn your password from stars/dots to an actual password before copying and pasting. Then just copy and paste the information to the right places.

In most sites, it's listed under anything that has the letters FTP, like on Go Daddy, it was SFTP. Some hosting providers lock your FTP, and you can request to unlock it for a certain amount of time. If you can't figure it out, you're probably going to have to contact customer service with your hosting provider, and it's a HOSTING thing, not a domain thing.

Once you have the information in place to connect filezilla, click the QuickConnect button.

You should then get four window boxes underneath the status box. The two on the left is your hard drive on your computer, and the two on the right is the drive on your web site. This kind of works like file explorer on your computer. The top windows are file folders while the bottom windows give actual files.

In navigating through Filezilla, double clicking on the folder with three dots/periods will take you back a folder. You can also single click the folder on the top box to open the contents in the bottom box.

C: Upload File

I'm not sure if it really matters where the folder is…

I generally have put my stuff in either the html folder, or the wp-content one. The wp-content folder should be in your html folder.

I also then create folders to organize what I'm about to upload as if I were just organizing folders on my computer's hard drive. This place is really just your website's hard drive.

The first time you do this, you probably want to create a Downloads folder that you can use in the future. Right click anywhere in the bottom right box, and choose "Create a New Directory." Name your file (maybe "downloads" all lower case, think html address). You do not have to create a new directory for each file you want to upload. This is just for the first time. After this, you can upload the file to this folder. If you plan on providing a lot of downloaded material, you may decide to make additional directories to organize your files, such as a directory for music and one for documents.

But you want to make sure you are organizing this just the way you want it because if you move these files, you will break your download buttons on your site and have to go back and re-link to your new file address.

The next step is basically to drag the file into the folder. Open your destination folder on the right side. Find your file you want to upload in the bottom box on the left. Drag and drop that file from the left (your hard drive) to the right (your site).

D: Get File Address

I can't find an easy way to copy and paste your file address completely from filezilla, but here's how to obtain the file address.

You basically have to manually type out the address.

The address will start out with http://www.yoursite.com
Then forward slash all the file folders (AKA Directories) after HTML to your document/file.

Tip: Under where it says remote site in the top right hand of the boxes, you can highlight wp-content and all the information after that and paste it. BUT this is only good for the second half of the address. So you will have to type out the info with 1. and then paste the info for 2. Then forward slash and type in the name of the file.

So it could look something like this:

http://www.mysite.com/wp-content/uploads/downloads/file.jpg

So if you uploaded the file Foxy.TTF to your folder DOWNLOADS in your public_html or html folder, it will be

Yoursite.com/DOWNLOADS/foxy.ttf

If you named your folder BLUEBALLS it would be

Yoursite.com/BLUEBALLS/foxy.ttf

If you use more than one folder such as putting BLUEBALLS into your wp-content folder, then it would be…

Yoursite.com/wp-content/BLUEBALLS/filename.file

In essence, it's

Yoursite.com/ENTIRE DIRECTORY or PATH OF FOLDERS IN HTML FOLDER/filename.file

but you don't include HTML or public_html's folder in the path…

You may want to plug what you come up with in the navigation bar and go to that file just to make sure it works. If it's web page at all (usually files that end in html, svg, jpg, png, or pdf), it will open up as a page. If not (such as files like otf, docx), it will just automatically download it.

STEP 2: Create Code for Download

This is where life gets tricky. Essentially, if you just link to the file, the computer usually knows to just download that file. But generally that only works on the site with the same domain as the file.

So if you have Foxy.ttf saved under MyDomain.com, plugging that link into a page on My2ndDomain.com will open that file very differently than if you plug that link into a page on MyDomain.com. It is best, if you can, to upload the files you want to provide as a download on the site / domain that you plan to offer the download link.

If you want to roll with html…

This goes in the HTML section of your blog post / page / widget…

                <a href="paste location of the file.jpg">TEXT YOU WANT LINKED FOR DOWNLOAD</a>

If that doesn't fully work, you may need to add the word Download to it after the file as W3Schools suggested, but I haven't had to do that with any of my files yet.

This goes in the HTML section of your blog post / page / widget…

<a href="paste location of the file.jpg" download>TEXT YOU WANT LINKED FOR DOWNLOAD</a>

The other idea that works with this html5 structure is if you want to change the name of the download as it downloads you can do…

This goes in the HTML section of your blog post / page / widget…

                <a href="path_to_file" download="proposed_file_name">Download</a>

The DropBox Hack

With the drop box hack, all you gotta do is insert your link as a link.

Here's an example of a font file using the dropbox hack…

DOWNLOAD FONT FROM FILE

Here's another method that works… adding an a download…

DOWNLOAD FONT FROM FILE IN A NEW TAB

This goes in the HTML section of your blog post / page / widget…

                <a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank">

Add an Image… Do you want it to have a pretty Download Button?

All you got to do really is link your link to a picture instead of text. Or you can design a button in CSS and link that…

WordPress Easy button? Ultimate Blocks for Gutenberg but regular Gutenberg has a button option in it too. Also Elementor does.

Download from Image

Draw a picture of a download button or find one on the web that you are allowed to use. Upload it to your pictures in your media gallery or insert picture on blogger. I'm going to use this picture from wikimedia commons….

That one shouldn't download anything.

To get the address of the image file…

You can get that on Blogger by uploading the image, and then insert it into your post, set it to original size, and then right click and choose copy image address, and then delete the image from your compose area. I actually keep an on-going blog post draft of images just to get the image address.

In wordpress, you can upload the image to your gallery and if you look at the details on the right, find the address after URL.

Code for Image and Download

Pick ONE of these to go in the HTML section of your blog post / page / widget…

Most places, this is fine…

                <a href="https://MyFileForDownload.mp3"><img src="MyImageURL.jpg"></a>

or other method I find working better on blogger though the top method does work…

                <a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank"><img src="https://blogginglearn.com/wp-content/uploads/2016/08/wikimediacommonsdowloadbutton-1024x244.png" /></a>

It should look and behave like this…

CSS Download Button

If you want to create a download button, you can use CSS for your whole website to design a button…

Step 1: Create the CSS Styles

The following is the code for my buttons on this blog when it was on blogger, and it pulls from the variable that lets me set the blog's color in "Customize" as opposed to html. You can change that $(scheme.color) to any #HEX.

THIS code is for CSS in your entire blog's theme. In blogger, it's usually in the bskin, and sometimes that's closed off with <bskin>…</bskin> and you have to click the 3 dots to get it to show all the codes.

In WordPress, it's usually in the theme's files, but I wouldn't add them directly to the file because then you have to do that every time the theme updates, so most themes allow you to add CSS styles to the theme in the Customize section (it's usually the last option)… OR you can create a new CSS file in your directory / file manager with your hosting.

button {   background-color: #706f74; /* dark gray*/   border: none;   color: white;   padding: 15px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px; }

That last bit of code is primarily from W3 Schools, and this link has a bunch of CSS codes for things like rounded buttons, hover effects, and so forth.

In Blogger, CSS is a little different. For the most part, it's the same. But if you want to be able to pull from theme's colors, you're going to have to work with variables. You can also create a variable just so you can customize it from the normal customize section.

At the top of your bskin, the theme should list some variables. These are things that show up in your "Customize" section without having to get into the html. This is where you get the name for things that already exist so instead of saying that you want the button color to be blue, you are saying you want the button color to be whatever color you choose for scheme color in customize.

My code pulling from my own variables on this blog's old theme is as follows…

                .button {         font: $(body.font);         text-transform: uppercase;         background-color: $(scheme.color);         padding: 7px 15px;         text-decoration: none        border-radius: 2px;         overflow: hidden;         cursor: pointer;         display: inline-block;         color: #fff;    }

So the variables are going to look like a dollar sign, and then parentheses with a word, period, and word. You can almost know exactly how your theme words the variables by clicking anywhere within the html, hitting CTRL F, and typing in "$" to find all the codes that begin with a dollar sign. Then you might be able to find out what's what that way.

Step 2: Apply CSS Styles in HTML

So the following code goes in the HTML section of your blog post / page / widget…

You can skip the div style by deleting the div style words in the <div style…> and delete the end div </div>, but I went ahead and added it so you can center your button without thought.

                <div style="text-align: center;">    <a class="button" a download="socialmediafont" href="https://www.dropbox.com/s/kjphdfsvzxa6uzr/SocialMedia.otf?raw=1" target="_blank">Download Social Media Icons Font</a></div>

SO it would look and behave like this (if it's not an actual button, I haven't applied the CSS to the new WordPress)…

Some Sources:

Stack Overflow: Chrome Download Attribute Not Working
Stack Overflow: How to Trigger a File Download
W3 Schools: How to Download Link
Where I found the DropBox Hack