صور خلفية المدونة تتغير عشوائياً .. !

   الحمدلله رب العالمين والصلاة والسلام على أشرف المرسلين، سأعرض اليوم طريقة تركيب إضافة خفيفة ، تكسر هذه الإضافة الجمود قليلاً أثناء التصفح ، وتضفي روح جديدة للمدونة. تمكننا هذه الإضافة من تركيب أكثر من صورة لخلفية المدونة ، تتغير هذه الصور عشوائياً مع كل تحديث لمدونتك أو اثناء تصفح المدونة، وهذا مثال :
إذا أعجبتك فاليك الإضافة وشرحها:

عرض كود الإضافة ومكان تركيبه

يمكن تركيب الإضافة من خلال “ عناصر الصفحة “ ثم إضافة قطعة “ HTML/JavaScript” ، ولصق الكود فيها ، أو من التبويب “ تحرير HTML “ ثم لصقه قبيل إنغلاق الهيدر ( </head> ) ، وهذا هو الكود:
  1. <script type="text/javascript">
  2. var images= new Array()
  3. images[0]="رابط الصورة رقم 1"
  4. images[1]="رابط الصورة رقم 2"
  5. images[2]="رابط الصورة رقم 3"
  6. images[3]="رابط الصورة رقم 4"
  7. var random=Math.floor(4*Math.random());
  8. document.write("<style>");
  9. document.write("body {");
  10. document.write(' background:url("' + images[random] + '") repeat;');
  11. document.write(" }");
  12. document.write("</style>");
  13. </script>
في هذا الكود أنا أضفت فقط أربع صور ، يمكن جعلها أكثر من ذلك ، ولكن عليك كتابة عدد الصور في الموضع الذي ضللته لك بالاصفر وفي حالتنا هذه هو : 4

◘  شرح آلية عمل الإضافة

يمكنك البدء في استخدام الإضافة ، ولكن أنصحك بأن تفهم عملية تنفيذ هذا الكود في قالبك ، هذه فرصة لتكسب مزيد من المهارة للتعامل مع الأكواد ، ولتكسب المزيد من الثقة:
الأسطر ( 2 – 7 ) تدخل مصفوفة مكونة من أربعة صور، وفي السطر رقم 7 يتم اختيار أحد هذه الصور عشوائياً لتكمل المشوار في تنفيذ هذا الكود.
الأسطر ( 8 – 12 ) تقوم بطباعة خصائص الأنماط CSS للوسم Body ، بمعني يقوم بكتابة تنسيق بدن المدونة ، ولنفترض أنه الصورة العشوائية كانت الصور رقم اثنين سيكون التنسيق الذي سيُكتب هكذا:
  1. <style>
  2. body {
  3. background: url("رابط الصورة رقم 2") repeat;
  4. }
  5. </style>
طبعاً لمن لديه المام بخصائص الأنماط CSS يمكنه الإضافة والتعديل حسب رغبته ، في المثال الذي وضعته استخدمت صور مصغرة تتكرر في الخلفية ، هذا في نظري سيكون أسرع وأخف على المدونة ، والخيار لك.

◘  أفكار واستخدامات أخرى ( بانرات – إعلانات – هيدر … الخ )

هذه الإضافة مطيعة جداً ، فطالما أنك تستطيع كتابة خصائص CSS بواسطتها فعليك أن تطلق العنان لفكرك ، هناك أفكار كثيرة ممكن تنفيذها مثلاً :
  • جعل هيدر المدونة يتغير عشوائياً بتنسيق الوسم header  بدلاً من Body.
  • يمكنك عرض بانرات عشوائية لمواضيعك داخل المدونة!
  • يمكنك عرض إعلانات لمواقع أخرى بطريقة عشوائية.

إذا وجد استفسار أو مشكلة يمكن مناقشتها إن شاء الله ، الى لقاءٍ ▬

التعليقات: 21

zaidq يقول... 5 يوليو، 2011 11:24 ص

جميل جميل جداً بالتفويق أخي الكريم جاسر !

جاسر الحربي يقول... 7 يوليو، 2011 5:46 ص

السلام عليكم

حياك الله وبياك ، ومرحباً بك :)

luigi يقول... 11 يوليو، 2011 1:06 م

فكرة جميلة ولكن هل تنطبق في المواضيع اريد صورة في الموضوع ويتغير كل تحديث للموضوع هل هذا ممكن؟
وشكرا على الفكرة الرائعة

جاسر الحربي يقول... 11 يوليو، 2011 11:17 م

السلام عليكم

إذا تقصد بانر متغير في أعلى مواضيع المدونة ، الجواب نظرياً نعم

فهل هذا هو الذي تقصده ؟

luigi يقول... 12 يوليو، 2011 9:25 ص

نعم
ولكن كيف يتم تحويل الى بنر؟

عرب بلوجر يقول... 12 يوليو، 2011 3:31 م

ممتاز حقاً .. شكراً لك

جاسر الحربي يقول... 12 يوليو، 2011 11:13 م

@luigi : إن شاء الله سأحرر تدوينة خاصة بهذا أو أجعلها كتحديث لهذه الصفحة، مع العلم أني لم أجربها ولكن حمستني بسؤالك :)

@عرب بلوقر: العفو أخي الكريم .. وأهلاً بك ومرحباً

IT Blog يقول... 14 يوليو، 2011 2:01 م

رائعة جدا افكارك وموقعك نتمنى لك التوفيق ونريد المزيد من هذه الافكار النيرة

جاسر الحربي يقول... 14 يوليو، 2011 2:49 م

السلام عليكم

حياك الله ، وأشكر لك هذا الثناء شكر الله لك

zakirous يقول... 17 يوليو، 2011 11:31 م

لقد لصقت الكود ب المكان الذي قلت في HTML/JavaScript ولكن لم يطرأأي تغير

جاسر الحربي يقول... 18 يوليو، 2011 11:24 ص

السلام عليكم

طيب حاول تلصق الكود من القالب "تحرير HTML"

Anass يقول... 26 أغسطس، 2011 8:28 م

جميلة جداا
بارك الله فيك اخي

جاسر الحربي يقول... 4 سبتمبر، 2011 9:16 م

وفيك بارك الله اخي انس

نزار يقول... 17 نوفمبر، 2011 6:43 ص
أزال المؤلف هذا التعليق.
نزار يقول... 17 نوفمبر، 2011 6:44 ص

كبير ياجاسر ,,,

بعد اذنك ,, ممكن انقل الدرس الى مدونتي مع ذكر المصدر طبعا ؟؟

مدونتي ( بلوجرويب )

جاسر الحربي يقول... 17 نوفمبر، 2011 2:27 م

حياك الله يا نزار ...

بين يديك حباً وكرامة

warda Alert يقول... 3 أبريل، 2012 2:48 م

يسمو اخي

علي يقول... 30 يونيو، 2012 12:10 م

بارك الله فيكا فمزيدا من التالق والعطاء

جاسر الحربي يقول... 1 يوليو، 2012 9:10 ص

@وردة , @علي

وفيكما بارك الله ، شاكر ومقدر

تدوين باحتراف يقول... 6 أغسطس، 2012 11:05 م

اخي كنت اود ان اعرف ما هو حجم الصورة معذرة اخي

جاسر الحربي يقول... 7 أغسطس، 2012 1:07 ص

@تدوين باحتراف:

الصور حسب المثال لابد تكون صور مصغرة تتكرر رأسياً وافقياً ، ممكن استخدام صور غلاف كخلفية لكن بدلاً من repeat نكتب no-repeat لتفادي تكرارها ..
يعني المسالة متعلقة كيف تريد تنسيق مدونتك

تحاياي

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك