الأربعاء، 7 نوفمبر 2012
اضافة اعلان او شريط بحث بجانب عنوان المدونة
اضافة اعلان او شريط بحث بجانب عنوان المدونة لـ(Blogger)
اضافة بنر عريض بجانب عنوان مدونة بلوجر بتقنية CSS لاحظت دائما فى مواقع قوالب بلوجر طلبات من زوار المدونة التى تتميز فى بالقالب الذى يحتوى على اعلان ادسنس بجوار عنوان المدونة بهذا الشكل فى الصورة , ليصبح هيدر المدونة عبارة عن عنوان المدونة وبنر اعلان ادسنس مثلا او شريط بحث...
طريقة اضافة بنر فى هيدر المدونة بسيطة جدا وهى عن طريق اضافة سيكشن بهيدر المدونة والسيكشن عبارة عن إضافة أداة , بعد ذلك يمكنك بسهولة اختيار اى شكل ترغبه في منطقة الهيدر
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 يتناسب مع المدونة
اذهب الى : التخطيط سوف تجد السيكشن الجديد بجوار عنوان المدونة فى منطقة الهيدر
* يمكن التعديل فى كود css يتناسب مع المدونة
... نهاية الشرح ...
اقرا ايضا :
ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل
بقلم : Abda3Design
لخدمات التصميم والبرمجة
إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية كما تتميز مؤسسة "ابداع ديزاين" . بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة
ضع تعليقك
5 التعليقات:
جزاك الله خيرا اخى|اخوك جابر حلمي|مدونة جابر حلمي ترحب بكم لزيارتها gaberhelmy.blogspot.com
شكرا
http://njbl.blogspot.com/
مشكور
مدونتي الشخصية
http://www.allmohtarife.com/
لم أجد الكود يا أخي الكريم، ماذا أفعل ؟
http://aljamih.blogspot.com/
ابداااااااع بشكل خيالي
شكرا جزيلا لكم . بارك الله فيكم ورضا عنكم :)))
إرسال تعليق