إضافة صور تتغير عشوائيا بطريقة جذابة



هذه الإضافة مختلفة عن مثيلاتها من إضافات الإعلانات فهي تتيح لك بالإعلان أكثر من 20 مرة في موضع واحد و الإختلاف هنا أنه مع كل تحديث للصفحة F5 تتبدل الصورة إلي أخري و بهذا ستتيح مساحة كبري علي موقعك

و ما يميز هذه الإضافة أنها توضع داخل التدوينات (الرسائل) حيث انه مع كل تحديث أو إنتقال إلي موضوع جديد يظهر بنر جديد
و أيضا نستطيع إستعمالها علي القائمة الجانبية

و هذا مثال حـــــــــــــــــــــي كل ما عليك فعله هو تحديث الصفحة و ستري السحر يحدث



و الآن مع شرح تطبيق الإضافة



  • تطبيق الإضافة علي رسائل المدونة :
من لوحة تحكم المدونة أذهب إلي تصميم ثم إلي تحرير html
ضع علامة علي خانة توسيع القوالب
أضضغط علي ctrl+F و أبحث عن الكود التالي :
<data:post.body/>
ألصق الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type="text/javascript">
    var images= new Array()
    images[0]= "<a href = 'عنوان الرابط الأول'><img src='رابط صورة البانر الأول' alt='النص البديل اختياري'/></a>";
    images[1]= "<a href = 'عنوان الرابط الثاني'><img src='رابط صورة البانر الثاني' alt='النص البديل اختياري'/></a>";
    images[2]= "<a href = 'عنوان الرابط الثالث'><img src='رابط صورة البانر الثالث' alt='النص البديل اختياري'/></a>";
    images[3]= "<a href = 'عنوان الرابط الرابع'><img src='رابط صورة البانر الرابع' alt='النص البديل اختياري'/></a>";
    var random=Math.floor(4*Math.random());
    document.write(images[random]);
    </script>
    </b:if>
ثم أحفظ القالب

  •  تطبيق الإضافة علي القائمة الجانبية للمدونة :

من لوحة تحكم المدونة أذهب إلي تصميم 
ثم  إضافة أداة HTML/JavaScript
 و ضع الكود التالي ثم أحفظ :
<style>
    #banner img { max-width:95%;} /* لمنع انسياب الصور */
    </style>
    <div id="banner">
    <script type="text/javascript">
    var images= new Array()
    images[0]= "<a href = 'عنوان الرابط الأول'><img src='رابط صورة البانر الأول' alt='النص البديل اختياري'/></a>";
    images[1]= "<a href = 'عنوان الرابط الثاني'><img src='رابط صورة البانر الثاني' alt='النص البديل اختياري'/></a>";
    images[2]= "<a href = 'عنوان الرابط الثالث'><img src='رابط صورة البانر الثالث' alt='النص البديل اختياري'/></a>";
    images[3]= "<a href = 'عنوان الرابط الرابع'><img src='رابط صورة البانر الرابع' alt='النص البديل اختياري'/></a>";
    var random=Math.floor(4*Math.random());
    document.write(images[random]);
    </script>
    </div>
هناك بعض الطرق لإضافة البنرات كفوق الهيدر أو تحته أو أسفل المدونة ....
وصح فطوركم ...


هذه الإضافة مختلفة عن مثيلاتها من إضافات الإعلانات فهي تتيح لك بالإعلان أكثر من 20 مرة في موضع واحد و الإختلاف هنا أنه مع كل تحديث للصفحة F5 تتبدل الصورة إلي أخري و بهذا ستتيح مساحة كبري علي موقعك

و ما يميز هذه الإضافة أنها توضع داخل التدوينات (الرسائل) حيث انه مع كل تحديث أو إنتقال إلي موضوع جديد يظهر بنر جديد
و أيضا نستطيع إستعمالها علي القائمة الجانبية

و هذا مثال حـــــــــــــــــــــي كل ما عليك فعله هو تحديث الصفحة و ستري السحر يحدث



و الآن مع شرح تطبيق الإضافة



  • تطبيق الإضافة علي رسائل المدونة :
من لوحة تحكم المدونة أذهب إلي تصميم ثم إلي تحرير html
ضع علامة علي خانة توسيع القوالب
أضضغط علي ctrl+F و أبحث عن الكود التالي :
<data:post.body/>
ألصق الكود التالي بعده :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type="text/javascript">
    var images= new Array()
    images[0]= "<a href = 'عنوان الرابط الأول'><img src='رابط صورة البانر الأول' alt='النص البديل اختياري'/></a>";
    images[1]= "<a href = 'عنوان الرابط الثاني'><img src='رابط صورة البانر الثاني' alt='النص البديل اختياري'/></a>";
    images[2]= "<a href = 'عنوان الرابط الثالث'><img src='رابط صورة البانر الثالث' alt='النص البديل اختياري'/></a>";
    images[3]= "<a href = 'عنوان الرابط الرابع'><img src='رابط صورة البانر الرابع' alt='النص البديل اختياري'/></a>";
    var random=Math.floor(4*Math.random());
    document.write(images[random]);
    </script>
    </b:if>
ثم أحفظ القالب

  •  تطبيق الإضافة علي القائمة الجانبية للمدونة :

من لوحة تحكم المدونة أذهب إلي تصميم 
ثم  إضافة أداة HTML/JavaScript
 و ضع الكود التالي ثم أحفظ :
<style>
    #banner img { max-width:95%;} /* لمنع انسياب الصور */
    </style>
    <div id="banner">
    <script type="text/javascript">
    var images= new Array()
    images[0]= "<a href = 'عنوان الرابط الأول'><img src='رابط صورة البانر الأول' alt='النص البديل اختياري'/></a>";
    images[1]= "<a href = 'عنوان الرابط الثاني'><img src='رابط صورة البانر الثاني' alt='النص البديل اختياري'/></a>";
    images[2]= "<a href = 'عنوان الرابط الثالث'><img src='رابط صورة البانر الثالث' alt='النص البديل اختياري'/></a>";
    images[3]= "<a href = 'عنوان الرابط الرابع'><img src='رابط صورة البانر الرابع' alt='النص البديل اختياري'/></a>";
    var random=Math.floor(4*Math.random());
    document.write(images[random]);
    </script>
    </div>
هناك بعض الطرق لإضافة البنرات كفوق الهيدر أو تحته أو أسفل المدونة ....
وصح فطوركم ...
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
abuiyad