الثلاثاء، 17 يناير، 2012

كيف تعمل اوتظيف مساحات اعلانية فوق هيدر المدونة ؟ - بنرات اعلانية

قراءة للموضوع

بسم الله الرحمن الرحيم ، اخواني المدونون و زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . امس تحدثنا عن كيفية اضافة وعمل أداة آخر موضيع المدونة مع صور مصغرة ؟ ولكن اليوم سنتطرق الى درسا جديد وحصري في مدونتنا هذه عن كيفية عمل بنرات اعلانية في اعلى الصفحة ؟ اي فوق الهيدر ، او كيفية اضافة اعلانات جوجل ادسينس فوق الهيدر ؟
طبعا اخوتي الكرام اكيد وبلا شك قد شاهدتم الكثير من المواقع الالكترونية تعمل هذه المساحة الاعلانية مثل المواقع الرياضة والاخبارية والمنتديات الكبيرة ، ولكن السؤال لماذا ؟ انا في اعتقداي ان البعض منهم لديه نية لعمل هذه البنرات الاعلانية لغرض كسب المال اون لاين يعني يعرض سلع ومنتجات الاخرين مقابل المال زهيد او يعلن لمواقع الكترونية اخرى . والبعض منهم لغرض التبادل الاعلاني فقط ليس لغرض الفلوس ( ظفني في موقعك اظيفك في موقعي ) اي للاشهار . عموماً اذا عندك النية لكسب المال من موقعك او مدونتك الالكترونية  ، فاالفرصة هي ان تعمل مساحة اعلانية في مدونتك . طبعا هناك اماكن عديدة وجيدة وبارزة بحيث تعمل مساحة اعلانية تسويقية فيها مثلا اعلى الصفحة ( فوق الهيد ) ، وفي نفس الهيدر ، وتحت الهيدر ، وفي الفوتر ( اسفل الصفحة ) ، وكذلك بجانب الصفحة ( سايد بار ) . لكن اليوم سنتحدث في درسنا هذا عن كيفية عمل بنرات اعلانية فوق الهيدر ؟ انظر الصورة التالية كمثال توضحي للبنرات الاعلانية اعلى الصفحة :



اذاً دعونا نبدا على خطوة خطوة - Step by step :

1 - ادخل على حسابك في بلوجر .

2 - من لوحة التحكم انقر من القائمة على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .

4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .

5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .

<div id='outer-wrapper'>
لاحظ الصورة :

اضغط الصورة للتكبير


6 - انسخ الكود التالي وضعه تحته مباشرة .

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

لاحظ الصورة :

اضافة كود البنرات الاعلانية

7 - قم بالبحث عن الكود التالي :
]]></b:skin>
8 - ثم ضع هذا الكود فوقه مباشرة :

/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

ملاحظة : طبعا هذا الكود من نمط  CSS Styling وضع لتنسيق البنرات الاعلانية من ناحية المحاذاة وغيرها،  في حالة تريد تغيير في المحاذاة لسبب ما قم بالتغيير فيه . بينما كود خطوة رقم 6 وضع لانشاء عنصر جديد ( مربع اضافة اداة )  في قائمة التخطيط .

لاحظ الصورة :

اضافة الكود نمرة 7










9 - قم بعمل حفظ للقالب ثم توجه او انقر على تخطيط .

10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم ( اضافة اداة ) انشئ فوق الهيدر وتحت Navbar مباشرة .
لاحظ الصورة :



النتيجة النهائية 



















11 - الان لإضافة بنرات اعلانية او اعلانات جوجل ادسينس فوق الهيد قم بالنقر على ( اضافة اداة ) الجديدة التي تم انشاءها الان فوق الهيدر كما في الصورة اعلاه ( ليس السايد بار ) ثم من قائمة الادوات المنبثقة اختر اداة جافا HTML وقم بوضع كود البنر ثم اعمل معاينة للتأكد من عملك ، ثم حفظ .
ملاحظة : بامكانك ان تضع اربعة اكواد في اداة جافا HTML الواحدة او  اكثر حسب تصميم مساحة البنرات لديك، بحيث تكون البنرات الاعلانية على شكل افقي متسلسلة واحد تلو الاخر ( من اليمين الى اليسار ) لاحظ الصورة الاولى كل الاكواد في اداة جافا HTML واحدة . بينما لو اضفت اداة HTML اولا ثم وضعت كود بنر واحد فيها ثم قمت باضافة اداة HTML ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .
لاحظ الصور التالية :




الخلاصة : طبعا في هذا الدرس تعلمت كيف تضيف عنصر جديد من عناصر الصفحة فوق الهيدر وايظا كيفية اضافة مساحات اعلانية ( بنرات اعلانية ) وكذلك اضافة اعلانات جوجل ادسينس ،،،

ملاحــــــظة مهمة : بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود  </head>  تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5  . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي  </head> ثم نظرت تحته فوجدت الكود كالصورة التالية  :













بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :


















واخيرا نرحب بتعليقاتكم واي سؤال او استفسار نحن مستعدين للاجابة

22 التعليقات:

bahaa ali يقول...

مشكور جدا على الموضوع بس بعد اذنك كنت عاوز اضبط خاصيه rss لمدونه وربطها بالفيس وتويتر وجوجل بلس عاجل لو سمح يشرفنى ان اكون اول من يرد عليك

bahaa ali يقول...

مشكور

خالد محمد (ابوخلود) يقول...

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

ܓܨ بہرق آلہشہ.¸.ـٍـوق ܓܨ يقول...

مجهود تشكر علية الله يجزاكـ الف خير على ماتبذل يعطيكـ العافية

حواء يقول...

مووووضوع رائع

أكلات رجيم يقول...

مووووضوع رائع

موقع( فكرة جديدة )2012 يقول...

اخي الكريم انا اشكرك على جهودك الواضحة!! ولاكن انا عملت بحث عن الكود يلي بلأول بس ما طلعلي شي من مرة ؟؟
لماذا اخي ؟؟
ارجو الرد والمساعدة واكون من الشاكرين !

خالد محمد (ابوخلود) يقول...

اخي موقع ( فكرة جديدة ) حياك الله واشكرك على ملاحظتك وتنبيهك لي صحيح بعص المدونات لا يوجد فيها نفس كود خطوة رقم 5 تماماً ، ولهذا وبعد تبيهك لي قمت بشرح( ملاحظة مهمة ) آخر الموضوع ( الدرس ) واعطيت مثال آخر عن مدونة لدي لا يوجد بها نفس كود نمرة 5 وشرحتها بمثال بالصور قم بقراءتها جيدا حتى تفهم الفكرة اكثر ،،،
الملاحظة تجدها آخر درسنا هذا انظر فوق ،،

موقع( فكرة جديدة )2012 يقول...

شكراا لكاخي خالد محمد لقد قرائت الملاحظة ونظرت في الصور جدا ونسخت الكود وطلع عندي بس ما لقيت الكود المطلوب بعده !!
كنت سوف انسخ الكود في التعليق ولاكن لا يجوز للاسف ولاكن انا متأكد انه ليس الكود الذي في الصورة في ملاحظتك اخي,, لا اعرف لماذا ؟ اي مساعدة اكوون مشكور جدااا !!

Allo Pc يقول...

مدونة
"Allo Pc"
ترحب بكم أجمل الترحيب
و تتمنى لكم وقتا سعيدا مليئا بالحب كما يحبه الله و يرضاه
فأهلا بكم في المدونة المباركة إن شاء الله
و نرجوا أن تفيدوا و تستفيدوا منها
لكم منا أجمل المنى و أزكى التحيات
http://allopcinfo.blogspot.com

Übersiedlung Wien يقول...

موفقيييييييييييييين

Bauschuttentsorgung Wien يقول...

الجديد .. الجديد... فين الموضوعات الجديدة

Transport Wien يقول...

الله يوفقكم..ع المجهود...:)

Lagerung يقول...

Allah is with you ... :)

Umzug in die Schweiz يقول...

موفقين .. وعايزيين نشوف الجديد !؟

umzug يقول...

räumung
umzug wien
Entrümpelung
Entrümpelung wien
umzug
umzüge
übersiedlung
firmenumzug
firmenumzüge
umzugsfirma
übersiedlung wien
umzug wien
transport
kleintransporte
möbeltransport
botendienst
transport wien
umzug nach deutschland
Umzug nach Österreich
entrümpelungen
entrümpelung wien
entsorgung
entsorgung wien
Müllentsorgung
räumungen
Haushaltsauflösung
Wohnungsauflösung
Verlassenschaft
Zwangsräumung
delogierung
räumungen wien
reinigung
privatreinigung
gartenarbeit

umzug يقول...

reinigung wien
lager
lager wien
möbel umzug wien
wohnungsumzug
internationale umzuege
Umzug nach Italien
Umzug nach Luxemburg
umzug nach holland
Wohnungsentrümpelung
Kellerentrümpelung
Dachbodenentrümplung
sperrmüllentsorgung
Bauschuttentsorgung
Containerentsorgung
Dachboden Entsorgung
Wohnungsräumung Gratis
Hausräumung
Kellerräumung
the home page
living room
kitchen photo
wood doors
children rooms
modern bath
bathroom
bathrooms
Sharm
Sharm el Sheikh
Sharm elsheikh
Sharm sheikh
Sharm sheik

umzug يقول...

نتيجة الانتخابات
نتيجة الانتخابات الرئاسية
نتائج انتخابات الرئاسة المصرية
نتيجة الشهادة الابتدائية
نتيجة الصف السادس الابتدائى 2012
نتيجة الصف السادس الابتدائى
الانتخابات الرئاسية المصرية
نتيجة الشهادة الاعدادية
نتيجة الشهادة الاعدادية 2012
نتيجة الصف الثالث الاعدادى
نتيجة الثانوية العامة
نتيجة الثانوية العامة بالاسم
نتيجة الشهادة الثانوية الازهرية
نتيجة الدبلومات الفنية
شركة فوركس
شركات فوركس
شركات الفوركس
شركة الفوركس
forex news
forex
online forex
forex online
forex
تعلم الفوركس
تعليم الفوركس
تعليم فوركس
تعلم فوركس
تجارة العملات
تجارة العملة
تجارة الذهب
ويندسور بروكر
ويندسور

umzug يقول...

youtube
جريدة الوطن
وظائف
youtube movies
youtube
youtube
فوركس
اسعار الذهب
اسعار العملات
الذهب
اخبار مصر
دورة تحليل فني
دورة تحليل مالي
دورة الفوركس
دورة فوركس
دورة تحليل الاسهم
دورات تحليل فني
دورات تحليل الاسهم
دورات تحليل مالي
دورات بورصة
دورة بورصة
كورس بورصة
كورسات بورصة
كورس فوركس
كورسات فوركس
كورس الفوركس
توصيات فوركس
يوتيوب
ادارة حسابات
ادارة حسابات فوركس
ادارة حسابات عملات
ادارة محافظ
ادراة حسابات العملات
تجارة فوركس
تجارة العملات
كورسات

Umzug nach Luxemburg يقول...

شكراً على المجهود .. دمتم بخير :)

Wohnungsräumung يقول...

فجئنا دوووما بالجديد ... موفق

الربح الشبكي يقول...

اخي مشكووووور شارك مدونتي 👈 http://www.algerien4u.ag