فقط الصق الكود في المكان المحدد له داخل التصميم، وستقوم الساعة بالعمل بحسب التوقيت المحلي الذي تعيش فيه، تابع شرح كيفية إضافة ساعة لمدونة بلوجر احترافية بكل سهولة.
ملاحظة: يمكنك التحكم في حجم الساعات في طولها وعرضها من خلال التعديل على الطول height والعرض width .
أهمية إضافة الوقت في HTML للمواقع
هل تعلم لماذا يرغب العديد من أصحاب المدونات بإضافة الوقت في بلوجر أو إضافة ساعة للمدونة HTML code for clock ، لعل السبب الكبير هو من أجل جعل المدونة أكثر احترافية وجميلة، وأيضاً لبث الحياة فيها من خلال كود ساعة رقمية 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 |
كود الساعة الرقمية
<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 للمواقع لمدونات بلوجر، ولإضافة الأكواد بالشكل الصحيح وتجنب حدوث أخطاء برمجية اتبع التعليمات التالية:
- سجل الدخول إلى مدونتك في بلوجر .
- انتقل إلى الإعدادات ثم التنسيق ثم حدد المكان الذي تريد وضع الساعة به .
- الآن قم بالضغط على إضافة أداة واختر HTML/JavaScript .
- قم نسخ كود الساعة ولصقه في الأداة واضغط على حفظ .
الآن ندعكم مع بعض أشكال الساعات والأكواد الأخرى الخاصة بها اختر منها الذي يناسبك:
شكل الساعة الأولى
الكود
<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>
كان هذا كل شيء عن اكواد ساعات html للمواقع و لمدونات بلوجر إذا كان لديكم أي إضافات أخرى على هذا الموضوع، وتريدون مشاركتها معنا، فيرجى تركها في قسم التعليقات أسفل هذه المشاركة. أو التواصل معنا من خلال صفحة اتصل بنا.
مصادر إضافية:
للحصول على المزيد من الشروحات الخاصة بالمدونات شاهد قسم بلوجر الخاص بموقعنا.
تعليقات