Comment ajouter un bouton de minuterie de téléchargement contextuel dans Blogger

Dans cet article, je vais vous montrer comment vous pouvez ajouter un bouton Compte à rebours au site Web de Blogger . Ainsi, chaque fois que quelqu'un clique sur le bouton de téléchargement, il affiche une fenêtre contextuelle avec un compte à rebours de 20 secondes et vous pouvez y placer des annonces AdSense.

Ainsi, de cette façon, vous pouvez garder vos visiteurs plus longtemps sur votre article de blog et réduire votre taux de rebond et augmenter le temps de séjour global. Ainsi, cela aide à augmenter l'engagement sur le site Web et aide au référencement.

Pour ajouter un bouton de minuterie de téléchargement contextuel dans Blogger, suivez les étapes ci-dessous.

1. Accédez au tableau de bord Blogger et ouvrez un article de blog.

2. Collez maintenant le code HTML et remplacez le lien du bouton de téléchargement , l' ID d'éditeur Adsense et le code de l'espace publicitaire dessus.

 <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. Copiez ensuite le code CSS & Javascript et collez-le au-dessus du </body> étiquette.

 <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. Maintenant, votre bouton de minuterie de téléchargement Popup fonctionnera sur le site Web de Blogger.

Cette fenêtre de téléchargement est entièrement réactive et fonctionne bien sur tous les types d'appareils.

Ici, notez que ce code de bouton de minuterie ne se chargera que sur la page de publication uniquement car nous avons défini la condition if uniquement. si vous souhaitez l'utiliser sur des pages, vous pouvez le supprimer de votre code.

Si vous ne savez pas comment fonctionne la condition if dans Blogger , vous pouvez vous référer à cet article.

Si vous souhaitez modifier le temps du compte à rebours, vous pouvez modifier la valeur dans le code Javascript. Trouvez ce code sur JS. [ var compteur = 20 ; ]

Ici, la valeur 20 fait référence à 20sec , vous pouvez modifier la valeur en fonction de vos besoins.

Avantages de la minuterie de téléchargement

J'espère que vous avez ajouté avec succès un bouton Download Timer à votre site Web Blogger.

Remarque : Si ce code ne fonctionne pas correctement sur votre thème, vous pouvez utiliser le code de minuterie de téléchargement contextuel alternatif indiqué ci-dessous.

Si vous rencontrez des problèmes lors de l'installation du bouton Compte à rebours, vous pouvez me le demander dans la section des commentaires.

N'oubliez pas de rejoindre notre groupe Telegram et notre chaîne YouTube.

Lire aussi : Comment ajouter un formulaire d'inscription Mailchimp dans Blogger