اكواد ساعات html للمواقع لمدونات بلوجر إضافة الوقت في HTML

إذا كنت تبحث عن كيفية اضافة اكواد ساعات html للمواقع لمدونات بلوجر ، أو كيفية إضافة الوقت في HTML فأنت في المكان الصحيح. حيث سنقدم لك في هذه المقالة المميزة والحصرية على موقعنا كاريزما نيوز، جميع الشفرات الهامة لمدونة البلوجر الخاصة بك وهي شفرة الساعة الرقمية الصغيرة والساعة الدائرية لإظهار الوقت على المدونة، بشكلها المميز والتي تعمل بجميع التوقيتات العالمية.
فقط الصق الكود في المكان المحدد له داخل التصميم، وستقوم الساعة بالعمل بحسب التوقيت المحلي الذي تعيش فيه، تابع شرح كيفية إضافة ساعة لمدونة بلوجر احترافية بكل سهولة.

أهمية إضافة الوقت في HTML للمواقع

هل تعلم لماذا يرغب العديد من أصحاب المدونات بإضافة الوقت في بلوجر أو إضافة ساعة للمدونة HTML code for clock ، لعل السبب الكبير هو من أجل جعل المدونة أكثر احترافية وجميلة، وأيضاً لبث الحياة فيها من خلال كود ساعة رقمية html بسيط.

من ضمن قائمة الأكواد المميزة هذه تلك الخاصة بالتقويم مثل التوقيت والتاريخ. وربما أنك قد لاحظت أثناء تصفحك للمواقع الأجنبية أنهم يضعون ساعة فلاشية ، أو ربما تجد تقويم بالقائمة الجانبية للموقع.

ونحن نرجح الاحتمال الأكبر من ذلك وهو تحسين تجربة الزائر في المدونة أو الموقع، مما يؤدي إلى خفض نسبة معدل الارتداد في موقعك أو مدونتك وبالتالي تحسين ظهورها في محركات البحث وببساطة أكثر تخيل نفسك مكان الزائر الذي دخل إلى إحدى مدوناتك وبدأ بالقراءة، أليس من الجيد أن يرى ساعة جميلة في الجزء الجانبي من المقالة.

نعم فمن الجيد جداً أن يرى الزئر التوقيت المحلي الخاص به أثناء تصفحه للانترنت ليكون على اطلاع بفترة بقاءه داخل شبكة الإنترنت. ومن المعروف أن البقاء لفترات طويلة أمام شاشة الكمبيوتر أو الهاتف المحمول، قد يشكل ضرراً على الدماغ والعينين.

ومن هذا المنطلق عزيزي الزائر قمنا بكتابة هذه المجموعة الفريدة من اكواد ساعات html للمواقع لمدونات بلوجر. حيث يمكنك من خلالها إضافة الوقت في HTML لمدونتك بكل سهولة وبشكل احترافي وجميل.

اكواد ساعات html للمواقع والمدونات بلوجر

كود الساعة الدائرية بشكل احترافي يمكنك إضافة هذا الكود في أي مكان داخل مدونة بلوجر وننصح بوضعه في القسم الجانبي للمدونة ليظهر بشكل أكثر احترافية.

اكواد ساعات html للمواقع لمدونات بلوجر إضافة الوقت في HTML
اكواد ساعات html

كود الساعة الدائرية انسخ هذا الكود وضعه في المكان المناسب داخل قسم التنسيق في المدونة الخاصة بك:
<canvas id="canvas" width="280" height="280"
style="background-color:#333">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}
function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}
function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

كود ساعة رقمية احترافي وجميل للمدونة الخاصة بك حيث أن هذا هو كود الساعة بالتوقيت المحلي بشكل احترافي، يمكن الزائر من تغيير التوقيت لمنطقة زمنية أخرى.

اكواد ساعات html للمواقع لمدونات بلوجر إضافة الوقت في HTML
إضافة الوقت في HTML

كود الساعة الرقمية
<form name="where">
 <table border="0" width="200" cellspacing="0" cellpadding="3">
<tr>
    <td width="100%">
<select name="city" size="1" onchange="updateclock(this);"> 
<option selected />التوقيت المحلي
<option value="3" />السعودية
<option value="4" />الإمارات
<option value="3" />الكويت
<option value="3" />لبنان
<option value="4" />عمان
<option value="3" />قطر
<option value="3" />مصر
<option value="0" />المغرب
<option value="1" />تونس
<option value="3" />السودان
</select>
</td>
  </tr>
<tr>
    <td width="100%">
<script language="JavaScript">
/*
Drop Down World Clock- By JavaScript Kit (http://www.javascriptkit.com)
Portions of code by Kurt @ http://www.btinternet.com/~kurt.grigg/javascript
This credit notice must stay intact
Visit our site at http://www.star28.com/ for more code
*/
if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')
zone=0;
isitlocal=true;
ampm='';
function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}
function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();
hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2
var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}
setTimeout('WorldClock()',1000);
}
window.onload=WorldClock
//-->
</script>
<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>
</td></tr>
</table>
</form>

اكواد ساعات html لمدونات بلوجر

ستجد في هذه الفقرة عزيزي الزائر أفضل أكواد ساعات html للمواقع لمدونات بلوجر، ولإضافة الأكواد بالشكل الصحيح وتجنب حدوث أخطاء برمجية اتبع التعليمات التالية:
  1. سجل الدخول إلى مدونتك في بلوجر .
  2. انتقل إلى الإعدادات ثم التنسيق ثم حدد المكان الذي تريد وضع الساعة به .
  3. الآن قم بالضغط على إضافة أداة واختر HTML/JavaScript .
  4. قم نسخ كود الساعة ولصقه في الأداة واضغط على حفظ .
الآن ندعكم مع بعض أشكال الساعات والأكواد الأخرى الخاصة بها اختر منها الذي يناسبك:

شكل الساعة الأولى

كل جديد وحصري

الكود

<embed src="https://sites.google.com/site/conda3ianllkhir2/home/%D8%AE%D9%85%D8%A7%D8%B3%D9%8A%D8%A9.swf?TimeZone=GMT0930&"  width="150" height="150" wmode="transparent" type="application/x-shockwave-flash">

شكل الساعة الثانية

كل جديد وحصري

الكود

<embed src="https://sites.google.com/site/conda3ianllkhir2/home/%D8%AF%D8%A7%D8%A6%D8%B1%D8%A9%20%D8%A7%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A9.swf?TimeZone=GMT0930&"  width="150" height="150" wmode="transparent" type="application/x-shockwave-flash">

شكل الساعة الثالثة

كل جديد وحصري

الكود

<iframe src="http://free.timeanddate.com/clock/i7484m58/n1998/szw110/szh110/hocddd/hbw0/hfc000/cf100/hgr0/fav0/fiv0/mqcfff/mql15/mqw8/mqd100/mhcfff/mhl15/mhw4/mhd100/mmv0/hhcff9/hmcff9" frameborder="0" width="110" height="110"></iframe>

شكل الساعة الرابعة

كل جديد وحصري

الكود

<iframe src="http://free.timeanddate.com/clock/i7484uqk/n1998/szw110/szh110/hoc000/hbw0/hfc09f/cf100/hnc07c/hwc000/facfff/fnu2/fdi76/mqcfff/mqs4/mql18/mqw4/mqd60/mhcfff/mhs4/mhl5/mhw4/mhd62/mmv0/hhcfff/hhs1/hhb10/hmcfff/hms1/hmb10/hscfff/hsw3" frameborder="0" width="110" height="110"></iframe>


ملاحظة: يمكنك التحكم في حجم الساعات في طولها وعرضها من خلال التعديل على الطول height والعرض width .

كان هذا كل شيء عن اكواد ساعات html للمواقع و لمدونات بلوجر إذا كان لديكم أي إضافات أخرى على هذا الموضوع، وتريدون مشاركتها معنا، فيرجى تركها في قسم التعليقات أسفل هذه المشاركة. أو التواصل معنا من خلال صفحة اتصل بنا.

مصادر إضافية:

للحصول على المزيد من الشروحات الخاصة بالمدونات شاهد قسم بلوجر الخاص بموقعنا.

أحدث أقدم