Blogger için geri sayım aracı

thumbnail widget de contador hacia atras

Bir etkinliğe, ürün lansmanına, birinin doğum gününe ve diğerlerine kalan süreyi göstermek için geri sayım sayacı.

<b:includable id='main'>
  <style>/*<![CDATA[*/
    .countdown{display:flex;gap:var(--countdown-gap,.5rem)}.countdown-options{display:none}.countdown-value{display:flex;flex-direction:column;text-align:center;color:var(--countdown-color,#fff);background-color:var(--countdown-bg,#23212b);border-radius:1rem;box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.countdown-value>*{padding:.5rem .875rem}.countdown-number{border-bottom:1px solid rgba(0,0,0,.9)}.countdown-name{font-size:.875rem;border-top:1px solid rgba(255,255,255,.1)}
  /*]]>*/</style>
  <data:content/>
  <div class="countdown">
    <b:loop values='["D","H","M","S"]' var='time'>
      <div class="countdown-value">
        <span class="countdown-number">00</span>
        <span class="countdown-name"><data:time/></span>
      </div>
    </b:loop>
  </div>
  <script>//<![CDATA[
    document.addEventListener("DOMContentLoaded", (event) => {
      const countdown=(()=>{const e=document.querySelectorAll("[data-countdown]"),n={};e.length>0&&e.forEach(((e,t)=>{!function(e,t,o){const r=new Date(t).getTime(),a=e.nextElementSibling,c=e.innerHTML;function i(){const e=(new Date).getTime(),t=r-e,i=a.querySelectorAll(".countdown-number"),l={days:Math.floor(t/864e5),hours:Math.floor(t%864e5/36e5),minutes:Math.floor(t%36e5/6e4),seconds:Math.floor(t%6e4/1e3)};if(t<0)return clearInterval(n[o]),a.classList.add("countdown-finished"),void(a.innerHTML=c);Object.keys(l).forEach(((e,n)=>{i[n].innerHTML=l[e].toString().padStart(2,"0")}))}e.innerHTML="",i(),n[o]=setInterval(i,1e3)}(e,e.dataset.countdown,t)}))})();
    });
  //]]></script>
</b:includable>

CodePen

Bu kez zkreations tarafından Blogger için tasarlanan, bir geri sayım göstermenizi sağlayacak widget paylaşıyorum. Bir etkinlik, ürün lansmanı, birinin doğum günü ve diğerleri için kalan süreyi göstermek için çok kullanışlıdır.

Bu katkı aynı zamanda zkreations'daki Blogger widget'ları bölümünün de açılışını yapıyor; artık şablonun HTML kodunu düzenlemek zorunda kalmadan tek bir tıklamayla widget'ları yükleyebilirsiniz.

Kurulum

Bahsettiğim gibi, kurulum çok basit, sadece yukarıdaki yükle düğmesine tıklayın, widget'ı yüklemek istediğiniz blogu seçin ve hepsi bu kadar. Tüm kod optimize edilmiştir. Böylece blogunuza herhangi bir ek yük getirmez.

Eğer platformunuz Blogger değilse, bu durumda codepen'de bulacağınız widget kaynak kodunu incelemenizi ve her kodu ilgili yere yerleştirerek projenize uyarlamanızı tavsiye ederim.

Yapılandırma

Widget'ı yapılandırmak için Tasarım bölümüne gidin ve Geri Sayım widget'ını bulun. Düzenle düğmesine tıklayın; widget'ın yapılandırılabilir içeriğini içeren bir pencere açılacaktır:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <p>Mutlu Yıllar 2025!! :D</p>
</div>

Tarih

Bu değer zorunludur ve şu formata sahip olmalıdır: AAAA-MM-DDThh:mm:ss burada AAAA yıl, MM ay, DD gün, hh saat, mm dakika y ss saniyedir. Örneğin:

<div data-countdown="2025-02-02T16:00:00" class="countdown-options"></div>

Sayaç 2 Şubat 2024 tarihinde saat 16:00'da sona erecektir.

Mesaj

<div> yapılandırma etiketinin içindeki tüm kodlar gizli kalacak ve sayaç sona erdiğinde görüntülenecektir. İstediğiniz kadar kod ekleyebilirsiniz, örneğin:

<div data-countdown="2025-01-01T00:00:00" class="countdown-options">
  <img src="https://i.imgur.com/7hinFAF.gif" alt="Capoo">
  <p>Mutlu Yıllar 2025!! :D</p>
</div>

Sayacın sonunda Capoo'nun resmi ve bir tebrik mesajı görüntülenecektir.

Özelleştir

Sayacın görünümünü özelleştirmek için, yeni bir değerle belirtebileceğiniz bazı css değişkenleri bıraktım. Bunu yapmak için Temalar > Özelleştir > Gelişmiş > CSS Ekle'ye gidin ve aşağıdaki kodu yapıştırın:

.countdown {
  --countdown-bg: #111;
  --countdown-color: #fff;
  --countdown-gap: .5rem;}

Arka plan rengini, metnin rengini ve sayılar arasındaki boşluğu değiştirebilirsiniz.

Sonuç

Bu eklenti ile blogunuzda bir geri sayım görüntüleyebilirsiniz veya artık bunu göstermek istemiyorsanız, Widget'ı Tasarım bölümünden silerek kaldırabilirsiniz.