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