الثلاثاء، 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 حتى اصبح مثل الصورة التالية :


















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

20 التعليقات:

bahaa ali يقول...

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

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

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

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

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

حواء يقول...

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

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

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

قسم الاكترونيات يقول...

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

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

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

قسم الاكترونيات يقول...

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

Allo Pc يقول...

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

Übersiedlung Wien يقول...

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

Bauschuttentsorgung Wien يقول...

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

Transport Wien يقول...

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

Lagerung يقول...

Allah is with you ... :)

Umzug in die Schweiz يقول...

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

Umzug nach Luxemburg يقول...

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

Wohnungsräumung يقول...

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

Bilal zouari يقول...

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

Organist يقول...

انا مش موجود عندي قائمة قالب بس في شايف THML
ارجو الرد على الموضوع

تصميم بنرات إعلانية يقول...

تصميم بنرات

Omar Mokhtar يقول...

تصميم مواقع الانترنت

افضل شركات برمجة

شركة برمجة تطبيقات

انشاء تطبيق متجر الكتروني

انشاء موقع الكتروني تجاري

فتح موقع الكتروني

صنع موقع الكتروني

انشاء متجر الكتروني

شركة تصميم تطبيقات

شركات تصميم مواقع الكترونية