عدد مشاهدات الموضوع:
أهلا وسهلا بكم زوار مدونة أبو اياد ,اليوم سنناقش موضوعا لمحبي التغيير فهو يستهدف كل مُدون يحب التجديد داخل مدونته من حيث الشكل العام. كما في العنوان إضافتنا اليوم ستقوم بتغيير خلفية مدونتك على بلوجر حسب توقيت حاسوبك؟ كيف ذلك! ستقوم الإضافة بتغيير الخلفية كل مثلا ساعتين أو ثلاثة فهى سهلة التعديل بما يناسب رغبتك فى ظهور خلفية ما فترة معينة وتغييرة بعد فترة أخرى. يمكنك معاينتها من خلال مدونة أبو إياد التجريبية ولكن ستنتظر كثيرا لتتغير الخلفية :) . يمكنك تجربتها فهى سهلة التثبيت. فقط تابعنا
لأضافة الكود لمدونتك فقط تحتاج لتسجيل دخولك ثم تذهب الى التخطيط Layout بعدها تضغط اضافة أداة ثم HTML/Javascript.
قم بنسخ الكود التالى في المحتوى الخاص ب HTML/Javascript ودع العنوان فارغا.
يمكنك تغير ما هو معلم بالالوان بما يناسبك أو يناسب مدونتك
اللون الاصفر الساعة (من 1 الى 24) ومنها تتحكم فى عدد ساعات ظهور الخلفية.اللون الاحمر لون الخلفية وهي ضرورية اذا كان الصورة من نوع png اي شفافة ويمكنك الإستعانة بمولد الألوان لمدونة أبو إياد.
اللون الازرق رابط الصورة التي تريد ان تظهر في هذا التوقيت.
بذلك قد انتهينا من تركيب الإضافة. ويمكن للمهتمين بمجال الجافا سكربت متابعة الدرس تفصيلا : (خاص بالمهتمين فقط)
آلية عمل الكود :
اول خطوة يلزمنا نصل للتوقيت الموجود في جهاز الحاسوب الخاص بك وذلك يكون عن طريق الكلاس Date وهو الكلاس الخاص بالوصول للتاريخ بكافة أشكاله ساعة ,يوم,دقيقة..الخ ,الذي يخصنا هو الساعة ولذلك سنستعين بالدالة الخاصة بجلب الساعة وهى getHours();
var now = new Date();var hours = now.getHours();
قمنا بعمل object باسم now من الـ class الخاص بالوقت Date ثم قمنا بعمل متغير باسم hours وتم تخزين الساعة بداخله عن طريق الدالة الخاصة بجلب الساعة getHours
بعد ذلك نقوم بعمل شرط بحيث اذا كانت الساعة بين رقم و رقم وقتها تكون خلفية المدونة بالصورة او اللون الذي سيتم تخزينه. والأن سنقوم بشرح نموذج والباقي تكرار.
if (hours >= 16 && hours <= 18){ document.body.style.background="#3399FF url('http://2.bp.blogspot.com/-CFlHD7yvSl8/U3FRHwIY1hI/AAAAAAAABtQ/NV8Nq0k05wU/s1600/2.jpg') fixed top repeat-x";
المثال السابق يعطي أمر عبر الدالة hours بحيث اذا كان الوقت أكبر من أو يساوى 16 وأقل من أو يساوى 18 وقتها يجعل صورة الخلفية و اللون كما فى الكود السابق. ويتم الوصول للخلفية عن طريقة الـ document الذي يعتبر طريقة وصول في الـ JavaScript الي اي عنصر داخل القالب.
الان وقد انتهينا ..اتمنى ان يكون الشرح قد افادكم واي سؤال حول الموضوع يمكنك ترك تعليقا وسوف نرد عليك بأسرع وقت ان شاء الله.شكرا للرائع Dian chyta لتطوير الكود. انتظروا منى موضوعات حصرية كثيرة. كان معكم عبد الله أبو دقة.
مدونة رائعة . تسلم على الشرح المميز
ردحذف@محمود مجدى
ردحذفمرورك الأروع ^_^
شكراً لك أخي جزيلاً تقبل مروري :)
ردحذف@موقع جولة
ردحذفالعفو اخي
ترقب موضوع بعنوان طائر توتير العائم ب9 الوان مختلفة يتغير لونه حسب توقيت الجهاز بنفس الفكرة هذه الليلة
مرحبا أخي عبدالله ممكن نتواصل
ردحذف