Blogger Tarih Sayacı Eklentisi
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 :P 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.