طريقة اضافة ساعة رقمية الى المدونة بأحدث تصميم لعام 2014

بسم الله الرحمن الرحيم

 ساعة جميلة لموقعك بتقنية الجافاسكربت والـ 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> 

مبروك عليك اضافة الاداة الجميلة .

رجاء اذا اعجبك الموضوع مش قليل عليا لو ضغط على الرابط التالى:- اضغط هنا