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

 

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

[] مثال حي []

إذا أعجبتك فاليك الإضافة وشرحها:

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

يمكن تركيب الإضافة من خلال “ عناصر الصفحة “ ثم إضافة قطعة “ HTML/JavaScript” ، ولصق الكود فيها ، أو من التبويب “ تحرير HTML “ ثم لصقه قبيل إنغلاق الهيدر ( </head> ) ، وهذا هو الكود:

<script type="text/javascript">

var images= new Array()

images[0]="رابط الصورة رقم 1"

images[1]="رابط الصورة رقم 2"

images[2]="رابط الصورة رقم 3"

images[3]="رابط الصورة رقم 4"

var random=Math.floor(4*Math.random());

document.write("<style>");

document.write("body {");

document.write(' background:url("' + images[random] + '") repeat;');

document.write(" }");

document.write("</style>");

</script>

في هذا الكود أنا أضفت فقط أربع صور ، يمكن جعلها أكثر من ذلك ، ولكن عليك كتابة عدد الصور في الموضع الذي ضللته لك بالاصفر وفي حالتنا هذه هو : 4

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

يمكنك البدء في استخدام الإضافة ، ولكن أنصحك بأن تفهم عملية تنفيذ هذا الكود في قالبك ، هذه فرصة لتكسب مزيد من المهارة للتعامل مع الأكواد ، ولتكسب المزيد من الثقة:
الأسطر ( 2 – 7 ) تدخل مصفوفة مكونة من أربعة صور، وفي السطر رقم 7 يتم اختيار أحد هذه الصور عشوائياً لتكمل المشوار في تنفيذ هذا الكود.
الأسطر ( 8 – 12 ) تقوم بطباعة خصائص الأنماط CSS للوسم Body ، بمعني يقوم بكتابة تنسيق بدن المدونة ، ولنفترض أنه الصورة العشوائية كانت الصور رقم اثنين سيكون التنسيق الذي سيُكتب هكذا:

<style>

body {

background: url("رابط الصورة رقم 2") repeat;

}

</style>

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

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

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

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

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

المصدر : مدونة بلوقر