قراءة للموضوع
بسم الله الرحمن الرحيم ، اخواني المدونون و زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . امس تحدثنا عن كيفية اضافة وعمل أداة آخر موضيع المدونة مع صور مصغرة ؟ ولكن اليوم سنتطرق الى درسا جديد وحصري في مدونتنا هذه عن كيفية عمل بنرات اعلانية في اعلى الصفحة ؟ اي فوق الهيدر ، او كيفية اضافة اعلانات جوجل ادسينس فوق الهيدر ؟
طبعا اخوتي الكرام اكيد وبلا شك قد شاهدتم الكثير من المواقع الالكترونية تعمل هذه المساحة الاعلانية مثل المواقع الرياضة والاخبارية والمنتديات الكبيرة ، ولكن السؤال لماذا ؟ انا في اعتقداي ان البعض منهم لديه نية لعمل هذه البنرات الاعلانية لغرض كسب المال اون لاين يعني يعرض سلع ومنتجات الاخرين مقابل المال زهيد او يعلن لمواقع الكترونية اخرى . والبعض منهم لغرض التبادل الاعلاني فقط ليس لغرض الفلوس ( ظفني في موقعك اظيفك في موقعي ) اي للاشهار . عموماً اذا عندك النية لكسب المال من موقعك او مدونتك الالكترونية ، فاالفرصة هي ان تعمل مساحة اعلانية في مدونتك . طبعا هناك اماكن عديدة وجيدة وبارزة بحيث تعمل مساحة اعلانية تسويقية فيها مثلا اعلى الصفحة ( فوق الهيد ) ، وفي نفس الهيدر ، وتحت الهيدر ، وفي الفوتر ( اسفل الصفحة ) ، وكذلك بجانب الصفحة ( سايد بار ) . لكن اليوم سنتحدث في درسنا هذا عن كيفية عمل بنرات اعلانية فوق الهيدر ؟ انظر الصورة التالية كمثال توضحي للبنرات الاعلانية اعلى الصفحة :
اذاً دعونا نبدا على خطوة خطوة - Step by step :
1 - ادخل على حسابك في بلوجر .
2 - من لوحة التحكم انقر من القائمة على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .
3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .
4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .
5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .
3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .
4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .
5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .
<div id='outer-wrapper'>
 |
| اضغط الصورة للتكبير |
6 - انسخ الكود التالي وضعه تحته مباشرة .
<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>
<b:section class='topads' id='topads' preferred='yes'/>
</div>
لاحظ الصورة :
 |
| اضافة كود البنرات الاعلانية |
]]></b:skin>
/* 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;}
----------------------------------------------- */
#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;}
لاحظ الصورة :
 |
| اضافة الكود نمرة 7 |
9 - قم بعمل حفظ للقالب ثم توجه او انقر على تخطيط .
10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم ( اضافة اداة ) انشئ فوق الهيدر وتحت Navbar مباشرة .
لاحظ الصورة :
 |
| النتيجة النهائية |
11 - الان لإضافة بنرات اعلانية او اعلانات جوجل ادسينس فوق الهيد قم بالنقر على ( اضافة اداة ) الجديدة التي تم انشاءها الان فوق الهيدر كما في الصورة اعلاه ( ليس السايد بار ) ثم من قائمة الادوات المنبثقة اختر اداة جافا HTML وقم بوضع كود البنر ثم اعمل معاينة للتأكد من عملك ، ثم حفظ .
ملاحظة : بامكانك ان تضع اربعة اكواد في اداة جافا HTML الواحدة او اكثر حسب تصميم مساحة البنرات لديك، بحيث تكون البنرات الاعلانية على شكل افقي متسلسلة واحد تلو الاخر ( من اليمين الى اليسار ) لاحظ الصورة الاولى كل الاكواد في اداة جافا HTML واحدة . بينما لو اضفت اداة HTML اولا ثم وضعت كود بنر واحد فيها ثم قمت باضافة اداة HTML ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .
لاحظ الصور التالية :
الخلاصة : طبعا في هذا الدرس تعلمت كيف تضيف عنصر جديد من عناصر الصفحة فوق الهيدر وايظا كيفية اضافة مساحات اعلانية ( بنرات اعلانية ) وكذلك اضافة اعلانات جوجل ادسينس ،،،
ملاحــــــظة مهمة : بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود </head> تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5 . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي </head> ثم نظرت تحته فوجدت الكود كالصورة التالية :
بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :
واخيرا نرحب بتعليقاتكم واي سؤال او استفسار نحن مستعدين للاجابة
المشاركات
20 التعليقات:
مشكور جدا على الموضوع بس بعد اذنك كنت عاوز اضبط خاصيه rss لمدونه وربطها بالفيس وتويتر وجوجل بلس عاجل لو سمح يشرفنى ان اكون اول من يرد عليك
باذن الله اليوم اكتب موضوع طلبك وغدا الخميس صباحا انزلة على المدونة ويشرفني زيارتك للمدونة
مجهود تشكر علية الله يجزاكـ الف خير على ماتبذل يعطيكـ العافية
مووووضوع رائع
مووووضوع رائع
اخي الكريم انا اشكرك على جهودك الواضحة!! ولاكن انا عملت بحث عن الكود يلي بلأول بس ما طلعلي شي من مرة ؟؟
لماذا اخي ؟؟
ارجو الرد والمساعدة واكون من الشاكرين !
اخي موقع ( فكرة جديدة ) حياك الله واشكرك على ملاحظتك وتنبيهك لي صحيح بعص المدونات لا يوجد فيها نفس كود خطوة رقم 5 تماماً ، ولهذا وبعد تبيهك لي قمت بشرح( ملاحظة مهمة ) آخر الموضوع ( الدرس ) واعطيت مثال آخر عن مدونة لدي لا يوجد بها نفس كود نمرة 5 وشرحتها بمثال بالصور قم بقراءتها جيدا حتى تفهم الفكرة اكثر ،،،
الملاحظة تجدها آخر درسنا هذا انظر فوق ،،
شكراا لكاخي خالد محمد لقد قرائت الملاحظة ونظرت في الصور جدا ونسخت الكود وطلع عندي بس ما لقيت الكود المطلوب بعده !!
كنت سوف انسخ الكود في التعليق ولاكن لا يجوز للاسف ولاكن انا متأكد انه ليس الكود الذي في الصورة في ملاحظتك اخي,, لا اعرف لماذا ؟ اي مساعدة اكوون مشكور جدااا !!
مدونة
"Allo Pc"
ترحب بكم أجمل الترحيب
و تتمنى لكم وقتا سعيدا مليئا بالحب كما يحبه الله و يرضاه
فأهلا بكم في المدونة المباركة إن شاء الله
و نرجوا أن تفيدوا و تستفيدوا منها
لكم منا أجمل المنى و أزكى التحيات
http://allopcinfo.blogspot.com
موفقيييييييييييييين
الجديد .. الجديد... فين الموضوعات الجديدة
الله يوفقكم..ع المجهود...:)
Allah is with you ... :)
موفقين .. وعايزيين نشوف الجديد !؟
شكراً على المجهود .. دمتم بخير :)
فجئنا دوووما بالجديد ... موفق
اخي مشكووووور شارك مدونتي 👈 http://www.algerien4u.ag
انا مش موجود عندي قائمة قالب بس في شايف THML
ارجو الرد على الموضوع
تصميم بنرات
تصميم مواقع الانترنت
افضل شركات برمجة
شركة برمجة تطبيقات
انشاء تطبيق متجر الكتروني
انشاء موقع الكتروني تجاري
فتح موقع الكتروني
صنع موقع الكتروني
انشاء متجر الكتروني
شركة تصميم تطبيقات
شركات تصميم مواقع الكترونية