How To Create Files Download Page On Blogger Blog

How To Create Files Download Page On Blogger Blog

Do you want create custom files download page on your blogspot blog?.

And don't know how? then this post is for you.

It is possible to create files download page on blogger which is popularly known as download page.

It's a page where site visitor must wait for some seconds before his download link or button appear, finally he can be able to download his file.

Mostly some other blogspot users prefer using Safelink, to create custom file download page on blogger.

For me, i don't 50% like the idea of using safelink, that's why i create this working download page script.

Main reason of using files download page on your blogspot blog is: the page will increase the time visitos spend on your site.

Moreover if you're using any kind of advertising network on your blog, the download page will also help to increase your earnings.

Now view demo of this download page first, then procceed with how to create file download page on blogger.

Demo Of Blogger Files Download Page

How To Create Files Download Page On Blogger Blog 

All steps are easy to follow, but you must configure jquery on your site if your blog template was not built in it.

Step 1: Visit blogger.com , login to your blog and create new page with name Download then publish it.

Step 2: Copy below javascript code and paste it in HTML view of your page post editor.

<div class="mc">

<h2 id="seeytimer">Wait for <span>20</span> seconds before you file is being ready</h2>

  <div id="dl-wrap">

 <a class="dl-button" href="" id="file-link" style="color: white; display: none; text-decoration: none;" target="_blank"><i class="fa fa-download"></i> Download Now </a></div></div>


Then switch back to compose view.

Step 3: Configure jquery script in your blog template, copy below jquery script and add it your site template.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Make sure you paste it below open <head> of your blog template.

Also Read: How To Upload Template On Blogger Using New Interface

Step 4: Also copy below javascript code and add it in the close </body> tag of your blog template and save your theme.

<script>

jQuery(document).ready(function() {

var sec = 20

var timer = setInterval(function() {

$(&quot;#seeytimer span&quot;).text(sec--);

if (sec == 0) {

$(&quot;#file-link&quot;).delay(1000).fadeIn(1000);

$(&quot;#seeytimer&quot;).hide(1000) .fadeOut(fast);}

},1000);

});

</script>

<script>

    var url_string = window.location.href; //window.location.href

    var url = new URL(url_string);

    var d = url.searchParams.get(&quot;to-url&quot;);

    document.getElementById(&quot;file-link&quot;).href = d;

</script>


Now you successfully create files download page for your blog.

Blogger Download Button Code

Step 1: Copy below CSS code and insert it in your blog template css code.

.mc{border: 1px solid red;margin: 15px 0 15px; border-radius:10px 10px 0 0}
.mc h2{margin: 0!important;background:red;color: white!important;font-size: 13px;font-weight:bold;display: block;text-align:center;padding: 10px; border-radius:10px 10px 0 0}
.mc h2 span{font-size: 25px;}
#dl-wrap{margin: 20px auto;text-align: center;}
.dl-button{position: relative;display:inline-block;background:red; padding:10px; border-radius:50px;color:#fff;}
.dl-button a{text-decoration: none; color:#fff;}
.dl-button a:hover{color:#fff;}

Step 2: Copy below HTML code and insert it where you want download button with title above it appear.

<div class="mc">
<h2>Download Your File Title</h2>
<div id="dl-wrap">
<a class="dl-button" href="URL-LINK" style="color: white; text-decoration: none;" target="_blank"><i class="fa fa-download"></i> Download Now </a>
</div></div>

Do you want learn in video not in blog post? then watch below video on how to create files download page on blogger blog.

How To Format Download Link, For Files Download Page 

From above blogger download button code change this blog adress.

Then format your download link like  https://www.site.com/p/download.html?to-url=Your-Direct-File-Download-Link and replace it with URL-LINK in blogger download button code.

If you do so, i am sure you're good to go.

Just change your file download link whenever you want add download button in your blog post.

Conclusion

Huh, just enjoy this blogger trick, and don't forget to leave a comment and share this post.

Say Something On This Post

0 Comments