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

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

عبد الجليل يقول... 21 يوليو، 2011 7:04 م

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

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

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

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

http://al-kitabe.blogspot.com

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

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

جاسر الحربي يقول... 22 يوليو، 2011 5:12 م

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

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

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

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

شكراً

مدونة تقارب يقول... 23 يوليو، 2011 2:30 م

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

علاء الدين يقول... 24 يوليو، 2011 10:35 ص

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

جاسر الحربي يقول... 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 ص

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

جاسر الحربي يقول... 27 يوليو، 2011 6:20 م

السلام عليكم

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

تحااياي

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

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

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

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

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

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

جاسر الحربي يقول... 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 م

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

جاسر الحربي يقول... 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

الوحوش يقول... 31 ديسمبر، 2011 8:07 ص

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

إرسال تعليق



تابع صفحتنا في شبكة قوقيل بلس واقترحها :

تابع صفحتنا في الفيسيبوك:

ليصل جديدنا إلى بريدك تفضل بالاشتراك