You are not logged in.

Sitelerinize bloglarınıza üç dilde şık saat modeli

Dear visitor, welcome to AllaTurkaa. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Seyyah20

Intermediate

  • "Seyyah20" is male
  • "Seyyah20" started this thread

Posts: 321

Date of registration: Jan 26th 2014

Location: DENİZLİ/Gönlünüze ektiğiniz her güzellik, bir gün size bereketli bir hasat olarak dönecektir.

  • 1023
  • Send private message

1

Wednesday, January 14th 2026, 3:03pm

Sitelerinize bloglarınıza üç dilde şık saat modeli

Değerli Allaturkaa üyeleri ve ziyaretçiler,

Başka bir sitede bulduğum ve sizlerin de faydalanmasını istediğim bu güzel saat modelini, Romen Rakamlı Saati Latin ve Arapça rakamlarına çevirerek ve içine özel yazı alanı ekleyerek yeniden düzenleyerek istifadenize sunuyorum.


Her siteye uyumlu, reklam içermeyen ve saydam yapısıyla oldukça şık duran bu saati sayfalarınızda gönül rahatlığıyla kullanabilirsiniz. Üstelik saat üzerindeki yazıyı, renkleri ve ölçüleri kendi zevkinize göre kolayca değiştirebilirsiniz.

Saati Nasıl Özelleştirebilirsiniz?
Kodu sitenize eklemeden önce şu küçük değişiklikleri yapabilirsiniz:

İsim Değiştirme: Kod içerisindeki <div id="forumText">Allaturkaa Forum</div> satırına kendi sayfa isminizi yazabilirsiniz.

Renk Ayarları: CSS kısmında #forumText (orta yazı) ve #romanNumbers span (rakamlar) bölümlerindeki color kodlarını değiştirerek istediğiniz rengi verebilirsiniz.

width:300px;
height:300px; ölçülerini buradan değiştirebilirsiniz.

Her ihtimale karşı bu üç resmi kendi sunucunuzda yada blogspot hesabınıza yükleyerek resimlerin silinmesine karşı önlem alınız.

<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="hHand" class="hand">
<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="mHand" class="hand">
<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="sHand" class="hand">


TÜRKÇE LATİN HARFLİ Saat Kodları

HTML

HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<style>
/* ================== TÜRKÇE SAAT MODÜLÜ ================== */
#romanClockBlogger{
  position: relative;
  margin: 20px auto;
  width:300px;
  height:300px;
  z-index:9999;
}
.hand{position:absolute;transform-origin:12px 50%;pointer-events:none;z-index: 10;}
#hHand{width:100px;left:140px;top:140px;}
#mHand{width:150px;left:142px;top:135px;}
#sHand{width:110px;left:140px;top:140px;opacity:.85}

/* Orta Yazı Ayarları */
#forumText {
  position: absolute;
  top: 65%; 
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #e6dcc6; /* Buradan yazı rengini değiştirebilirsiniz */
  opacity: 0.6;
  white-space: nowrap;
  text-shadow: 1px 1px 2px #000;
  z-index: 1;
}

#clockCenter{
  position:absolute;left:150px;top:150px;width:22px;height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#f0e0b0,#7a5321,#000);
  z-index: 20;
}

#romanNumbers span{
  position:absolute;font-family:"Times New Roman";
  font-size:26px;font-weight:bold;
  color:#e6dcc6; /* Buradan rakam rengini değiştirebilirsiniz */
  text-shadow:1px 1px 3px #000;
}
</style>

<div id="romanClockBlogger">
  <div id="forumText">Allaturkaa Forum</div>
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="hHand" class="hand">
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="mHand" class="hand">
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="sHand" class="hand">
  <div id="clockCenter"></div>
  <div id="romanNumbers"></div>
</div>

<script>
const rakamlar = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
const c = document.getElementById("romanNumbers");

rakamlar.forEach((n, i) => {
  const a = (i * 30 - 90) * Math.PI / 180;
  const x = 150 + 115 * Math.cos(a); 
  const y = 150 + 115 * Math.sin(a);
  const s = document.createElement("span");
  s.innerText = n;
  s.style.left = x + "px";
  s.style.top = y + "px";
  s.style.transform = `translate(-50%, -50%) rotate(0deg)`;
  c.appendChild(s);
});

function updateClock() {
  const d = new Date();
  const h = d.getHours() % 12;
  const m = d.getMinutes();
  const s = d.getSeconds();
  document.getElementById("hHand").style.transform = `rotate(${h * 30 + m / 2}deg)`;
  document.getElementById("mHand").style.transform = `rotate(${m * 6 + s / 10}deg)`;
  document.getElementById("sHand").style.transform = `rotate(${s * 6}deg)`;
}
setInterval(updateClock, 1000);
updateClock();
</script>

-------------------------------------------------------------------------------------------------------------
ARAPÇA KODLAR

HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<style>
/* ================== ARAPÇA RAKAMLI SAAT ================== */
#romanClockBlogger{
  position: relative;
  margin: 20px auto;
  width:300px;
  height:300px;
  z-index:9999;
}
.hand{position:absolute;transform-origin:12px 50%;pointer-events:none;z-index: 10;}
#hHand{width:100px;left:140px;top:140px;}
#mHand{width:150px;left:142px;top:135px;}
#sHand{width:110px;left:140px;top:140px;opacity:.85}

/* Orta Yazı Ayarları */
#forumText {
  position: absolute;
  top: 65%; 
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #e6dcc6;
  opacity: 0.6;
  white-space: nowrap;
  text-shadow: 1px 1px 2px #000;
  z-index: 1;
}

#clockCenter{
  position:absolute;left:150px;top:150px;width:22px;height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#f0e0b0,#7a5321,#000);
  z-index: 20;
}

#romanNumbers span{
  position:absolute;
  font-family: "Arial", sans-serif; /* Arapça rakamlar için düzgün bir font */
  font-size:28px; /* Arapça karakterler biraz daha büyük durması için artırıldı */
  font-weight:bold;
  color:#e6dcc6;
  text-shadow: 1px 1px 3px #000;
}
</style>

<div id="romanClockBlogger">
  <div id="forumText">Allaturkaa Forum</div>
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="hHand" class="hand">
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="mHand" class="hand">
  <img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="sHand" class="hand">
  <div id="clockCenter"></div>
  <div id="romanNumbers"></div>
</div>

<script>
// Arapça Rakam Dizisi (١٢: 12, ١: 1, ٢: 2...)
const rakamlar = ["١٢", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩", "١٠", "١١"];
const c = document.getElementById("romanNumbers");

rakamlar.forEach((n, i) => {
  const a = (i * 30 - 90) * Math.PI / 180;
  const x = 150 + 115 * Math.cos(a); 
  const y = 150 + 115 * Math.sin(a);
  const s = document.createElement("span");
  s.innerText = n;
  s.style.left = x + "px";
  s.style.top = y + "px";
  s.style.transform = `translate(-50%, -50%) rotate(0deg)`;
  c.appendChild(s);
});

function updateClock() {
  const d = new Date();
  const h = d.getHours() % 12;
  const m = d.getMinutes();
  const s = d.getSeconds();
  document.getElementById("hHand").style.transform = `rotate(${h * 30 + m / 2}deg)`;
  document.getElementById("mHand").style.transform = `rotate(${m * 6 + s / 10}deg)`;
  document.getElementById("sHand").style.transform = `rotate(${s * 6}deg)`;
}
setInterval(updateClock, 1000);
updateClock();
</script>

--------------------------------------------------------------------------------------------------

ROMEN RAKAMLI KODLAR

HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<style>
/* ================== ROMAN SAAT ================== */
#romanClockBlogger{
  position: absolute;   /* ?? fixed yerine */
  top: 100px;
  left: 100px;
  width:300px;
  height:300px;
  z-index:9999;
}
.hand{position:absolute;transform-origin:12px 50%;pointer-events:none;}
#hHand{width:100px;left:140px;top:140px;}
#mHand{width:150px;left:142px;top:135px;}
#sHand{width:110px;left:140px;top:140px;opacity:.85}
#clockCenter{
  position:absolute;left:150px;top:150px;width:22px;height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#f0e0b0,#7a5321,#000);
}
#romanNumbers span{
  position:absolute;font-family:"Times New Roman";
  font-size:26px;font-weight:bold;color:#e6dcc6;
  text-shadow:1px 1px 3px #000;
}
</style>

<!-- ================== SAAT ================== -->
<div id="romanClockBlogger">
<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="hHand" class="hand">
<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="mHand" class="hand">
<img src="https://i.ibb.co/RTNCyFRj/Chat-GPT-mage-8-Oca-2026-20-35-21-1.png" id="sHand" class="hand">
<div id="clockCenter"></div>
<div id="romanNumbers"></div>
</div>



<script>
const roman=["XII","I","II","III","IV","V","VI","VII","VIII","IX","X","XI"];
const c=document.getElementById("romanNumbers");
roman.forEach((n,i)=>{
  const a=(i*30-90)*Math.PI/180;
  const x=150+130*Math.cos(a);
  const y=150+130*Math.sin(a);
  const s=document.createElement("span");
  s.innerText=n;
  s.style.left=x+"px";
  s.style.top=y+"px";
  s.style.transform=`translate(-50%,-50%) rotate(${i*30}deg)`;
  c.appendChild(s);
});

function updateClock(){
  const d=new Date();
  const h=(d.getUTCHours()+3)%12;
  const m=d.getUTCMinutes();
  const s=d.getUTCSeconds();
  hHand.style.transform=`rotate(${h*30+m/2}deg)`;
  mHand.style.transform=`rotate(${m*6+s/10}deg)`;
  sHand.style.transform=`rotate(${s*6}deg)`;
}
setInterval(updateClock,1000);updateClock();
</script>
Seyyah20 has attached the following images:
  • Saat-1.png
  • Saat-2.png
  • Saat-3.png

Similar threads