Giriş yapmadınız.

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

Sayın ziyaretçi, AllaTurkaa sitesine hoş geldiniz. Eğer buraya ilk ziyaretiniz ise lütfen yardım bölümünü okuyunuz. Böylece bu sitenin nasıl çalıştığı konusunda ayrıntılı bilgilere ulaşabilirsiniz. Eğer sitenin tüm olanaklarından faydalanmak istiyorsanız, kayıt yaptırmayı düşünmelisiniz. Bunun için kayıt formunu kullanabilir ya da bu bağlantıya giderek kayıt işlemi hakkında daha fazla bilgi alabilirsiniz. Eğer önceden kayıt yaptırdıysanız buradan giriş yapabilirsiniz.

Seyyah20

Orta Düzey

  • "Seyyah20" bir erkek
  • Konuyu başlatan "Seyyah20"

Mesajlar: 321

Kayıt tarihi: Jan 26th 2014

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

  • 1023
  • Özel mesaj gönder

1

Wednesday, 14.01.2026, 15:03

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 belirtilen resmi ekledi:
  • Saat-1.png
  • Saat-2.png
  • Saat-3.png

Benzer konular