CountDown
Bir aralar siteyi bakıma aldığımızda ziyaretçilere ne zaman sitenin açılacağı konusunda bilgi vermek amaçlı ücretsiz  geri sayım sayaçlarını aradım sizler için. WordPress için en iyi olanlarının büyük çoğunluğu ücretli olanlardı. Ücretsiz olanları da beklentilerimizi karşılayacak türden değildi açıkçası.  Manuel olarak sitenize geri sayım sayacı eklemek isterseniz eğer CountDown.js kolay kullanımı sayesinde tam aradığınız bir uygulamadır diyebilirim. Hem saat olarak hem de gün olarak belirlenebilir.

Geriye doğru sayılacak zamanı belirlemek için yapmanız gereken tek şey Javascript kodlar içinde bir tarih veya saat belirlemek. Daha sonra da body etiketleri arasına kullanmak istediğiniz sayacın divlerini eklemek olacak. Gün sayımı <div id=”counter”></div> divleri arasında gösterilir ve saat sayımı da <div id=”counter_2″></div> divleri arasında gösterilir. Yapmanız gereken işte bu kadar basittir. Kendinize  göre tasarımını da kolaylıkla değiştirebilirsiniz.

Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

 Javascript : 

    <script type="text/javascript">
      $(function(){
        $('#counter').countdown({
          image: 'img/digits.png',
          startTime: '01:12:12:00'
        });

        $('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '01:00',
          timerEnd: function(){ alert('end!'); },
          format: 'mm:ss'
        });
      });
    </script>

 Stil : 

   <style type="text/css">
      br { clear: both; }
      .cntSeparator {
        font-size: 54px;
        margin: 10px 7px;
        color: #000;
      }
      .desc { margin: 7px 3px; }
      .desc div {
        float: left;
        font-family: Arial;
        width: 70px;
        margin-right: 65px;
        font-size: 13px;
        font-weight: bold;
        color: #000;
      }
        .genelcer {
        width: 520px;
        height: auto;
        display: block;
        margin: 0 auto;
            text-align: center;
        }
        .ust {
        width: 550px;
        height: 120px;
        margin: 1%;
        display: block;   
        }
        .alt {
        width: 285px;
        height: 120px;
        margin: 0 auto;
        display: block;      
        }

    </style>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="genelcer">
    <h1>jQuery CountDown Plugin</h1>
<div class="ust">
  <div id="counter"></div>
  <div class="desc">
    <div>Gun</div>
    <div>Saat</div>
    <div>Dakika</div>
    <div>Saniye</div>
  </div>
</div>
<div class="alt">    
  <div id="counter_2"></div>
  <div class="desc">
    <div>Dakika</div>
    <div>Saniye</div>
  </div>
</div>    
</div>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. hakan dedi ki:

    saniyeler demoda biraz hızlı ilerlemiyor mu sizce?