تغيير خلفية مدونات بلوجر حسب توقيت جهاز الزائر, اجعل مدونتك مميزة الأن

عدد مشاهدات الموضوع:

أهلا وسهلا بكم زوار مدونة أبو اياد ,اليوم سنناقش موضوعا لمحبي التغيير فهو يستهدف كل مُدون يحب التجديد داخل مدونته من حيث الشكل العام. كما في العنوان إضافتنا اليوم ستقوم بتغيير خلفية مدونتك على بلوجر حسب توقيت حاسوبك؟ كيف ذلك! ستقوم الإضافة بتغيير الخلفية كل مثلا ساعتين أو ثلاثة فهى سهلة التعديل بما يناسب رغبتك فى ظهور خلفية ما فترة معينة وتغييرة بعد فترة أخرى. يمكنك معاينتها من خلال مدونة أبو إياد التجريبية ولكن ستنتظر كثيرا لتتغير الخلفية :) . يمكنك تجربتها فهى سهلة التثبيت. فقط تابعنا

لأضافة الكود لمدونتك فقط تحتاج لتسجيل دخولك ثم تذهب الى التخطيط  Layout بعدها تضغط اضافة أداة ثم HTML/Javascript.
قم بنسخ الكود التالى في المحتوى الخاص ب HTML/Javascript ودع العنوان فارغا.
<!--
Change your blog background by the time
-->
<script type='text/javascript'>
<!--
 var now = new Date();
 var hours = now.getHours();
   //16-18 ساعة
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";
   //19-21 ساعة
 } else if (hours >= 19 && hours <= 21){
document.body.style.background="#99CC66 url('http://3.bp.blogspot.com/-Jzs3xwYRy4s/U3FSeNbncBI/AAAAAAAABuU/dSyFcbfRzwU/s1600/3.jpg') fixed top repeat-x";
   //22-4 ساعة
 } else if (hours >= 22 || hours <= 4){
document.body.style.background ="#993399 url('http://1.bp.blogspot.com/-WqPCH0CSpa8/U3FRtG7CywI/AAAAAAAABto/Q-Lj-6yTCBM/s1600/4.png') fixed top repeat-x";
   //5-6 ساعة
 } else if (hours >= 5 && hours <= 6){
document.body.style.background="#CC99CC url('http://1.bp.blogspot.com/-QCOac5C7_pQ/U3FR-4I_KiI/AAAAAAAABtw/5cVCl8xXOnk/s1600/5.jpg') fixed top repeat-x";
   //7-8 ساعة
 } else if (hours >= 7 && hours <= 8){
document.body.style.background="#9966CC url('http://3.bp.blogspot.com/-KCFFulPwpCM/U3FSNSixVGI/AAAAAAAABuA/1XVYnjuOcrU/s1600/6.jpg') fixed top repeat-x";
   //9-15 ساعة                       
 } else if (hours >= 9 && hours <= 15){
document.body.style.background="#868579 url('http://3.bp.blogspot.com/-Sixq9qoD9og/U3FSLlAEeTI/AAAAAAAABt4/2EvWQ0m9goA/s1600/7.jpg') fixed top repeat-x";
 }
//-->
<!--
www.sweup.com
-->
</script>
يمكنك تغير ما هو معلم بالالوان بما يناسبك أو يناسب مدونتك
اللون الاصفر  الساعة (من 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 لتطوير الكود. انتظروا منى موضوعات حصرية كثيرة. كان معكم عبد الله أبو دقة.

هناك 5 تعليقات:

  1. مدونة رائعة . تسلم على الشرح المميز

    ردحذف
  2. شكراً لك أخي جزيلاً تقبل مروري :)

    ردحذف
  3. @موقع جولة
    العفو اخي
    ترقب موضوع بعنوان طائر توتير العائم ب9 الوان مختلفة يتغير لونه حسب توقيت الجهاز بنفس الفكرة هذه الليلة

    ردحذف
  4. مرحبا أخي عبدالله ممكن نتواصل

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية