Blogger Tarih Sayacı Eklentisi

sayaçBlogumu takip edenler belki görmüşlerdir altta footer bölümündeki sayacı. Bunun nasıl yapılacağı ise gerçekten çok basit. İşin özeti javascript’e dayanıyor. Uzun bir kod satırına sadece Gün+Saat+Dakika+Saniye cinsinden tarih atayarak ileri veya geriye doğru sayacımızı bloglarımızda kullanabiliriz.

Geriye sayım sayacını misal olarak Askere gidipte şafak sayanlar için yada YGS sınavına ne kadar kaldığını belirtmek için kullanabiliriz bloglarımızda. İleri tarih sayacını ise üstünden geçen zamanlar için kullanabiliriz. Örnek olarak özel günler olabilir. Ya da beraber olduğunuz biri var ise tanışma gününüzün üstünden kaç gün geçtiğini göstermek için kullanabilirsiniz 🙂   [Kafam gece daha iyi çalışıyor herhalde 😛 neleri düşünüyorum bu saatte ] Kısacası bir çok şey için kullanılabiir bu eklenti. Şimdi ise bu eklentinin nasıl yapılacağına bakalım:
 Arkadaşlar bu kodları yapmak için öncelikle Blogger hesabımıza girelim ve “Yerleşim” sekmesine tıklayalım ve “Gadget Ekle” butonuna basarak “HTML Javascript” i seçelim ve hangi kodu istiyorsak o kodu yapıştıralım: Not:  Bu iki kod içinde geçerlidir.

İleri Tarih Sayacı:

<span style="color: rgb(255, 255, 255);">  Bu Blog <script language="JavaScript1.2">
function setcountup(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}
//////////CONFIGURE THE countup SCRIPT HERE//////////////////
//STEP 1: Configure the date to count up from, in the format year, month, day:
//This date should be less than today
setcountup(2007,09,05)
//STEP 2: Configure text to be attached to count up
var displaymessage=""
//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countup area
var countupwidth='95%'
var countupheight='20px' //applicable only in NS4
var countupbgcolor='alt1'
var opentags='<span class="smallfont">'
var closetags='</span>'
//////////DO NOT EDIT PASS THIS LINE//////////////////
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''
function start_countup(){
if (document.layers)
document.countupnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countupie") : countupie
countup()
}
if (document.all||document.getElementById)
document.write('<span id="countupie" style="width:'+countupwidth+'; background-color:'+countupbgcolor+'"></span>')
window.onload=start_countup
function countup(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
paststring=montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(todaystring)-Date.parse(paststring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if (document.layers){
document.countupnsmain.document.countupnssub.document.write(opentags+dday+ " gün, "+dhour+" saat, "+dmin+" dakika ve "+dsec+"  "+displaymessage+closetags)
document.countupnsmain.document.countupnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " gün, "+dhour+" saat, "+dmin+" dakika ve "+dsec+" saniye "+displaymessage+closetags
setTimeout("countup()",1000)
}
</script>'den beri benimle birlikte.Ve hala benimle birlikte büyümeye devam ediyor kerata...</span>

Burada önemli olan kırmızı renk ile de gösterdiğim gibi tarih formatını yıl+ay+gün olarak girmeniz. Tabi kod bilgisi iyi olan arkadaşlar bu kodlar üzerinde çok çeşitli şeyler çıkartabilirler.

Geri Tarih Sayacı:

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:white;
color:black;
font: normal 18px Impact;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Gün" left
//Use arguments[1] to access "Saat" left
//Use arguments[2] to access "Dakika" left
//Use arguments[3] to access "Saniye" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" Gün "+arguments[1]+" Saat "+arguments[2]+" Dakika "+arguments[3]+" Saniye left until March 23, 2009 18:25:00"
}
else{ //else if target date/time met
var displaystring="Buraya Başlık Gelebilir"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>Gün</sup> "+arguments[1]+" <sup>Saat</sup> "+arguments[2]+" <sup>Dakika</sup> "+arguments[3]+" <sup>Saniye</sup></span> kaldı"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>

<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>

Geriye doğru sayaçta biraz daha özelleştirme imkanınız var. Mesela arkaplan rengi,yazı rengi,yazı fontu vs. değiştirilebilir. Yapmanız gereken yerleri kırmızı renkle gösterdim. Eğer aklınıza takılan bir soru olursa ne yapacağınızı biliyorsunuz zaten 🙂 Allah’a emanet olun.Şimdiden Cumanız mübarek olsun inşallah.

Bu yazıdan önce yazmış olduğum "Blogger İçin Eklebunu Butonu Yapma" başlıklı yazımı da okumanızı tavsiye ederim.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

27 yorum

  1. cekob   •  

    Paylaşımınız için sizlere teşekür ederiz.İleri tarih sayacında yazı rengini nasıl siyah yapabiliriz.

  2. Mahsun ÖNDER   •  

    Güzel birşey. Ayrıca bu kodlar WordPress sitelerinede eklenebilir. Paylaştığınız için teşekkürler..

  3. Enes İLHAN   •  

    @cekob,
    Yazı rengini siyah yapmak istiyorsanız kodun en baştaki satırında yer alan: "color: rgb(255, 255, 255);" bu kodlarla şu değişikliği yapalım: (255, 255, 255) numaralarını (0, 0, 0) şeklinde değiştirirsek yazı rengimiz siyah olmuş olur.
    @Mahsun ÖNDER,
    Evet bu kodlar wordpress'de dahil birçok çeşitli sistemlerde kullanılabilinir. Hoşunuza gittiyse ne mutlu.

  4. Yunus Yalçınkaya   •  

    Bu sayacı görünce aklıma mafiamax.com geldi.Tam onluk bu:)

  5. BilgiBankan   •  

    Sevdim bunu bir ara uygulayacağım 🙂

  6. Metin   •  

    güzel eklenti, uyguladım bile 😀

  7. Sinan YORULMAZ   •  

    Güzel bir makale olmuş. Arşiv de bulunması gerekir.

  8. http://www.sessizcrew.com/   •  

    Teşekkürler 🙂

  9. LiBeRalx   •  

    Enes kardeşim senden bi konuda yardım isteyeceğim, Ben Bloguma makale yazınca resimde ekliyorum fakat resmin ürezine tıklama link'i var ben bundan rahatsız oluyorum, Resmin üzerine tıklama link'ini etkisiz hale getiremezmiyiz?

  10. Enes İLHAN   •  

    @LiBeRalx,
    Resme link vermek istemiyorsanız şu kodu deneyin:

    <img src="Resim Adresi" style="display: block; margin: 0px auto 10px; text-align: center;" title="Resim Açıklaması"/>

  11. Anasını Satayım Blog   •  

    DynamicDrive gerçekten bu tür javascript kodları için harikulade bir kaynak.

  12. LiBeRalx   •  

    Enes Kardeşim Saol Harikulade oldu…
    Bir şey daha söyleyeceğim ben bir blog sitesi daha açıcamda senin sitenin tasarım kodunu benimle paylaşabilirmisin. (bir başlıkta tasarımı isteyen olursa veririm demişsinde tasarım hoşuma gitti)

  13. Enes İLHAN   •  

    @LiBeRalx,
    Sanırım yanlış okumuşsunuz. Ben bu tasarımı değil bundan önceki temayı isteyen olursa paylaşırım demiştim.

  14. Kaan Gökçe   •  

    Enes güzel olmuş bir bakıma farklı ve çeşitli görünüm vermek isteyenler için tavsiye edilebilir kullanışlı olmuş kerata 🙂

  15. Anonymous   •  

    paylaş bakalım nasıl bir şey miş

  16. eliza p.   •  

    Enes bey çok güzel bir eklenti imiş elinize sağlık.. Bir de bir şey isteyeceğim: Panaroma diye adlandırdığınız tab menünün kotlarını anlatabilir misiniz? Anlatırsanız çok sevinirim..

    Baki Selamlar

  17. Hakan Yılmaz   •  

    Merak ettiğim bir konuydu,ileride uygulamayı düşünüyorum,teşekkürler..

  18. ßarın   •  

    Bu sayacı bir türlü uygulayamadım yardımcı olabilecek varmı?

  19. Enes İLHAN   •  

    @ßarın,
    Şu anda yapmış gibi gözüküyorsunuz.

  20. boq gibi   •  

    enes siten ne desem yalan olur… ama yukarıdaki gibi…. hohooho

  21. Enes İLHAN   •  

    @boq gibi,
    İsmini yazmışsın tanıştığımıza memnun oldum bende enes !

  22. Tık Ötesi   •  

    Paylaşım için teşekkürler enes.

  23. Kalpsiz   •  

    Peki bunu wordpress'e göre ayarlayabilrmiyiz???

  24. Enes İLHAN   •  

    WordPress'i tam anlamıyla bilemediğim için şimdilik bir şey söylemek yanlış olur diye düşünüyorum. Ama wordpress kontrol panelinde bu kodları uygun yere eklerseniz olacağını düşünüyorum çünkü daha önce birisi wordpress'e uygulamıştı. Kolay gelsin..

  25. mustafa berkan   •  

    bu kodlar işe yaramadı dedigin gibi yaptım olmuyor bir gozat 🙂

  26. Emre   •  

    Arkadaşım, kodlarını denedim oluyor, ama biraz ecnebi işi oldu, çünkü alttaki kodu kopyaladım, sayfamda 2 tane birden sayaç oldu, birisi belirlediğim tarihe geri sayıyor diğeri ise christmas a doğru sayıyor. Benim amacım birşeyin gerçekleşmesini istediğim bir tarihe doğrus saydırmak. Christmas’ı iptal ederek tekrar paylaşabilirsen sevinirim. Java bilmiyorum…

  27. Emre   •  

    Christmas olayını hallettim. Ancak 2 tane farklı font ve temada sayaç oluştu. İkisi de aynı tarihe geri sayıyor…

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.