HOW TO ADD DOWNLOAD BUTTON IN BLOG POST

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.

Sponsored:

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__
Step-1
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.

Step-2
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. 

Step-3
Click on Edit HTML ;

Make change your HTML code, just clicking on Edit HTML button you can get the HTML code window.

Step-4
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.
Sponsored:

Step-5
Now add the below  code just Above/Before ]]></b:skin>;

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;
font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;}
.downloadbutton a:hover {background:#ddd;}
.downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.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;
font-weight:bold;}
.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;
margin-right:6px;color:#aaa;}
.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;}

Step-6
Clicl Save 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.

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="http://wazipoint.blogspot.com/2015/12/wazipoint-photo.html" rel="nofollow" target="_blank">DOWNLOAD</a>
<br />
<span class="up">Download Section</span>
<br />
<span class="down">Click Here</span>
</div>

NOTE: You must change the URL “http://wazipoint.blogspot.com/2015/12/wazipoint-photo.html” 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:

DOWNLOAD
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.