We as a Blogger know, free blogging platform provides a little bit limited tools to compose the blog post. But in this like and sharing age, we want to give and take unlimited, in online every day. That’s way today we need to be customized to present more attaractive and useful blogging stuff getting further visitors conversation.

If you are seeking a Download button to add in your blog post, to share some documents- like images, pdf or other formatted file that will give single click download provision. Then you have reached in the right place. WAZIPOINT will show you step by step, how to add a download button in your blog post whereas you like.


How to Add Download Button in Blog-Post Step by Step

Just following few steps below, you can get able to add Download button in your blog post easily. Oky, let’s move__
Go to Blogger Dashboard > Template;
First of all log in your blog account and go to blogger dashboard, as shown in red circle in figure below.
Blogger Template in Dashboard
Backup your Template before making any changes to your blog;
It’s better to take backup before any change in HTML code. Just clicking the Backup/Restore button at top-right corner in your window and following the instruction you can do this, as shown in figure below. 
Blogger Template Backup & Restore
Click on Edit HTML ;
Make change your HTML code, just clicking on Edit HTML button you can get the HTML code window.
Blogger Template
Press Ctrl + F and search the code “]]></b:skin>”;
When window with HTML code appear to you after following step-3, just click on anywhere on HTML code area to place window cursor. Then a search box like below figure will appear, type the code ]]></b:skin>” into the sesrch box and hit enter button on your key pad; check the difference “typed code will appear as highlighted” as shown in figure in step-5.

Blogger Template Search
Now add the below  code just Above/Before ]]></b:skin>;
Blogger Template Code Search
Copy the below code and paste just above the code that highlighted as in above figure:
.downloadbutton {margin:20px auto;padding:20px 0;width:200px;}
.downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700;
.downloadbutton a:hover {background:#ddd;}
.downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal;
.downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;
.downloadbutton .up {background:#8493A0;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down {margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down:before {content:"\f14a";font-family:FontAwesome;font-weight:normal;
.downloadbutton:hover .up {opacity:1;transform: translate(0,0);}
.downloadbutton:hover .down {opacity:1;transform: translate(0,-90px);}
.demobutton {margin:20px auto;padding:20px 0;width:200px;}

Clicl Save template;
Save Blogger Template
After paste the above code, save the changed hitting in as above  and come out from the window. Your blog is now ready to add Download button at anywhere in any post.

How Put Download Button & Link in Blog Post

When your blog is ready to add Download button, go to write a new post or edit an existing post.
Download Link Code
Go to HTML code mode just clicking on HTML as shown in figure. Select the exact location where you want to add the button “DOWNLOAD”, paste the below code there.
<div class="downloadbutton">
<a href="" rel="nofollow" target="_blank">DOWNLOAD</a>
<br />
<span class="up">Download Section</span>
<br />
<span class="down">Click Here</span>

NOTE: You must change the URL “” by your own targeted URL which file you do want to link as download.
You also can change red marked text by your own that will be visible in your post.
If you want download the pdf copy of this article, get from following download link:
This is test download link for you
Click for test
Hope this will be helpful for your happy blogging and happy downloading! If you think it is helpful for others, then help them sharing it in any social network and enrich your network.

1 comment:

  1. Great Blog,Thanks for sharing such beautiful information with us.We have some more information about this lightning arrester calculation. Please visit our site lightning arrester calculation.


Thank you very much to visit and valuable comments on this blog post. Keep in touch for next and new article. Share your friends and well-wisher, share your idea to worldwide.

You may like the following pages