6 نوفمبر، 2015

مدون محترف اضافات بلوجر دروس بلوجر إضافة وحدة إعلانية عائمة مع زر الإغلاق في بلوجر

إضافة وحدة إعلانية عائمة مع زر الإغلاق في بلوجر

إضافة وحدة إعلانية عائمة في منتصف الصفحة مع زر إغلاق داخل المواضيع والصفة الرئيسية في بلوجر

إضافة وحدة إعلانية عائمة وثابتة في بلوجر - اليوم في مدون محترف سوف نتعرف على درس جديد ومفيد لكثير من المدونين بحيث سوف يكون الموضوع حول كيفية إضافة وحدات إعلانية عائمة ( تستطيع إضافة بنر أو نص معين) ايضاً المميز في إضافتنا إنه أي إعلان سوف تضعه سوف يكون متجاوب مع جميع الشاشات والهواتف المحمولة وسوف يظهر الإعلان في الجزء السفلي من المدونة بالإضافة إلى زر لإغلاق الإعلان.

الجميع يعرف إن مُعظم المدونين بدأو العمل في مدونتاهم كهواية، ولكن هُناك من يريد كسب المال، الترويج لمنتجاته وخدماته او زيادة مبيعات متجره على الإنترنت .....إلخ، فيقوم بوضع الإعلانات كوسيلة دعم له، بحيث يقوم بوضع مساحات إعلانية على مدونته لمساعدة المعلنين والربح من الإعلانات اوالترويج لمنتجاته او منتجات شخص اخر..إلخ فكل هذه الامور سوف تكون مثل وسيلة دعم للإستمرار في الكتابة.

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


شرح إضافة إعلانات عائمة مستجيبة مع زر إغلاق

  1. الذهاب إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. اضغط على تحرير HTML

ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='إغلاق الموضوع' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='عنوان الصورة'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='عنوان الصورة' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
</div>
</div>

الإعدادت

الرابط الذي باللون الاحمر إستبدله بالبنر الإعلاني الخاص بك
الرابط الذي باللون الازرق وهو زر كلمة close إستبدلها بما تريد
اسبتدل الرمز برابط الموقع المراد الإعلان عنه
الكلمات التي باللون الاخضر استبدلها بعنوان البنر الإعلاني
الرقم 728pxهو المسؤول عن حجم عرض الإعلان

اتمنى ان يكون الموضوع اعجبكم
اي سؤال او استفسار لا تترد بوضعه في تعليق


مواضيع ذات صلة
إضافة وحدة إعلانية عائمة مع زر الإغلاق في بلوجر
4 / 5
بواسطة

هناك 30 تعليقًا :

  1. جميلة الإضافة منير كن ^__^ يمكنني
    استعمالها في إعلان آخر لمدونتي، غير إعلان
    لصديقٍ أو مدونةٍ أخرى هههه، باركك الله عزيزي
    دائمًا الإفادة؛ تحياتي لك :)

    ردحذف
    الردود
    1. يمكنك إستعمالها في اي شيء يا غالي
      و اين هذه الغيبة و الله اشتقنالك
      نورت المدونة اخي ليو

      حذف
  2. الردود
    1. مرورك الجميل يا غالي

      حذف
  3. روووووعه ياغالى شكرا على الشرح الوافى

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      شكراً لمرورك

      حذف
  4. بارك الله فيك صديقي منير وجعلها الله في ميزان حسناتك =s

    ردحذف
    الردود
    1. شكراً لك يا غالي
      وبارك الله فيك ايضاً
      =r

      حذف
  5. موضوع أكثر من رائع أستاذ منير

    ردحذف
    الردود
    1. شكراً لك صديقي
      مرورك الرائع

      حذف
  6. روووووعة الاضافة =r
    اقدر استخدمها باعلانات ادسنس ؟

    ردحذف
    الردود
    1. تقدر تستخدمها بأي شيء
      بس إعلانات ادسنس هيكون هذا مخالف لسياستها

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

    ردحذف
    الردود
    1. صراحة لم افهم قصدك يا غالي

      حذف
  8. فى واحدة زيها بتتعمل لسياسة الخصوصيه - ياريت تعرفنا ازاى بتتعمل وشكرا لك

    ردحذف
    الردود
    1. والله لم افهم قصدك
      ممكن رابط معاينة
      ولا شكر على واجب

      حذف
  9. زى الى موجوده عندك اخى فى مدونتك

    ردحذف
    الردود
    1. لو قصدك الموجودة في الفوتر
      هذه من التخطيط يتم إضافتها
      عبر اداة الروابط

      حذف
  10. محتاج واحده بنفس البيانات دى
    هذا الموقع يستخدِم ملفات تعريف الإرتباط من أجل الحصول على أفضل تجربة داخل الموقع إعرف المزيد

    ردحذف
    الردود
    1. تفضل الكود

      /* Custom Cookies Info Light */
      .cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)}
      .cookie-choices-info .cookie-choices-text{font-family:droid arabic kufi;font-weight: 700;font-size:12px!important;color:#222!important}
      .cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
      .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
      .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear

      يوضع في CSS

      حذف
    2. ماذا تقصديوضع في CSS

      حذف
    3. فوق الوسم ]]></b:skin>

      حذف
    4. طيب فين احط رابط سياسه الخصوصيه الخاص بموقعى ؟

      حذف
    5. اهلاً صديقي
      هي ليست مهمة في الاصل
      لذلك فقط انت قم بتنسيقها

      حذف
  11. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك صديقي لا ننشر روابط إشهار

      حذف
  12. مميز كعادتك صديقي وهل يمكنك ان تقول لي كيف يمكنني تغير الصور بكلمات يعني مثلا اريد ملاحظة يظهر للزائر بعد الدخول للمدونة بدل الاعلان =r

    ردحذف
    الردود
    1. يُمكنك فعل هذا بوضع صورة عليها كلمات =d
      أو لو لديك خبرة برمجية يُمكنك البحث عن مقال إضافة وحدات إعلانية مثل أدسنس واستبدال الاكواد بطريقة صحيحة والتعديل عليها وتركيبها في مدونتك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r