How to add download button in blogger post or page


By default there is no such option given in blogger to implement download button icon and link.

In order to do this we need to do a little bit of  theme customization.The various steps for the theme customization are given below :

step 1) Open theme option from the dashboard of your blog.



step 2)  Then click the three dots at the top right of the customize option



step 3) Here first take the back up of your theme so that anything unexpected happens you can restore your previous theme settings easily.


step 4) Then find the head tag in the html code



step 4) under the head tag paste the following bootstrap code

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


step 5) now save the settings.

step 6) write a new post where you want to add your download button.

step 7) now mark the place where you want to add your button as follow :

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

step 8)change the text editor settings from compose to html :


step 9) now locate the ( zzzzzzzzzzzzzzzzzzzzzzzzzzz) marked place in the code.

step 10) paste the following code for download button at the marked place (zzzzzzzz)

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

step 11) preview the post if everything seems fine then  save the settings.

step 12) now link your downloadable file to the download button as follow :

step 13) take the direct download link from you goolge drive and  locate the following code in html editor :

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

14)just before and after  the above code type href anchor tag as follow

<a href=”https://docs.google.com/uc?export=download&id=1qYtJfJ-4hI-YpAHVTEz06Tl51Os9pQIitarget=”_blank”title=”name of the file”> <button class="btn"><i class="fa fa-download"></i> Download</button></a>

15) preview post and then save if everything seems fine.

for demo I am going to place the code here :


Post a Comment

0 Comments