الأحد، 17 أبريل 2016

الدرس 18: طريقة عمل و اضافة مساحة اعلانية Banner في مدونة بلوجر




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



كما ذكرت ، سأ تكلم عن طريقة اقامة مكان اعلاني جديد . مثالا سأضيفه تحت ا لشريط  الخاص بالاقسام . هذه الظريقة التي سأتنا ولها بالشرح هي ثرية ومهمة للمبتدئين الذين ليست لهم دراية و فكرة حول أكواد html و لغة CSS أي الكودالذي يعطي كيفية ظهور الصفحة من حيث الطول و العرض و الالوان و الخلفية و الخط اي تصميم الورقة وتنسيقيها و توضيب النصوص والتحكم في وضع المقاييس . لغة CSS لها مميزات عديدة . هذه مجرد نبذة فقط .اذن قلت الطريقة ثرية لأنك ستتعلم كيفية انشاء حيز اعلاني داخل مدونتك  ثم ستكشف و تفهم و تتعلم الأكواد التي يمكنك ان تستعملها حتى تتدرب خطوة بعد خطوة على كيفية تنسيق مدونتك و تطورها شكلا و مضمونا حتى تصبح مفضلة لدى الزوار و مرغوبة من طرف محركات البحث .
نأتي الان الى الإضافة  وقبل ذلك لا بد من شرح كلمة "div" . عندما تكشف كود sources لصفحة واب
بل لنقل تدخل الى قالب مدونتك ستجده بكثرة .بكل بساطة واختصار يعني حيز ، جزء من مكان ، قسط من مساحة ،  
نأتي الان الى الإضافة  وقبل ذلك لا بد من شرح  كلمة "div"لأن الفاهيم في علاقة ببعضها  . عندما تكشف كود sources لصفحة واب
بل لنقل تدخل الى قالب مدونتك ستجده بكثرة .بكل بساطة واختصار يعني حيز ، جزء من مكان ، قسط من مساحة ،
. مثلا عندما نكتب
                  الان اكتب هذا الكود  طبعا اذا تركت الكود كما تركته انا فإنك ارتكبت خطأ و عندما تريد الخروج وتضغط على حفظ النموذج سيخبرك البرنامج بحدوث خطأ في الكود ثم يعين لك ذلك . اذن انت قم بغلق الديف
 فهذا يعني اخبرنا البرنامج أن  يخصص حيز لصاحب معرف وهو ' header2' اي رأس صفحة ثان . و سيسكن هذا الحيز  صورة مستضافة تحت الرابط  http://www4.0zz0.com/2016/04/16/23/318507481
وهي من صنف png وطبعا البرنامج اي اللغة التي نبرمج بها سيقوم بحساباته ثم يقبل او يرفض . طبعا . هنا يمكن اضافة معطيات اخرى مع الصورة اي  مثلا :width و hight و alt و   target و blank . يمكنك مزيد الاطلاع على هذا . ثم في الختام نغلق الديف
.فالمساحة هنا استغلتها الصورة فقط في هذا المثال التوضيحي الخاص بمفهوم كلمة "div" وهي التي تهمنا . ذلك ان الحديث عن انشاء حيز اعلاني نحتاجه لاستضافة وادراج لوحات اشهارية من شركات بعد أن نقوم بالتسجيل عندها . ..انظر في مدونتي فاللوجو logo  موجود في حيز و Banner في حيز يعني كل واحد في ديف ولكن الأثنان معا في ديف رئيسي لأن" les" div تحتضن بعضها كبير داخله متوسط ومتوسط داخله صغير و صغير داخله صخير جدا ...
في هذا الدرس ، الحيز الاعلاني نريداضافته تحت رأس الصفحة اي تحت header . طبيعي سيكون مباشرة تحت حيز اي ديف الشريط الخاص بالاقسام معنى ذلك تحت التسميات  الانترنت ،سيو برامج ...
 هنا سؤال قد يتبادر الى ذهنك ، طبعا اذا استوعبت الشرح الدقيق الى حد هذه المرحلة .اذن السؤال هو . كيف ساحدد ديف شريط الاقسام ؟ فماهي الطريقة  التي سأتوخاها دون جهد زائدالى رسم الحدود السفلى لشريط الاقسام ؟ طبعا حتى افهم اين انشئ الحيز الجديد و الغير مضاف على تخطيط قالب مدونتي مسبقا. هذا الذي عليه تتاح لي فرصة ادراج بل الصاق الكود الخاص بإضافة اعلان ما . العملية سهلة جدا . عليك التركيز فقط . لا تنس اخذ نسخة احتياطية من قالبك حتى لما يحدث خطأ و تعسر الامور ترجع من البداية وذلك بتحميل النسخة الاحتياطية .
تذهب الى الكود html في قالبك وتحدد الديف المغلق الخاص بالاقسام . وهنا ضروري ترك جيز صغير بين شريط الاقسام و لوحة الاعلان ، حتى لا تلتحم وتلتصق المسافة الاعلانية banner بشريط الاقسام. الحل نقم باضافة
ترك فضاء .< /br>  هنا  حددت  كلمة header2  . يمكنك تعيين اي كلمة ،ستعر عندما تضيف اكواد CSS الخاصة بها ، اذن اختيا اسم لكل "div" ،سييسر لك عملية التمييز بينها اثناء العمل والاشتغال على لغة CSS لأن هذا من الأفضل ان يكون ملف مستقل حتى نخفف من ثقل تحميل الصفحة الرئيسية . اذن نعود الى الطريقة . بعد ترك الفضاء ، سنكتب <'div id ='header2> ثم اضيف عنوان الإعلان مثلا صورة ما فيكون الكود  النهائي في ملف html على هذا النحو ( انقر على الصورة لتكبيرها وتتضح لك رؤية الكود) تابع الشرح من هنا

  



ليست هناك تعليقات :

إرسال تعليق

يتم التشغيل بواسطة Blogger.