إضافة ساعة أحترافيه رقمية لمدونتك

ساعة جميلة لموقعك بتقنية الجافاسكربت والـ css الساعة بالفعل جميلة وهي تعتمد في الاساس على توقيت الكمبيوتر نفسه , فهي تأخذ توقيت الكمبيوتر وتضيفه اليها .
ملاحظة : الساعة ماينفع تضعها في السايدبار لانها حجمها كبير , ولاكن تستطيع ذالك ببعض التعديلات البسيطه .
انسب مكان لها تحت المشاركات او فوقها , او اسفل الفوتر اذا بتريد .

ادخل مدونتك .
التخطيط .
اضافة اداة html/javascript .
يفضل وضعها فوق المشاركات او اسفلها .
انسخ والصق هذا الكود :

رمز Code:






















*{margin:0;padding:0;}#clock{font:12px tahoma;width:370px;padding:40px;margin:20px auto;position:relative;}#clock:after{content:'';po sition:absolute;width:400px;height:20px;border-radius:100%;left:50%;margin-left:-200px;bottom:2px;z-index:-1;}#clock .display{text-align:center;padding:40px 20px 20px;border-radius:6px;position:relative;height:54px;}#clock.l ight{direction: ltr;
text-align: left;background-color:#f3f3f3;color:#272e38;}#clock.light:after{bo x-shadow:0 4px 10px rgba(0,0,0,0.15);}#clock.light .digits div span{background-color:#272e38;border-color:#272e38;}#clock.light .digits div.dots:before,#clock.light .digits div.dots:after{background-color:#272e38;}#clock.light .alarm{background:url('https://lh3.googleusercontent.com/-Xg0nyEaj4os/Uwj3KOi36TI/AAAAAAAAGGU/QElQhcu4BM8/s16-no/alarm_light.jpg');}#clock.light .display{background-color:#dddddd;box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;}#clock.dark{background-color:#272e38;color:#cacaca;}#clock.dark:after{box-shadow:0 4px 10px rgba(0,0,0,0.3);}#clock.dark .digits div span{background-color:#cacaca;border-color:#cacaca;}#clock.dark .alarm{background:url('https://lh4.googleusercontent.com/-_Lk9J7Py4MA/Uwj3KIS4gQI/AAAAAAAAGGI/2Y1a0pOLsLA/s16-no/alarm_dark.jpg');}#clock.dark .display{background-color:#0f1620;box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;}#clock.dark .digits div.dots:before,#clock.dark .digits div.dots:after{background-color:#cacaca;}#clock .digits div{text-align:left;position:relative;width:28px;height:50p x;display:inline-block;margin:0 4px;}#clock .digits div span{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=0)";filter:alpha(opacity=0);opacity:0;positi on:absolute;transition:0.25s;}#clock .digits div span:before,#clock .digits div span:after{content:'';position:absolute;width:0;he ight:0;border:5px solid transparent;}#clock .digits .d1{height:5px;width:16px;top:0;left:6px;}#clock .digits .d1:before{border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}#clock .digits .d1:after{border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}#clock .digits .d2{height:5px;width:16px;top:24px;left:6px;}#cloc k .digits .d2:before{border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}#clock .digits .d2:after{border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}#clock .digits .d3{height:5px;width:16px;top:48px;left:6px;}#cloc k .digits .d3:before{border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}#clock .digits .d3:after{border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}#clock .digits .d4{width:5px;height:14px;top:7px;left:0;}#clock .digits .d4:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}#clock .digits .d4:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}#clock .digits .d5{width:5px;height:14px;top:7px;right:0;}#clock .digits .d5:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}#clock .digits .d5:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}#clock .digits .d6{width:5px;height:14px;top:32px;left:0;}#clock .digits .d6:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}#clock .digits .d6:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}#clock .digits .d7{width:5px;height:14px;top:32px;right:0;}#clock .digits .d7:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}#clock .digits .d7:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}#clock .digits div.one .d5,#clock .digits div.one .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.two .d1,#clock .digits div.two .d5,#clock .digits div.two .d2,#clock .digits div.two .d6,#clock .digits div.two .d3{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.three .d1,#clock .digits div.three .d5,#clock .digits div.three .d2,#clock .digits div.three .d7,#clock .digits div.three .d3{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.four .d5,#clock .digits div.four .d2,#clock .digits div.four .d4,#clock .digits div.four .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.five .d1,#clock .digits div.five .d2,#clock .digits div.five .d4,#clock .digits div.five .d3,#clock .digits div.five .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.six .d1,#clock .digits div.six .d2,#clock .digits div.six .d4,#clock .digits div.six .d3,#clock .digits div.six .d6,#clock .digits div.six .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.seven .d1,#clock .digits div.seven .d5,#clock .digits div.seven .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.eight .d1,#clock .digits div.eight .d2,#clock .digits div.eight .d3,#clock .digits div.eight .d4,#clock .digits div.eight .d5,#clock .digits div.eight .d6,#clock .digits div.eight .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.nine .d1,#clock .digits div.nine .d2,#clock .digits div.nine .d3,#clock .digits div.nine .d4,#clock .digits div.nine .d5,#clock .digits div.nine .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.zero .d1,#clock .digits div.zero .d3,#clock .digits div.zero .d4,#clock .digits div.zero .d5,#clock .digits div.zero .d6,#clock .digits div.zero .d7{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .digits div.dots{width:5px;}#clock .digits div.dots:before,#clock .digits div.dots:after{width:5px;height:5px;content:'';pos ition:absolute;left:0;top:14px;}#clock .digits div.dots:after{top:34px;}#clock .alarm{width:16px;height:16px;bottom:20px;backgrou nd:url('https://lh3.googleusercontent.com/-Xg0nyEaj4os/Uwj3KOi36TI/AAAAAAAAGGU/QElQhcu4BM8/s16-no/alarm_light.jpg');position:absolute;-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=20)";filter:alpha(opacity=20);opacity:0.2;}# clock .alarm.active{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .weekdays{font-size:12px;position:absolute;width:100%;top:10px;le ft:0;text-align:center;}#clock .weekdays span{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=20)";filter:alpha(opacity=20);opacity:0.2;pa dding:0 10px;}#clock .weekdays span.active{-ms-filter:"progidXImageTransform.Microsoft.Alpha(Op acity=100)";filter:alpha(opacity=100);opacity:1;}# clock .ampm{position:absolute;bottom:20px;right:20px;fon t-size:12px;}


المصدر: مدونة إحترف