Sie sind nicht angemeldet.

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

Seyyah20

Fortgeschrittener

  • »Seyyah20« ist männlich
  • »Seyyah20« ist der Autor dieses Themas

Beiträge: 324

Registrierungsdatum: 26. Januar 2014

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

  • 1023
  • Nachricht senden

1

Mittwoch, 14. Januar 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« hat folgende Bilder angehängt:
  • Saat-1.png
  • Saat-2.png
  • Saat-3.png

Ähnliche Themen