Cum să adăugați un buton de descărcare pop-up Timer în Blogger

În acest articol, vă voi arăta cum puteți adăuga un buton de numărătoare inversă pe site-ul Blogger . Deci, ori de câte ori cineva face clic pe butonul de descărcare, acesta va afișa o fereastră pop-up cu 20 de secunde de cronometru și puteți plasa anunțuri AdSense pe ea.

Așadar, în acest fel, vă puteți păstra vizitatorii mai mult timp în postarea de pe blog și puteți reduce rata de respingere și crește timpul general de așteptare. Deci, ajută la creșterea angajamentului pe site și ajută la SEO.

Pentru a adăuga un buton de temporizator de descărcare pop-up în Blogger, urmați pașii de mai jos.

1. Accesați tabloul de bord Blogger și deschideți o postare pe blog.

2. Acum inserați codul HTML și înlocuiți linkul butonului Descărcare , ID-ul editorului Adsense și codul spațiului publicitar pe acesta.

 <p><a class="button" href="#PopupDownload"><i class='icon download'></i>Download</a></p> <div data-ml-modal=""> <div class="Popup_container"></div> <div class="modal-dialog"> <div class="Popup_content center"> <div class="adpop-top"> <h2> Download Your file </h2> <div class="ad-pop__close"><svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div> </div> <br /> <div> <!--Change data adslot & Adclient code here--> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <br /> <a class="button" href=" # "><i class="icon download"></i> Download File </a> </div></div></div>

3. Apoi copiați codul CSS și Javascript și lipiți-l deasupra </corp> etichetă.

 <b:if cond='data:view.isPost'> <script> //<![CDATA[ var downloadButton = document.getElementById("Popup_Download_btn"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload; //]]> </script> </b:if> <b:if cond='data:view.isPost'> <style> #Popup_Download_btn{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#303e9f;color:#ffffff; font-weight: bold;} .adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid} .btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in} [data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0} [data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease} [data-ml-modal]:target .Popup_container{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1} [data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2} [data-ml-modal] .Popup_content{background:#fff;padding:23px 27px} @media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}} .ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .icon {display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background-size: cover;background-repeat: no-repeat;background-position: center center;} .button .icon.download { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>"); } </style> </b:if>

4. Acum butonul Popup download Timer va funcționa pe site-ul Blogger.

Acest pop-up de descărcare este complet receptiv și funcționează bine pe toate tipurile de dispozitive.

Aici, rețineți că acest cod al butonului temporizatorului se va încărca numai pe pagina Postare, deoarece am setat doar condiția if . dacă doriți să îl utilizați în pagini, îl puteți elimina din cod.

Dacă nu știți cum funcționează condiția if în Blogger , puteți consulta acest articol.

Dacă doriți să modificați timpul de numărătoare inversă, atunci puteți modifica valoarea din codul Javascript. Găsiți acest cod pe JS. [ var counter = 20; ]

Aici, valoarea 20 se referă la 20sec , puteți modifica valoarea în funcție de nevoile dvs.

Beneficiile Download Timer

Sper că ați adăugat cu succes un buton Descărcare cronometru pe site-ul dvs. Blogger.

Notă : Dacă acest cod nu funcționează corect pe tema dvs., atunci puteți utiliza codul alternativ al temporizatorului de descărcare pop-up prezentat mai jos.

Dacă întâmpinați probleme în timpul instalării butonului Countdown timer, mă puteți întreba în secțiunea de comentarii.

Nu uitați să vă alăturați grupului nostru Telegram și canalului YouTube.

Citiți și : Cum să adăugați un formular de înscriere Mailchimp în Blogger