Yine okuyucularımdan birinin sorusu üzerine yazdığım bu yazıda sitenize, jQuery countdown (geri sayım sayacı) nasıl ekleyeceğinizi anlatacağım. İnternette jQuery ile hazırlanmış çok fazla geri sayım sayacı var. Ben burada, okuyucumun bana gönderdiği dosyadakinin nasıl yapılacağını detaylı bir şekilde açıklayacağım.
Öncelikle Jquery Countdown dosyasını bilgisayarınıza indirin. Sıkıştırılmış dosyayı açtıktan sonra içerisindeki images, js ve style isimli klasörleri hostunuza yükleyin.
Aşağıda verdiğim kodları <head></head> etiketleri arasına ekleyin.
[code type="JavaScript"]<script src="js/jquery-1.4.1.js"></script> <script src="js/jquery.lwtCountdown-1.0.js"></script> <script src="js/misc.js"></script> <link href="style/main.css" rel="stylesheet"> [/code]
Bu kodda dikkat etmeniz gereken şey dosyaları hostunuza yüklerken herhangi bir klasör içine yüklemeyin.
Klasörleri olduğu gibi atın. Eğer hostunuzda, deneme amaçlı bir klasör açıp dosyaları içine atmayı istiyorsanız,
yukarıdaki kodda src içerisindeki yolun başına klasörünüzün ismini yazın.
Örneğin; deneme isimli bir klasör oluşturduysanız
src içerisini deneme/js/dosyaismi.js şeklinde değiştirmelisiniz.
Aynısı CSS dosyası için de geçerli.
Buraya kadar sorunsuz bir şekilde yaptıysanız geri çok basit. Zaten hata yapma ihtimali olan kısım üst kısımdı.
Şimdi tek yapmanız gereken şey aşağıdaki kodları, geri sayım sayacının görünmesini istediğiniz yere eklemek ve üzerinde gerekli değişiklikleri yapmak.
[code type="HTML"]<div id="countdown_dashboard"> <div class="dash weeks_dash"> <span class="dash_title">hafta</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash days_dash"> <span class="dash_title">gün</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash hours_dash"> <span class="dash_title">saat</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash minutes_dash"> <span class="dash_title">dakika</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dash seconds_dash"> <span class="dash_title">saniye</span> </div> <div class="digit">0</div> <div class="digit">0</div> <div class="dev_comment"> MAYA TAKVİMİNİN SON GÜNÜNE KALAN SÜRE </div> </div> [/code] [code type="JavaScript"]<script> jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetDate: { 'day': 21, // hedef gün 'month': 12, // hedef ay 'year': 2012, // hedef yıl 'hour': 12, // hedef saat 'min': 0, // hedef dakika 'sec': 1 // hedef saniye } }); }); </script> [/code]Gördüğünüz gibi eklediğiniz kodların sonunda hedef gün, hedef ay gibi açıklamalar var. Sayacın hangi tarihten geriye doğru saymasını istiyorsanız, oradaki rakamları kendinize göre düzenleyin. Hepsi bu kadar.
Yorum Gönder
Facebook Yorumları