إدراج بانرات عشوائية داخل رسائل المدونة أو القائمة الجانبية

إدراج بانرات عشوائية داخل رسائل المدونة أو القائمة الجانبية

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


[-] مثال حي [-]


إدراج البانرات العشوائية داخل رسائل المدونة

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

Unknown يقول... 21 يوليو 2011 في 7:04 م

شكرا يا أخي الاضافة مفيدة جدا ....

.....وكما قلت يمكن استعمالها في أغراض كثيرة ..

ونحن دائما في انتضار جديدك المميز...

_ أتشرف دائما بالزيارة :

http://al-kitabe.blogspot.com

برامج كمبيوتر يقول... 21 يوليو 2011 في 8:28 م

اضافة مفيدة جدا يا غالي , ننتظر منك المزيد باذن الله .,

Jaser Alharbi يقول... 22 يوليو 2011 في 5:12 م

@ عبدالجليل: حياك الله أخي فتحت مدونتك وسأتشرف بتصفحها إن شاء الله.

@برامج كمبيوتر: شكراً لك ، وإن شاء الله سنقدم المزيد.

تحياتي العاطرة

مدونة وذكر يقول... 22 يوليو 2011 في 5:45 م

شكراً

غير معرف يقول... 23 يوليو 2011 في 2:30 م

اضافه اكثر من رائعه اخي العزيز جاسر وسوف اقوم بازاله التي عندي واضافه تلك قريبا في مدونتي
جزاك الله خيرا علي ماتقدم في مدونتك الرائعه التي اتمنى منك ان تثريها بكثير من الموضوعات.

Alaeddine يقول... 24 يوليو 2011 في 10:35 ص

السلام عليكم،
فكرة ممتازة ورائعة جدا، شكرا جزيلا لك !
ــــــــــــــــــــــــــــــ
مدونة مُخْتَارَات

Jaser Alharbi يقول... 24 يوليو 2011 في 10:17 م

وعليكم السلام ورحمة الله وبركاته،،

حياكم الله إخواني وشكراً لكم

غير معرف يقول... 26 يوليو 2011 في 4:58 ص

شكرا لك استاذ جاسر .. اضافة رائعه.
بارك الله فيك وجعل هذا العمل الصالح فى ميزان حسناتك باذن الله العلى القدير
استاذ جاسر معلش كان ليه طلب عندك وارجوا انى مكنش بتقل عليك وخصوصا ان دى اول مره بزور فيها مدونة حضرتك.وبصراحة مدونة رائعه من شخص اروع .استاذ جاسر انا عاوز سلايط شو احط فيه 4 او 5 موضوعات بس براوبط الموضوعات والصور عشان يكون شكلها حلو
انا شوفت سلايط شو فى كذا قالب بص حضرتك انا حتطلك روابطهم وكانوا فى مدونة قوالب عربية
http://snips-arabicbloggertemplates.blogspot.com/
http://shines-arabicbloggertemplates.blogspot.com/
http://soild-arabicbloggertimplates.blogspot.com/
ياريت حضرتك تشرحلنا طريقة اضافة السلايط شو ده لانى عجبنى جدا ومش لاقى زيه فى اى مكان او تدلنى على مكان اجد فى تلك الاضافة لانى من الصبح بدور عليها ومش لاقيها وقولت مفيش غير الاستاذ جاسر هو الى حيهلهالى
جزاك الله كل خير
اخوك محمد الاسمرانى .. الاسكندرية

غير معرف يقول... 27 يوليو 2011 في 4:10 ص

استاذ جاسر حضرتك مردتش عليه
اخوك محمد الاسمرانى .. الاسكندرية

Jaser Alharbi يقول... 27 يوليو 2011 في 6:20 م

السلام عليكم

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

تحااياي

غير معرف يقول... 27 يوليو 2011 في 11:18 م

شكرا لك استاذ جاسر
بانتظار عودتك بفارغ الصبر
وفقك الله ورعاك .. دومت فى رعيات الله وامنه
اخوك محمد الاسمرانى .. الاسكندرية

أرض الوثائقيات يقول... 1 أغسطس 2011 في 4:54 م

شكرا لك اخي ع المجهود

soufian يقول... 1 أغسطس 2011 في 10:53 م

السلام عليكم اخي جاسر
طريقة مميزة بالجافاسكربت ويمكن تخصصيها لعدة اغراض حسب المتطلب
حياك لله وننتظر كل جديد منك

Jaser Alharbi يقول... 3 أغسطس 2011 في 1:04 ص

وعليلكم السلام ورحمة الله وبركاته

شكراً لكم إخواني ، وشهركم مبارك إن شاء الله

تحااياي

Mohaned Magdy يقول... 6 سبتمبر 2011 في 3:49 ص

حمل كتاب عصر العلم لاحمد زويل

http://hdfna.blogspot.com/2011/09/3sr-el3elm-ahmed-zewail.html
حمل كتاب عصر العلم لاحمد زويل

http://hdfna.blogspot.com/2011/09/3sr-el3elm-ahmed-zewail.html

αмυη يقول... 13 سبتمبر 2011 في 6:55 م

شكرا لك على الاضافه الرائعه والشرح المميز

Jaser Alharbi يقول... 14 سبتمبر 2011 في 12:14 م

العفو أخي أحمد :)

obligatoire يقول... 27 سبتمبر 2011 في 4:49 ص

شكرا يا أخي الاضافة
http://scarafaggo.blogspot.com/2011/09/blog-post_3421.html

غير معرف يقول... 16 أكتوبر 2011 في 12:25 ص

لمن يريد اضافة اعلان مجاني هنا a3lana.blogspot.com

Unknown يقول... 31 ديسمبر 2011 في 8:07 ص

http://mazikattop.blogspot.com/2011/12/blog-post_30.html

إرسال تعليق