كيفية عرض التدوينات فى بلوجر + المساحة الاعلانية

برمجة تدوينات بلوجر والمساحات الاعلانية

طريقة عرض التدوينات بداخل مدونتك:-

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

كيفية نشر التدوينات:

يجب عليك اولا ان تقوم بنشر بعض التدوينات حتى تقوم بعرضها بالنهاية داخل مدونتك لكى تقوم بنشر تدوينات يجب عليك ان تتبع الخطوات التالية:

1- الدخول الى لو التحكم الخاصة بمدونتك عبر هذا الرابط هنا .

2- اختر من على اعلى يمين الصفحة كلمة مشاركة جديدة.

3- الان سوف تظهر لك صفحة جديدة للإنشاء تدوينك اولا على يسار الصفحة توجد التصنيفات وتاريخ النشر والموقع ووصف البحث الى اخره.

4- على الجزء الاخر يمين الصفحة والوسط ايضا توجد كافة المتطلبات لإنشاء تدوينة منها العنوان الذى يظهر بلون خافت اعلى يمين الصفحة.

5- بعد العنوان يوجد شريط بها عدة ادوات تساعدك على تنسيق كلامك وتكبير وتصغير الخط ووضع الصور والفيديوهات الى اخر.

6- قم بنشر عدة تدوينات اكتب (العنوان - ضغ صورة - ونصوص - قم بوضع تصنيف على يسار الصفحة) فلتكن ثلاث تدوينات بعد انشاء كل تدوينة توجد كلمة نشر على يسار الصفحة اضغط عليها لكى تقوم بنشر تدوينتك.

7- اذا اردت موقع لتحميل صور جيدة اضغط هنا وموقع لتوليد نص تلقائى اضغط هنا.

ملاحظة:-

الان انت قمت بنشر عدة تدوينات ولكنها بالطبع لن تظهر فى مدونتك لكى تقوم بعرض التدوينات فهذا شئ اخر فالننتقل الى الخطوة التالية وهى كتابة الاكواد المسؤالة عن اظهار تدويناتك.

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

لكى تقوم بعرض التدوينات داخل مدونتك يجب عليك ان تتبع الخطوات التالية:

1- اختر من على يمين الصفحة كلمة المظهر ثم اضغط عليها بعد ذلك سوف تجد فى وسط الصفحة كلمة تخصيص وبجوارها سهم يميل الى الاسفل قم بالضغط عليه ثم اختر كلمة تعديل HTML.

2- الان سوف تظهر لك بعض الاكواد التى قمنا بوضعها فى الدروس السابقة قم بوضع هذه الاكواد الجديدة بداخل وسم body تحديدا اسفل الصفحات الرئيسية التى قما بإنشائها سابقا.

<b:section id='post'>

<b:widget id='Blog1' type='Blog'></b:widget>

</b:section>

3- قم الان بحفظ الاكواد عن طريق الضغط على اول ايقونة على اعلى يسار الصفحة.

4- الان قم بعرض مدونتك وسوف تجد ان المنشورات الثلاثة تم عرضهم.

توضيح للكود السابق:

1- الكود السابق هو كود خاصة باللغة xml.

2- كود b:section هو المسؤل عن اظهار قسم جديد فى التنسيق او لوحة التخطيط وبالطبع هذا القسم خاص بالدوينات او المنشورات وذلك قمنا بإعطائه id خاص به تحت اسم post يمكنك اعطائه اى اسم تريده ولكنه هذا الاسم هو الاقرب لمعنى الكلمة.

3- كود b:widget هو المسؤل عن عرض التدوينات يتضمن id  و type وهما ثابتين اى يجب كتابتهما كما هم

 id=Blog1 هو اسم القطعة التى تقوم بعرض التدوينات و type الخاص بها Blog.

التلاعب بالاكواد الخاصة بعرض التدوينات:-

بعد ان قمنا بعرض التدوينات فى الخطوات السابقة يمكننا ان نتعمق قليلا ونتلاعب بالاكواد حتى تظهر التدوينات بشكل مختلف او كما نريدها ان تظهر.

1- قم بالضغط على كلمة المظهر على يسار الشاشة ثم قم بالضغط على السهم الذى بجوار كلمة التخصص وسط الشاشة ثم قم بالضغط على تعديل html.

2- بعد ذلك قم بالبحث عن كلمة data:post.body من خلال الضغط على Ctrl + f من لوحة المفاتيح ووضع كلمة data:post.body واضغط على زرار Enter من لوحة المفاتيح مرتين وليس مرة واحدة الان قم بحذف كلمة data:post.body من قالبك وضع الاكواد التالية مكانها ثم قم بحفظ الكود عن طريق اول ايقونك تظهر اعلى يسار الصفحة وبعد ذلك قم بمشاهدة مدونتك ستجد شكل مختلف قليلا عن السابق.

<!-- start default-post -->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

      <div class='default-post'>

        <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>

        <div><data:post.snippet/></div>

        <div><a expr:href='data:post.url>تحميل المزيج</a></div>

      </div>

</b:if>

</b:if>

<!-- end default-post -->

<!--- start item-post -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<!--- end item-post -->

<!--- start static-page -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

</b:if>

<!--- end static-page  -->

توضيح للكود السابق:

1- الكود الاول: <b:if cond='data:blog.pageType != &quot;item&quot;'> معناه قم بتنفيذ الكواد اذا لم يكن يساوى صفحة التدوينة وهذه تسمى if الشرطية اى انها تكون مقترنة بشرط دائما; بمعنى انها لا تنفذ إلا عند تحقيق الشرط وهو data:blog.pageType نوع الصفحة يجب ان لا يساوى item.

2- الكود الثانى: <b:if cond='data:blog.pageType != &quot;static_page&quot;'> نفس الشئ مع استبدال كلمة item ب static_page اى ان هذا الكود سينفذ اذا كان لا يساوى الصفحات الثابتة مثل صفحة سياسة الخصوصية وسياسية الاستخدام ومن نحن تلك يطلق عليها صفحات ثابتة.

3- الكود الثالث: 

      <div class='default-post'>

        <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>

        <div><data:post.snippet/></div>

        <div><a expr:href='data:post.url>تحميل المزيج</a></div>

      </div>

تلك الاكواد ستنفذ فى كل الصفحات ما عدا صفحة كل التدوينة والصفحات الثابتة اى انها ستفنذ تقريبا فى الصفحة الرئيسية وبعض الصفحات الاخرى.

كود expr:src = data:post.firstImageUrl يستدعى اول رابط صورة بداخل صفحة التدوينة.

كود expr:alt = data:post.title يستدعى عنوان التدوينة.

كود data:post.snippet يستدعى جزء من نص التدوينة.

كود data:post.url رابط التدوينة.

طبعا مع if الشرطية تقوم بإغلاقها فى كل مرة هكذا

</b:if>

4- الكود الرابع:

<!--- start item-post -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<!--- end item-post -->

يظهر فى صفحة التدوينة فقط او ينفذ فى صفحة الدوينة فقط

كود data:post.body يستدعى كل شئ خاصة بالتدونية.

5- الكود الخامس:

<!--- start static-page -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

</b:if>

<!--- end static-page  -->

ينفذ فى الصفحات الثابتة فقط مثل صفحة سياسة الخصوصية اتفاقية الاستخدام الخ ...

ملاحظة:

الان تستطيع ان تقوم بتنسيق مقالاتك بإستخدام لغة css بداخل head او تحديدا بين وسم b:skin

الان سنكمل فى درس اخر لأنى تعبت جدا من الكتابة 😂 امزح معكم هيا بنا الى الخطوة التالية والاخيرة فى هذا الدرس.

كيفية وضع مساحة اعلانية بداخل مدونتك:-

تستطيع وضع المساحات الاعلانية فى المكان الذى تريده فمثلا سنقوم فى هذا الدرس بوضع المساحة الاعلانية الوهمية (لانى غير مشترك فى شركة اعلانية فى الوقت الحالى) بين الصفحات الرئيسية والتدوينات.

لكى تعرض اعلانك اتبع الخطوات التالية:

1- قم بوضع الكود التالى بين الصفحات الرئيسية والتدوينات:

<!-- start top-ad -->

<b:section id='top-ad'></b:section>

<!-- end top-ad -->

2- قم بحفظ الكود

3- الان قم بالضغط على كلمة التنسيق على يمين الصفحة ستجد قسم ام مساحة جديدة فى وسط الصفحة تحت اسم top-ad اسفلها ستجد كلمة اضافة اداة قم بالضغط عليها ثم قم باختيار HTML/JAVASCRIPT وقم بوضع هذا الكود بداخلها وقم بحفظ الكود.

<div style="width: 99%;

    height: 110px;

    color: #6b6868;

    background-color:#FFF;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #6b6868;

    font-size: 19px;">مساحة اعلانية</div>

الان سوف تظهر لك المساحة الاعلانية بين الصفحات الرئيسية والتدوينات تستطيع تنسيقها ايضا عبر لغة css بداخل او بين وسم skin

وهنا نكون انتهينا من هذا الدرس نكمل فى الدرس التالى ان شاء الله.

فيديو توضيحى: