الحمدلله رب العالمين والصلاة والسلام على أشرف المرسلين، سأعرض اليوم طريقة تركيب إضافة خفيفة ، تكسر هذه الإضافة الجمود قليلاً أثناء التصفح ، وتضفي روح جديدة للمدونة. تمكننا هذه الإضافة من تركيب أكثر من صورة لخلفية المدونة ، تتغير هذه الصور عشوائياً مع كل تحديث لمدونتك أو اثناء تصفح المدونة، وهذا مثال :
الأسطر ( 2 – 7 ) تدخل مصفوفة مكونة من أربعة صور، وفي السطر رقم 7 يتم اختيار أحد هذه الصور عشوائياً لتكمل المشوار في تنفيذ هذا الكود.
الأسطر ( 8 – 12 ) تقوم بطباعة خصائص الأنماط CSS للوسم Body ، بمعني يقوم بكتابة تنسيق بدن المدونة ، ولنفترض أنه الصورة العشوائية كانت الصور رقم اثنين سيكون التنسيق الذي سيُكتب هكذا:
إذا وجد استفسار أو مشكلة يمكن مناقشتها إن شاء الله ، الى لقاءٍ ▬
إذا أعجبتك فاليك الإضافة وشرحها:
◘ عرض كود الإضافة ومكان تركيبه
يمكن تركيب الإضافة من خلال “ عناصر الصفحة “ ثم إضافة قطعة “ HTML/JavaScript” ، ولصق الكود فيها ، أو من التبويب “ تحرير HTML “ ثم لصقه قبيل إنغلاق الهيدر ( </head> ) ، وهذا هو الكود:في هذا الكود أنا أضفت فقط أربع صور ، يمكن جعلها أكثر من ذلك ، ولكن عليك كتابة عدد الصور في الموضع الذي ضللته لك بالاصفر وفي حالتنا هذه هو : 4
<script type="text/javascript"> images[0]="رابط الصورة رقم 1" images[1]="رابط الصورة رقم 2" images[2]="رابط الصورة رقم 3" images[3]="رابط الصورة رقم 4" document.write("<style>"); document.write("body {"); document.write(' background:url("' + images[random] + '") repeat;'); document.write(" }"); document.write("</style>"); </script>
◘ شرح آلية عمل الإضافة
يمكنك البدء في استخدام الإضافة ، ولكن أنصحك بأن تفهم عملية تنفيذ هذا الكود في قالبك ، هذه فرصة لتكسب مزيد من المهارة للتعامل مع الأكواد ، ولتكسب المزيد من الثقة:الأسطر ( 2 – 7 ) تدخل مصفوفة مكونة من أربعة صور، وفي السطر رقم 7 يتم اختيار أحد هذه الصور عشوائياً لتكمل المشوار في تنفيذ هذا الكود.
الأسطر ( 8 – 12 ) تقوم بطباعة خصائص الأنماط CSS للوسم Body ، بمعني يقوم بكتابة تنسيق بدن المدونة ، ولنفترض أنه الصورة العشوائية كانت الصور رقم اثنين سيكون التنسيق الذي سيُكتب هكذا:
طبعاً لمن لديه المام بخصائص الأنماط CSS يمكنه الإضافة والتعديل حسب رغبته ، في المثال الذي وضعته استخدمت صور مصغرة تتكرر في الخلفية ، هذا في نظري سيكون أسرع وأخف على المدونة ، والخيار لك.
<style> body { background: url("رابط الصورة رقم 2") repeat; } </style>
◘ أفكار واستخدامات أخرى ( بانرات – إعلانات – هيدر … الخ )
هذه الإضافة مطيعة جداً ، فطالما أنك تستطيع كتابة خصائص CSS بواسطتها فعليك أن تطلق العنان لفكرك ، هناك أفكار كثيرة ممكن تنفيذها مثلاً :- جعل هيدر المدونة يتغير عشوائياً بتنسيق الوسم header بدلاً من Body.
- يمكنك عرض بانرات عشوائية لمواضيعك داخل المدونة!
- يمكنك عرض إعلانات لمواقع أخرى بطريقة عشوائية.
إذا وجد استفسار أو مشكلة يمكن مناقشتها إن شاء الله ، الى لقاءٍ ▬
التعليقات: 21
جميل جميل جداً بالتفويق أخي الكريم جاسر !
السلام عليكم
حياك الله وبياك ، ومرحباً بك :)
فكرة جميلة ولكن هل تنطبق في المواضيع اريد صورة في الموضوع ويتغير كل تحديث للموضوع هل هذا ممكن؟
وشكرا على الفكرة الرائعة
السلام عليكم
إذا تقصد بانر متغير في أعلى مواضيع المدونة ، الجواب نظرياً نعم
فهل هذا هو الذي تقصده ؟
نعم
ولكن كيف يتم تحويل الى بنر؟
ممتاز حقاً .. شكراً لك
@luigi : إن شاء الله سأحرر تدوينة خاصة بهذا أو أجعلها كتحديث لهذه الصفحة، مع العلم أني لم أجربها ولكن حمستني بسؤالك :)
@عرب بلوقر: العفو أخي الكريم .. وأهلاً بك ومرحباً
رائعة جدا افكارك وموقعك نتمنى لك التوفيق ونريد المزيد من هذه الافكار النيرة
السلام عليكم
حياك الله ، وأشكر لك هذا الثناء شكر الله لك
لقد لصقت الكود ب المكان الذي قلت في HTML/JavaScript ولكن لم يطرأأي تغير
السلام عليكم
طيب حاول تلصق الكود من القالب "تحرير HTML"
جميلة جداا
بارك الله فيك اخي
وفيك بارك الله اخي انس
كبير ياجاسر ,,,
بعد اذنك ,, ممكن انقل الدرس الى مدونتي مع ذكر المصدر طبعا ؟؟
مدونتي ( بلوجرويب )
حياك الله يا نزار ...
بين يديك حباً وكرامة
يسمو اخي
بارك الله فيكا فمزيدا من التالق والعطاء
@وردة , @علي
وفيكما بارك الله ، شاكر ومقدر
اخي كنت اود ان اعرف ما هو حجم الصورة معذرة اخي
@تدوين باحتراف:
الصور حسب المثال لابد تكون صور مصغرة تتكرر رأسياً وافقياً ، ممكن استخدام صور غلاف كخلفية لكن بدلاً من repeat نكتب no-repeat لتفادي تكرارها ..
يعني المسالة متعلقة كيف تريد تنسيق مدونتك
تحاياي
إرسال تعليق