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



هذه الإضافة مختلفة عن مثيلاتها من إضافات الإعلانات فهي تتيح لك بالإعلان أكثر من 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>
هناك بعض الطرق لإضافة البنرات كفوق الهيدر أو تحته أو أسفل المدونة ....
وصح فطوركم ...

تعليقات

  1. بحثت عنها بزاف و مالقيتهاش

    ألف شكر أخي النمر

    ردحذف
  2. جزاك الله خيراً أخي النمر علي المجهود الرائع

    ردحذف
  3. شكرا ، تشجيعاتكم تدفعني لعمل المزيد

    ردحذف
  4. :) واو رائع كل الاحترام احب هذه المدونة

    ردحذف
مرحب بك للتعليق و مشاركة رأيك

التسميات

أخبار ، news إدارة الإجهاد في العمل أدسنس أدوات أرخص إشتراك مدفوع إصلاح خطأ إضافات بلوجر أفضل أفضل 10 أفضل 4 أفضل 5 أفضل 7 إكس أكواد أكواد الألوان الإسلام البحث عن وظائف البحث عن وظيفة البرامج التسويق بالعمولة التصميم التصوير التصوير الاحترافي الجزائر الحماية الذكاء الاصطناعي، تطبيقات ،أندرويد ،الآيفون الربح من الانترنت الربح من النت الشراء عبر الإنترنت في الجزائر العمل العمل والتوظيف ألوان الوان أندرويد إيثريوم أيردروب بايبال بايبال، ماستر كارد،فيزا،تفعيل،paypal بدون رأس مال بلوجر بيتس ستوديو 3 بيتس ستوديو برو بيتكوين تبادل إعلاني تخفيضات،كوبون،شراء،ربح تدوينة تطيقات تعيين مستشار وظيفي تواصل اجتماعي توظيف توظيفـ، سيرة ذاتية تويتر جي كويرى حد إدخال الأحرف حد إدخال الأحرف في ChatGPT حساب حساب فاتورة الكهرباء خطأ خطأ 740 على ويندوز خطأ ويندوز دراسة دروس بلوجر ر ربح ساعة سكربتات مواقع سلسلة كيف تربح من مدونتك سوناطراك شرح شرح بالفيديو شركات استضافة شركات استضافة مواقع صور طرق طريقة طريقة إصلاح عام 2023 عامل مستقل عملات غوغل فاتورة الكهرباء فايس بوك فوركس في فيديوهات ترفيه فيس بوك قابلة للطي قوالبي كاميرا كانفا كتب تعليمية كسب المال كمبيوتر كيفية الشراء من Aliexpress ليتكوين مجانيات محفظة مراجعة مسابقات مستشار وظيفي مشاكل بلوجر مشكلة مشكلة ChatGPT مُصور مُصور هاوٍ مصورًا محترفًا مقارنة مقارنة،هواوي،آبل،آيباد إير مقالات منصات منوعات مواقع نتفليكس نصائح نصاب هاوٍ هواتف هواتف قابلة للطي هواوي واتش 4 برو وظيفة وورد بريس ويندوز ويندوز 10 ويندوز 11 يوجوف Aliexpress bitsler Chatgpt ChatGPT Plus fiverr GPT-4 HTML jQuery youtube

نموذج الاتصال

إرسال