Enes İLHAN\ Blogger Tarih Sayacı Eklentisi

Blogger İpuçları 27 yorum 15.473 19 Mart 2010

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.

Yorumlar ;

cekob
19 Mart 2010 - 09:40:52

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

Mahsun ÖNDER
19 Mart 2010 - 13:29:28

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

Enes İLHAN
19 Mart 2010 - 15:20:29

@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.

Yunus Yalçınkaya
20 Mart 2010 - 08:25:30

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

BilgiBankan
20 Mart 2010 - 10:14:10

Sevdim bunu bir ara uygulayacağım 🙂

Metin
20 Mart 2010 - 19:29:35

güzel eklenti, uyguladım bile 😀

Sinan YORULMAZ
22 Mart 2010 - 08:23:02

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

http://www.sessizcrew.com/
22 Mart 2010 - 13:28:22

Teşekkürler 🙂

LiBeRalx
23 Mart 2010 - 14:26:39

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?

Enes İLHAN
24 Mart 2010 - 01:29:21

@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ı"/>

Anasını Satayım Blog
24 Mart 2010 - 09:33:43

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

LiBeRalx
24 Mart 2010 - 15:09:20

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)

Enes İLHAN
25 Mart 2010 - 01:02:15

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

Kaan Gökçe
26 Mart 2010 - 09:04:49

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 🙂

Anonymous
26 Mart 2010 - 13:14:33

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

eliza p.
2 Nisan 2010 - 10:55:43

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

Hakan Yılmaz
5 Nisan 2010 - 17:23:48

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

ßarın
11 Nisan 2010 - 20:09:03

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

Enes İLHAN
13 Nisan 2010 - 01:20:02

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

boq gibi
16 Nisan 2010 - 17:41:55

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

Enes İLHAN
21 Nisan 2010 - 21:58:12

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

Tık Ötesi
11 Mayıs 2010 - 17:07:06

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

Kalpsiz
12 Ekim 2010 - 21:16:30

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

Enes İLHAN
14 Ekim 2010 - 17:43:24

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..

14 Ekim 2011 - 08:16:44

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

Emre
16 Ekim 2011 - 22:19:31

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…

Emre
16 Ekim 2011 - 22:30:40

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