• Blogging
    • Blogging Tips
    • Adsense
  • SEO
  • Blogger
    • Blogger Templates
    • Blogger Tools
  • WordPress
  • Informations
  • Make Money
    • Affiliate Marketing
    • Deals
Facebook Twitter Instagram
itsutkarshkitsutkarshk
  • Blogging
    • Blogging Tips
    • Adsense
  • SEO
  • Blogger
    • Blogger Templates
    • Blogger Tools
  • WordPress
  • Informations
  • Make Money
    • Affiliate Marketing
    • Deals
Subscribe
itsutkarshkitsutkarshk
Home Β» How To Add Download Timer Button With Ads In Blogger Post
Blogger

How To Add Download Timer Button With Ads In Blogger Post

itsutkarshkBy itsutkarshkOctober 2, 2022No Comments3 Mins Read
Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Telegram Email
Friends, if you have a website or blog and inside it you write an article giving links or buttons to download any application, software, video, audio, photo, or any other document, then this article will be very beneficial for you. Because in this article I will tell you a coding, with the help of which your blog/website will earn double (2Γ—) and users will also find it very attractive.

Today I will tell you how you can add a countdown timer to your blog or website article which will be of few seconds and after that download link will be activated automatically. Above and below this download link, your ads will appear on both sides, which will increase your earnings and make the article even more unique.

How To Add Download Timer Button

Step 1: Log in to your Blogger Dashboard.

Step 2: Now Go to Theme >> click on Edit HTML.

Step 3: Search And Find the ]]></b:skin>

Step 4: Paste the following code Just before the ]]></b:skin> tag :

/*webguru.mobicomptech.com Download Timer Button */
.button{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0 0 15px 0;list-style:none;}
.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:1px solid #000;letter-spacing:2px;transition:all .2s ease-out}
.download {background:linear-gradient(115deg, rgba(100,154,249,1) 0%, rgba(0,90,240,1) 82%);}
.download:hover {background:#000;border:2px solid #5795FF;opacity:1;}

Step 6: Go to blog New Post >> Select HTML Edit

Step 7: Copy and paste the below code into the HTML of the article where you want to add Download Button

<br />YOUR ADSENSE CODE<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 30 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>πŸ”½Generating Download Link...πŸ”½</b><br /><br />
<a class="download" href="#" target="_blank" id="download_link" style="display: none;">Download Now</a><br /><br />
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 30;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script></div></div>
<br />YOUR ADSENSE CODE<br />

Replace YOUR ADSENSE CODE with your ad code.

Replace # Paste the URL of the site you want to send here.

Replace 30 to You can set the countdown time according to you.

Stay connected With itsutkarshk And Follow Us On Instagram & Facebook Subscribe Our YouTube Channel

Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Previous ArticleResponsive Sticky Floating Bottom AdSense Ads In Blogger
Next Article How to Add Floating Ads in Blogger Sidebar
itsutkarshk
  • Website
  • Facebook
  • Twitter
  • Instagram

One Of The Best Place To Get The Best Tech News And Tips & Tricks About New Technology, Blogging, SEO, YouTube, Social Media, And Much More.

Related Posts

Blogger

Download Plus Ui V2.6.2 Blogger Theme [Latest Template]

November 10, 2022
Adsense

How To Block Spam Click Google Adsense in Blogger

November 10, 2022
Blogger

How to Disable Copy Paste On Blog In Blogger

October 3, 2022
Add A Comment

Leave A Reply Cancel Reply

Follow Us
  • Facebook
  • Twitter
  • Instagram
  • YouTube
Latest Posts

SumoSEOTools v1.0.1 – SEO Tools Script PHP Free Download

December 28, 2022

Download Plus Ui V2.6.2 Blogger Theme [Latest Template]

November 10, 2022

How To Block Spam Click Google Adsense in Blogger

November 10, 2022

GP Premium Free Download [v2.2.2] GeneratePress Premium

November 10, 2022

Make All in One Tools Website. Tool Website Php Script Free Download

October 30, 2022
Facebook Twitter Instagram YouTube
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
© 2023 itsutkarshk.in Designed by Utkarsh Kushwaha.

Type above and press Enter to search. Press Esc to cancel.