Blogger'da Popup İndirme Zamanlayıcı Düğmesi Nasıl Eklenir

Bu yazıda size Blogger web sitesine nasıl Geri Sayım Sayacı düğmesi ekleyebileceğinizi göstereceğim. Bu nedenle, birisi indirme düğmesine her tıkladığında, 20 saniyelik bir geri sayım sayacı içeren bir açılır pencere gösterecek ve üzerine AdSense reklamları yerleştirebilirsiniz.

Böylece, bu şekilde, ziyaretçilerinizi Blog gönderinizde daha uzun süre tutabilir ve Hemen Çıkma oranınızı düşürebilir ve genel kalma süresini artırabilirsiniz. Bu nedenle, web sitesinde katılımı artırmaya yardımcı olur ve SEO'ya yardımcı olur.

Blogger'da Popup indirme Zamanlayıcı Düğmesi Eklemek için aşağıdaki adımları izleyin.

1. Blogger kontrol paneline gidin ve bir Blog gönderisi açın.

2. Şimdi HTML kodunu yapıştırın ve İndir düğmesi bağlantısını , Adsense Yayıncı kimliği ve üzerindeki reklam alanı kodunu değiştirin.

 <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. Ardından CSS ve Javascript kodunu kopyalayın ve </body> etiket.

 <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. Artık Popup indirme Zamanlayıcı düğmeniz Blogger web sitesinde çalışacaktır.

Bu indirme açılır penceresi tamamen duyarlıdır ve her tür cihazda iyi çalışır.

Burada, bu zamanlayıcı düğme kodunun, yalnızca if koşulunu belirlediğimiz için yalnızca Gönderi sayfasına yükleneceğini unutmayın. Sayfalarda kullanmak istiyorsanız kodunuzdan kaldırabilirsiniz.

Blogger'da if koşulunun nasıl çalıştığını bilmiyorsanız bu makaleye göz atabilirsiniz.

Geri sayım sayacını değiştirmek istiyorsanız Javascript kodundaki değeri değiştirebilirsiniz. Bu kodu JS'de bulun. [ var sayaç = 20; ]

Burada 20 değeri 20sn'yi ifade etmektedir, değeri ihtiyacınıza göre değiştirebilirsiniz.

İndirme Zamanlayıcısının Faydaları

Umarım Blogger web sitenize bir İndirme Zamanlayıcı düğmesini başarıyla eklemişsinizdir.

Not : Bu kod temanızda düzgün çalışmıyorsa, aşağıda verilen alternatif açılır pencere indirme zamanlayıcı kodunu kullanabilirsiniz.

Geri Sayım sayacı butonunun kurulumu sırasında herhangi bir sorunla karşılaşırsanız yorum kısmından bana sorabilirsiniz.

Telegram Grubumuza ve YouTube kanalımıza katılmayı unutmayın.

Ayrıca Okuyun : Blogger'da Mailchimp Kayıt Formu Nasıl Eklenir