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

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

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل

Mohamed Dwedar
Mohamed Dwedar

ذكر
عدد المساهمات : 538
نقاط : 604
تقييم العضو : 0
تاريخ الميلاد : 16/08/1990
العمـر : 33
http://www.raltatwer.com/

مُساهمةMohamed Dwedar الثلاثاء مارس 04, 2014 11:12 am

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

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

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


ساعة جميلة لموقعك بتقنية الجافاسكربت والـ 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>
 
AsheK WalhaN
AsheK WalhaN
مؤسس المنتدى
مؤسس المنتدى
ذكر
عدد المساهمات : 5608
نقاط : 18641
تقييم العضو : 44
تاريخ الميلاد : 21/03/1995
العمـر : 29

مُساهمةAsheK WalhaN الثلاثاء مارس 04, 2014 11:24 am

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

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى