اضافة بنر بجوار عنوان مدونة بلوجر

اضافة بنر عريض  بجانب عنوان مدونة بلوجر بتقنية CSS

لاحظت دائما فى مواقع قوالب بلوجر  طلبات من زوار المدونة التى تتميز فى بالقالب الذى يحتوى على اعلان ادسنس بجوار عنوان المدونة بهذا الشكل فى الصورة , ليصبح هيدر المدونة عبارة عن عنوان المدونة وبنر اعلان ادسنس مثلا ...

blogger code
blogger code
* افضل حجم للبنر فى منطقة الهيدر لمدونات بلوجر 729*90 او 460*60
ايضا يمكن وضع مربع البحث داخل المدونة أو أزرار مواقع التواصل الاجتماعى او بنر خاص بالمدونة
طريقة اضافة بنر فى هيدر المدونة بسيطة جدا وهى عن طريق اضافة سيكشن بهيدر المدونة والسيكشن عبارة عن إضافة أداة , بعد ذلك يمكنك بسهولة اختيار اى شكل ترغبه في منطقة الهيدر
1- سجل الدخول لحساب بلوجر
2- اذهب الى لوحة تحكم Blogger ثم اضغط قالب ثم اضغط تحرير HTML
3- ابحث عن الكود التالى :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
</b:section>
4- ضع الكود التالى بعد الكود السابق مباشرة

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
5- ليصبح الكود كاملا بهذا الشكل

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

الان قد اتممت نصف العملية وهى اضافة سيكشن جديد بمنطقة الهيدر اسفل عنوان المدونة مباشرة , ويبقى الان ان تجعل السيكش الجديد بجانب عنوان المدونة وبالمقاس الذى تريدة بتقنية CSS
1- ابحث عن الكود التالى
 ]]></b:skin> 

2- ضع الكود التالى مباشرة اعلى الكود السابق

#header, body#layout #header {width:30%;display:inline-block;float:right;}
#header-right, body#layout #header-right {width:60%;display:inline-block;float:right;padding:5px;}
#header-right .widget {margin:0;}
 
الان وبكل سهولة يمكنك وضع البانر او اعلان ادسنس او مربع البحث او ازرار المواقع الاجتماعية او اى شيى تريد
اذهب الى : التخطيط سوف تجد السيكشن الجديد بجوار عنوان المدونة فى منطقة الهيدر  


* يمكن التعديل فى كود css يتناسب مع المدونة 

احصل دوريا على اخر مقالات كود بلوجر

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

  1. مشكور و جزاك الله خيرا
    AbdouBatna.blogspot.com

    ردحذف
  2. ما شاء الله عليك ,, أحسنت :)

    ردحذف
    الردود
    1. السلام عليكم

      شكرا لك اخى اسلام واهلا بك فى مدونتك كود بلوجر

      حذف
  3. لا استطيع الضغط على اضافة اداه فى السيكشن الجديد

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

    قوالب بلوجر المخصصة تحتوى غالبا على اخطاء فى اكواد التصميم مما يؤدى الى عمل المدونة بشكل غير مستقر ( كما هو الحال عندك . عدم تمكنك من اضافة اداة )

    عموما انا مستعد لتقديم المساعدة فى وقت لزوار مدونة كود بلوجر

    انتظر ردك للعمل على حل المشكلة الخاصة باضافة بنر بجوار عنوان المدونة بلوجر

    اتمنى لك التوفيق

    ردحذف
  5. انا عملت الخطواط كلها بالظبط بس مفيش كود ظهر جديد لاضافة اداة بجوار بانر عنوان المدونة

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

      يارب تكون الفكرة وصلت

      حذف
  6. ويبقى الان ان تجعل السيكش الجديد بجانب عنوان المدونة وبالمقاس الذى تريدة بتقنية CSS

    كيفية تغير المقاس والتعديل علية ؟ ممكن تحدد ما يجب ان يتغير فى هذا الكود؟

    ردحذف
    الردود
    1. السلام عليكم

      width:30% حجم عرض عنوان ووصف المدونة
      width:60% حجم عرض البنر بجوار عنوان المدونة

      اذا اردت تخصيص اى شيى لتتناسب مع المدونة فقد اعلمنى ذلك :)

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

    ردحذف
  8. الردود
    1. السلام عليكم

      اخى الكريم ارجو معرفة البيانات التالية لمساعدتك على اكمال اضافة الاداة بشكل سليم

      نوع قالب بلوجر .. افتراضى ام مخصص

      لغة المدونة عربى ام انجليزى

      حجم البنر الذى تريد اضافة

      ؟ ؟ ؟

      حذف
  9. موضوع رائع وشكرا... مدونة أحسن تهييئ تهم مختلف المواضيع التي تخص حياتك المعلوماتية. بالإضافة إلى اخبار التكنولوجيا والإعلاميات على مدار الساعة... لاتترددو في زيارتها
    www.TOPpreparation.blogspot.com

    ردحذف
  10. شكرا علي الشرح الممتاز

    http://alyomtop.blogspot.com/

    ردحذف
  11. مشكور اخي على المساعدة لكن أحتاج أن تساعدني فالاعلان ينزل الى اسفل اللوغو

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

      ارسل لى الكود الذى استخدمتة حتى اتمكن من معرفة مكان المشكلة والعمل على حلها فورا او ارسل لى عنوان المدونة

      عموما حاول تغيير هذا الرقم 30% الى 20%

      وتغيير ايضا هذا الرقم 5px الى 0px

      بالتوفيق ان شاء الله

      حذف
    2. بارك الله فيك اخي انا أستعمل قالب الحرية الاخباري والمستخ
      م في موقع فناجيل
      يمكنك تحميله من هنا http://www.mediafire.com/?96gfbk8hg4f1o6o

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

    ردحذف
  13. هل الامر صعب كثيرا لهذه الدرجة يا اخي

    ردحذف
    الردود
    1. الاخ الكريم / المعلم .. السلام عليكم ورحمة الله وبركاتة

      اعتذر عن تاخرى فى الرد ,, الموضوع بسيط جدا وليس بة اى تعقيد وبامكانك اضافتة فى خطوتين فقط ,, لكى اتمكن من مساعدتك وضحلى المشكلة معاك اية بالضبط واذا كان القالب بتاعك مش نموذج بلوجر الافتراضى اذا اكيد سوف تواجة بعض العقبات ,, ولكن برضة العملية هتم فى خطوتين فقط

      المهم لو تبعتلى عنوان المدونة عشان اقدر اطلع على القالب واكتشف الاختلاف فى كود القالب بينة وبين القالب الافتراضى الذى قمت بتوضيح الشرح على اساسة

      بالتوفيق ان شاء الله

      حذف
    2. مشكور اخي كود على سعة صدرك ما أريده بالضبط هو وضع اعلان افقي لأدسنس يكون كبيرا من حجم 728x90 ويكون منحازا الى اليسار بينما اللوغو صغير مثلا 200x90 ومنحازا الى اليمين عنوان مدونتي هو http://moaalim.blogspot.com/
      وأستعمل قالب الحرية الاخباري شكرا مرة اخرى سيدي الكريم

      حذف
    3. السلام عليكم ... ممكن يكون سبب عدم ظهور الاعلان فى الهيدر هو عدم ضبط مساحات الاعلان و اللوجو وهذا يمكنك عملة بسهولة :

      قم بتغيرر القيم التالية فى الكود الخاص ب CSS

      5px قم بتعديلة الى 0px
      30px قم بتعديلة الى 20px
      60px قم تعديلة الى 75px

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

      بالتوفيق ان شاء الله

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

    ردحذف
    الردود
    1. السلام عليكم ... ممكن يكون سبب عدم ظهور الاعلان فى الهيدر هو عدم ضبط مساحات الاعلان و اللوجو وهذا يمكنك عملة بسهولة :

      قم بتغيرر القيم التالية فى الكود الخاص ب CSS

      5px قم بتعديلة الى 0px
      30px قم بتعديلة الى 20px
      60px قم تعديلة الى 75px

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

      بالتوفيق ان شاء الله

      حذف
    2. شكرا جزيلا على سرعة الرد
      ولكنى دخلت على ال cssوجدتها فارغه كمابالصوره التاليه
      http://img05.arabsh.com/uploads/image/2013/01/23/0d30404360f305.jpg

      حذف
    3. السلام عليكم

      هذا هو كود CSSالذى كنت اقصدة

      #header, body#layout #header {width:30%;display:inline-block;float:right;}
      #header-right, body#layout #header-right {width:60%;display:inline-block;float:right;padding:5px;}
      #header-right .widget {margin:0;}

      والذى قد قمت باضافتة سابقا عند تركيب الاداة

      وليست تبويب اضافة CSS من لوحة تحكم بلوجر ,, المهم قم باضافة وتغيير القيم كما وضحتها بالتعليق السابق

      بالتوفيق

      حذف
  15. يا اخ ابوس ايدك والله العظيم ما لقيت الكود الاولانى نهاااااااااااااااااائيا ايش الحل

    ردحذف
  16. مشكوووووووور لكن لددى مشكلة

    بحثت عن الكود والله ولم اجده ما الحل هل ارسل لك نسخة تعديل عليها ام ماذا ؟؟؟؟؟؟؟؟؟؟؟؟

    ردحذف
  17. اخى الفاضل طيب انا ما لقيت الكود الاولانى شو اعمل ؟؟؟؟؟؟؟؟؟؟؟؟؟؟ ارجو الرد سريعا

    ردحذف
  18. الاخ احمد على , السلام عليكم ورحمة الله وبركاتة

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

    اولا ارسل لى نسخة من القالب الخاص بك حتى استطيع تحديد الكود داخل القالب لتتمكن من التعديل علية

    من دون نسخة من القالب اسف مش استطيع مساعدتك للاسف

    تقدر تراسلنى بنسخة القالب على البريد الالكترونى الخاص

    egx.msm@gmail.com

    ومن فضلك عرف نفسك والمشكلة من خلال عنوان الرسالة حتى استطيع تمييزها والرد عليك

    شكرا

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

      حذف
  19. السلام عليكم الاخ / غير معروف اهلا بك

    ياريت تبعتلى نسخة من القالب او حتى سكرين شوت لتحديد المشكلة ومعرفة طريقة حلها

    egx.msm@gmail.com

    fhgj,tdr hk ahx hggi

    ردحذف
  20. هل أرسل لك القالب لتقوم بحل هذه المشكلة من فضلك

    ردحذف
  21. مشكور اخى الكريم

    ردحذف
  22. مشكور اخي

    http://shamil4dev.blogspot.com/

    ردحذف
  23. السلام عليكم

    جزاك الله خيرا اخى على الموضوع الجميل
    نفعنا الله واياك بكل خير ونفع بنا العباد

    تحياتى لجهدك الطيب
    صور مشبات
    http://shomane.blogspot.com/

    http://mchabat.3abber.com

    ردحذف
  24. شكرا لقد نجحت معي

    هذا رابط مدونة البرمجيات العالمية المتطورة
    http://globalsoftwarecollector.blogspot.com/

    ردحذف
  25. شكرا لك تم التطبيق http://tahmiile.blogspot.com/

    ردحذف
  26. شكرا لك
    games7world.blogspot.com

    ردحذف
  27. السلام عليكم يا سيدى انا عندى نفس المشكله لا تظهر عندى الاضافه بتاعت الموضوع لو ينفع ابعتلك القالب وتشوف المشكله فين اكون شاكر جدا ليك

    ردحذف
  28. اولا هنالك مشكله انت واضع كود 'header-right' المفروض يكون 'header-left يسار الهيدر مش يمين فى الجهه اليمنى اللوج
    ما علينا
    انا جربت وغيرت الى right الى left ووضعت الكود الاداه ظهرت تمام انما اداة رأس الصفحه اختفت

    فتحت المدونه على الصفحه الرئيسيه ... ظهرت رساله " لقد حدث خطأ " ... ده فى رئيسيه المدونه وطبعا انا كنت واخد نسخه احتياطيه ورجعت كل شى زى ما كان والمدونه اشتغلت ... عايز اعرف ايه المشكله الله يبارلك

    ردحذف
  29. شكرا علي الموضوع الرائع
    مدونة اضافات و دروس بلوجر
    http://msstra.blogspot.com/

    ردحذف
  30. شكراا لك على الشرح الراائع

    ردحذف
  31. مرحبا
    بحاجة لمساعدة ماسة ان امكن؟
    احاول وضع صورة كعنوان للمدونة، والمشكله انها على كافة مدوناتي هذه المشكلة تواجهنني وليست على مدونه واحده فقط.... فهل يمكن مساعدتي؟ بالاضافة لمشاكل بسيطة اخرى؟
    ارجو الرد
    او مراسلتي على الاميل: mariam_jena@live.com

    ردحذف
  32. شكرااااااااااااااااااااااااااااااااااااااااا

    ردحذف
  33. لقد واجهت صعوبه في بدايه الامر ولكن بعذ ذلك ولله الحمد مشت معي بشكل سليم
    اخي الكريم شكر لجهودك الطيبه واتمنئ التواصل مع كل الشكر

    ردحذف
  34. رائع تم تطبيقه بنجاح :)

    ردحذف
  35. http://world-2016-free.blogspot.com/
    Thanks

    ردحذف


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