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

 

 

 

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

لنبدا بادن الله 

1. تقم بدهاب الى التخطيط و تدهب الى HTML/Javascript.

2. تقم بلصق هدا الكود 

<!--

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 الي اي عنصر داخل القالب.

وبدالك قد انتهينا ^_^
ممكن نشر التدوينة بين الاصدقاء ليستفيد الجميع
و السلام عليكم في تدوينة جديدة بادن الله