دورة تصميم قالب بلوجر
دورة تصميم قالب بلوجر

في الدروس السابقة من دورة تصميم قالب بلوجر من الصفر - قمنا بشرح كامل للأقسام والأدوات والقطع وشرحنا أهم الأضافات بينهم وأيضاً مميزات كل منهم.
دعونا نبدأ في الجزء الثالث الذي سنتحدث فيه عن أهم الأوسمة في بلوجر وأيضاً بعضن من العلامات الشرطية في بلوجر تابعونا.

طريقة تصميم قائمة متجاوبه للهواتف علي بلوجر

يمكنك جعل قائمة التنقل لشريط بلوجر العلوي كما فعلت في قالب HTML الخام. يعد استخدام قائمة التنقل الثابتة في بلوجر هو أفضل طريقة لتجنب العديد من المشكلات. على الرغم من أنه يمكنك استخدام أداة "الصفحات" و "قائمة الروابط" لإدراج رابط ديناميكيًا في قائمتك ، إلا أنه سيكون من الصعب عمل قائمة المنسدلة

إذا كنت تستخدم إطار عمل مثل البوتستراب ، فيمكنك استخدام جزء الـ navebar  أو يمكنك قرأة درس القوائم المستجيبه علي  w3schools.

ضع الكود التالي في القالب ، حيث تريد إظهار شريط القائمة العلوية. بعد إنشاء قائمة متجاوبة  للجوال ، ما عليك سوى لصق الروابط الخاصه بك في علامات الربط. مثال:
<ul>
          <li><a href="">الرئيسية</a></li>
          <li><a href="">عنا</a></li>
          <li><a href="">أتصل بنا</a></li>
          </ul>

تسطيع أستبدال رابط الرئيسية <li></li> لجعلها أكثر ديناميكية من خلال <li><a expr:href='data:blog.homepageUrl >الرئيسية</a></li>

تصميم قوالب بلوجر أكثر ديناميكية

لنظرأ للبينة الأساسية لفوال بلوجر:
  • 1. Header
  • 2. Blog
  • 3. Sidebar
  • 4. Footer
تساعدنا بلوجر عند تصميم قالب بلوجر أو التعديل علي قالب تم تصمينه مسبقاً بأمكانية إضافة أكواد لجعل تصميم القالب والقالب أكثر ديناميكية وأسهل دون الحاجه إلي المزيد من الأكواد.

إنشاء header 

قم بأضافك الكود التالي في div header 
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
          <b:widget id='Header1' locked='true' title='' type='Header'/>
          </b:section>

أنشاء جسم المدونه

قم بأضافة الكود التالي في post div
<b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/>
          </b:section>

إنشاء سايدبار.

قم بأضافة الكود التالي في sidebar div
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

أنشاء تزيل الصفحة 

قم بوضع الكود التالي في footer div
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
          </b:section>

إستخدام البيانات الديناميكية الأفتراضية في بلوجر

استخدامات البيانات الخاطئة الديناميكية في المدونة
تقدم بلوجر بعض علامات البيانات الافتراضية التي يمكننا من خلالها استدعاء بيانات محددة لعرضها. مثال: إذا كنا نريد اسم مؤلف المنشور  في كل منشور ، فيمكننا استخدام <data:post.author/>>

استخدم هذا الوسم بعد الوسم السابق. 
<div class='post-footer-line post-footer-line-1'>

 هناك العديد من علامات بيانات بلوجر لإظهار بيانات محددة في منشورات  المدونة .ولكن تعمل علامات البيانات في بلوجر هذه إلا في أداة جسم المدونة فقط.

علامات بيانات بلوجر - Blogger Data Tags ماذا تعرض
<data:post.dateHeader/>تاريخ المشاركة كرأس للتدوينه.
<data:title/>عنوان المدونة.
<data:description/>وصف المدونة.
<data:olderPageTitle/>عنوان الصفحة القديمة من المشاركات.
<data:newerPageTitle/>عنوان الصفحة الجديدة من المشاركات.
<data:commentLabel/>عدد التعليقات.
<data:authorLabel/>سوف تظهر "نشر بواسطة".
<data:post.title />عنوان المنشور.
<data:post.body/>محتوى المنشور.
<data:post.author/>اسم مؤلف المشاركة.
<data:post.url/>رابط المشاركة.
<data:post.timestamp/>تاريخ ووقت النشر.
<data:label.name/>تسمية المنشور.

يمكنك الحصول على المزيد من علامات بيانات بلوجر من خلال مساعدة بلوجر.

ماذا تعني ANCHOR TAG في بلوجر.

يتم تحويل ANCHOR TAG في بلوجر إلى نص ANCHOR   مع URL. مثال: إذا كان عنوان URL للصفحة الرئيسية هو http://www.imintweb.com ، فسيتم تحويلها  إلي العلامة التالية <a expr:href='data:blog.homepageUrl >الرئيسية</a> إلى
<a href="http://www.imintweb.com">الرئيسية</a>

بعض anchor tags الديناميكية لموضوعات بلوجر


 روابط Anchor الديناميكيةماذا تعرض
<a expr:href='data:blog.homepageUrl >الرئيسية</a>نص مع رابط الصفحة الرئيسية
<a expr:href='data:post.url'>إقرأ المزيد</a>نص لإقرأ المظيد مع رابط للموضوع
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>أسم التسمية مع راب مباشر للتسمية
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>المشاركات الأحدث مع رابط للمشاركات الأحدث
<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>المشاركات الأقدم مع رابط للمشاركات الأقدم
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>أسم كاتب الموضوع مع رابط
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>نص التعليقات للتعليق مع رابط


الخصائص المتقدمه في بلوجر

الأخفاء/الأضهار في تخصيص قوال بلوجر عرض صفحة ما علي حسب الصفحة المعروضه وإخفاء الشريط الجانبي في منشور ما أو صفحة ما كل هذا يتم عبر العلامات  الشرطية ، يمكننا استخدام HTML ، CSS ، JavaScript إضافية كما نريد ، وهذا يجعل بلوجر أكثر ديناميكية. ستم التحدث عن العلامات الشرطية في فو موضوع منفصل لشرحها بشكل أعمق.

إنشاء صفحة هبوط في بلوجر

يمكنك وضع الكود قبل الوسم </head> أو بعد الوسم <body> 



<b:if cond='data:blog.pageType == "index"'>
          <style>
          .sidebar{display:none;}
          .post-wrapper{width:100%}
          </style>
          </b:if>
          <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:blog.pageType == "static"'>
          <style>
          .sidebar{display:block;}
          </style>
          </b:if>
          </b:if>

سنتحدث عن العلامات الشرطية في بلوجر في موضوع منفصل لفهم أعمق للموضوع

تصميم قالب بلوجر بأستخدام Css مخصص

لقد انتهينا بالفعل من 80 ٪ من تصميم قالب بلوجر. أما النسبة الباقية 20٪ فهي عبارة عن تصميم مخصص باستخدام CSS.

العثور على كل فئة ومعرف div ، قسم ، التنقل وما إلى ذلك أمر صعب للغاية ، ومملل ، مضيعة للوقت يدوياً لكنني سأخبرك الحيل لجمع كل فئة ومعرف مع المغلق الافتراضي في غضون ثوان قليلة.

  1. انسخ كل كود CSS  من الرابط التالي.
  2. بعد  نسخة جميع أكواد CSS ولصقها على أي محرر HTML / CSS.
  3. تعديل الأكواد ومعرف إذا كان أي تنسيق سيئة.
  4.  قم بلصقه  في القالب الخاص بك داخل <b: skin> [[/ ****** CSS ****** /]]> </ b: skin>.
  5. قم بحفض القال
  6. قم بعد ذلك بتخصيص CSS الخاص بك باستخدام أدوات inspect element من المتصفح.

 يمكنك إدراج فئات CSS في عنصر HTML معين. افترض إذا كنت تريد إدراج تسمية بوتستراب في <data: post.author/> ، قم بلف هذه العناصرspan وأدخل فئة التسمية كما يلي: 

<span class='label label-success'><data:post.author/></span>

 يمكنك إدراج أيقونة Font Awesome على النحو التالي.

<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span>

مزيد من التخصيص علي قالب بلوجر

كيف تقوم بترتيب AUTHOR, LABELS, DATE  الصعود والهبوط من جسم المدونة؟


  1.  أولاً ، انتقل إلى لوحة تحكم بلوجر التخطيط رسائل المدونة تعديل :
  2. وستظهر لك نافذة منبثقة.
  3.  من "تهيئة رسائل المدونة الإلكترونية" ، حدد  الذي تريد إظهاره وإلغاء تحديد الخيار الذي تريد إخفاءه.
  4.  بعد التمرير لأسفل ستري  "ترتيب العناصر". اسحب العنصر المحدد لأعلى ولأسفل للتعيين.
  5. قم بالضغط علي حفظ

كيفية إضافة التاريخ والوقت في بلوجر

انتقل إلى انتقل إلى لوحة تحكم بلوجر التخطيط رسائل المدونة تعديل  خيارات صفحة التدوينات :تحقق من خيارات التاريخ والوقت.
أو
أستخدم الكود التالي في قالب المدونة بعد <div class='post-footer-line post-footer-line-1'>  
<span class='post-timestamp'>
           <b:if cond='data:top.showTimestamp'>
             <data:top.timestampLabel/>
             <b:if cond='data:post.url'>
               <meta expr:content='data:post.url.canonical' itemprop='url'/>
               <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
             </b:if>
           </b:if>
          </span>

كيفية تغيير اسم المؤلف في بلوجر

ابحث عن <data:post.author/> من محرر  HTML واستبدلها بالاسم الذي تريده باستخدام علامة p مثال<p>حسين</p>

كيفية إزالة اسم مؤلف من صفحة التدوينات في بلوجر

ضع كود CSS في قالب بلوجر الخاصة بك.
.post-author vcard {display:none;visibility:hidden}

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