[Blogger] إضافة ساعة أحترافيه رقمية لموقعك

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

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

الكود:

<div id="clock" class="light">
 <div class="display">
 <div class="weekdays"></div>
 <div class="ampm"></div>
 <div class="alarm"></div>
 <div class="digits"></div>
 </div>
 </div>
 <!-- JavaScript Includes -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="https://jetara.googlecode.com/svn/trunk/moment.min.js"></script>

 <script>
$(function(){var
clock=$('#clock'),alarm=clock.find('.alarm'),ampm=clock.find('.ampm');var
 digit_to_name='zero one two three four five six seven eight
nine'.split(' ');var digits={};var
positions=['h1','h2',':','m1','m2',':','s1','s2'];var
digit_holder=clock.find('.digits');$.each(positions,function(){if(this==':'){digit_holder.append('<div
 class="dots">')}else{var pos=$('<div>');for(var
i=1;i<8;i++){pos.append('<span
class="d'+i+'">')}digits[this]=pos;digit_holder.append(pos)}});var
weekday_names='الإثنين الثلاثاء الأربعاء الخميس الجمعة السبت
الأحد'.split('
'),weekday_holder=clock.find('.weekdays');$.each(weekday_names,function(){weekday_holder.append('<span>'+this+'</span>')});var
 weekdays=clock.find('.weekdays span');(function update_time(){var
now=moment().format("hhmmssdA");digits.h1.attr('class',digit_to_name[now[0]]);digits.h2.attr('class',digit_to_name[now[1]]);digits.m1.attr('class',digit_to_name[now[2]]);digits.m2.attr('class',digit_to_name[now[3]]);digits.s1.attr('class',digit_to_name[now[4]]);digits.s2.attr('class',digit_to_name[now[5]]);var
 
dow=now[6];dow--;if(dow<0){dow=6}weekdays.removeClass('active').eq(dow).addClass('active');ampm.text(now[7]+now[8]);setTimeout(update_time,1000)})();$('a.button').click(function(){clock.toggleClass('light
 dark')})});
 </script>
 <!-- The main CSS file -->
<style>*{margin:0;padding:0;}#clock{font:12px
tahoma;width:370px;padding:40px;margin:20px
auto;position:relative;}#clock:after{content:'';position: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.light{direction:
 ltr;
text-align:
left;background-color:#f3f3f3;color:#272e38;}#clock.light:after{box-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:50px;display:inline-block;margin:0
 4px;}#clock .digits div
span{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;position:absolute;transition:0.25s;}#clock
 .digits div span:before,#clock .digits div
span:after{content:'';position:absolute;width:0;height: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;}#clock .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;}#clock .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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock
 .digits div.seven .d1,#clock .digits div.seven .d5,#clock .digits
div.seven
.d7{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=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:'';position:absolute;left:0;top:14px;}#clock
 .digits div.dots:after{top:34px;}#clock
.alarm{width:16px;height:16px;bottom:20px;background:url('https://lh3.googleusercontent.com/-Xg0nyEaj4os/Uwj3KOi36TI/AAAAAAAAGGU/QElQhcu4BM8/s16-no/alarm_light.jpg');position:absolute;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);opacity:0.2;}#clock
 
.alarm.active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock
 
.weekdays{font-size:12px;position:absolute;width:100%;top:10px;left:0;text-align:center;}#clock
 .weekdays
span{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20);opacity:0.2;padding:0
 10px;}#clock .weekdays
span.active{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;}#clock
 
.ampm{position:absolute;bottom:20px;right:20px;font-size:12px;}</style>