خلفية متغيره

موضوع اليوم موضوع جميل جدا وسهل جدا ومفيد جدا في نفس الوقت وهو عباره عن خلفية لمدونتك تتغير مع كل ضغطة Refresh من الزائر لتعطي للزائر شكل جديد ومتغير لمدونتك ،أليس هذا رائع ؟.والأن سوف أعلمك طريقة أنجاز هذه الفكره :

أولا : يجب أن يكون عندك عدد من الصور وأن يكن مثلا 5 صور يمكنك أنشائهم أول تصميمهم على أي برنامج مثل برنامج الفوتوشوب ومن ثم رفع هذه الصور على أي موقع لرفع الصور مثل imageshack وبعد أتمام هذه الخطوات نبدأ بالخطوات الأهم وهي أيضا سهله فقط أقرأها جيدا .

ثانيا : أتبع الخطوات التالية :

1-      نفرض أن لديك 5 صور أذا لديك 5 روابط لتلك الصور

2-      أتبع هذا المسار : لوحة التحكم الرئيسية > عناصر الصفحة > أضافة عنصر > Html/Java Script

3-      ألصق هذا الكود في المكان المخصص بـ  Html/Java Script

<script type="text/javascript"><br>var banner= new Array()<br>banner[0]="رابط الصوره الأولى"<br>banner[1]="رابط الصوره الثانية"<br>banner[2]="رابط الصوره الثالثة"<br>banner[3]="ارابط الصوره الرابعة"<br>banner[4]="رابط الصوره الخامسة"<br>var random=Math.floor(5*Math.random());<br>document.write("<style>");<br>document.write("#header {");<br>document.write(' background:url("' + banner[random] + '") no-repeat top right;');<br>document.write(" }");<br>document.write("</style>");<br></script>

4-      الرقم 5 يدل على عدد الصور فأذا كان لديك أكثر من 5 صور يمكنك تكرار كود الصوره وزيادة العدد. والعكس

5-      ضع روابط الصور مكان كلمة "رابط الصوره" حسب الترتيب لذي تريده بين علامتي التنصيص مع الحفاظ على علامتي التنصيص وعدم مسحهم .

o       لاحظ ما يلي :

·         الكلمه no-repeat تعني أن الصوره لن تتكرر رأسيا أو أفقية ويمكن أن تجعلها تتكرر رأسيا أو أفقيا بأستبدل هذه الكلمة no-repeat بأحد الكلمات التالية رأسيا repeat-y وأفقيا repeat-x وأن أردت أن تكرر الصوره رأسيا وأفقيا عليك حذف كلمة no-repeat وعدم وضع شئ مكانها .

·         كلمة top تعني أن الصوره ستوضع في الجانب العلوي من منطقة الرأس ، وكلمة right تعني أن الصوره ستوضع في الجانب الأيمن من منطقة الرأس .

ويمكن تضع الصوره في وسط الجانب العلوي من المدونة بتبديل top right بكلمة top center ويمكن وضعها في وسط المدونة بأستبدال الكلمة السابقة بكلمة center center .

أو التعديل في القيم السابقة حسب ما تريد حتى يتناسب شكل ومكان الصور مع مدونتك .

وأخيرا أحفظ العنصر وجرب وأن شاء الله يعجبك

مع تمنياتي بالتوفيق