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

Ashraf Heikal 2/11/2017 شروحات

كيفية تصمم قوالب بلوجر بحترفية

شكل عينة من التعليمات البرمجية في قوالب بلوجر (رمزXML)

<?xml version="1.0" encoding="UTF-8" ?>
<html>
    <head>
    ....
    <b:skin>
      <![CDATA[

      ]]>
    </b:skin>
    ....
    </head>
    <body>
    ....
    </body>
</html>

* Head section
  يحتوي على كافة المعلومات عن طريق العلامات الوصفية meta tag و CSS في بلوجر .

* ميتا تاج | meta tag

  المعلومات المستخدمة التي تستخدم في محرك البحث ، التي تشمل كل عنوان ,وصف الكلمة ,المؤلف إلخ ..... , وما إلى ذلك.

* CSS

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

<b:skin><![CDATA[

و

]]></b:skin>

قالب بلوجر لدينا يتكون من اكوادXMLولايمكن كتابة اكواد CSS في اكواد XML ويمكن تحليل او كتابة رمز CSS في بلوجر احتوتها CDADA في القالب

مثال

<b:skin>..</b:skin>

يتم تحويلها إلى

<style type="text/css">..</style>

و

<![CDATA[...]]>

1-Blogger variable : يستخدم لخلق التفاعل بين القالب بلوجر ومصمم نماذج blogger انظر التفاصيل في كيفية جعل قالب مخصص في بلوجر يكون متفاعل مع محركات البحث والمستخدمين

2-Body section : ويستخدم في التخطيط لتصميم مدونة ،يعني يكون مكون من section ، عمود1، 2 عمود، 3 عمود وهما سايدبار جانبي ايمن ،وسايدبار جانبي ايسر ، .....كما في الصورة بالاسفل بعد تصميم القالب بمعنى عند كتابة (section ) من دونه سوف يكون في قسم التخطيط يوجد فقط رسائل المدونة

في قالب بلوجر في التخطيط يجب ان تحتوي على اربع اجزاء

Header

body

sidebar ( الايمن ، الايسر ، اوكليها)

Footer

تصميم قالب بلوجر هو بناء يستخدم section و widget لذلك علينا اولا معرفة ماهي الwidger والsection

*section

هو العنصر الذي يشير الى جزء من التخطيط مثل Header ،ورسائل المدون

وسايدبار وفوتر مثل الصورة في الاعلى كل هذا يكون داخل section

او ما يسمى بالقسم ويمكنك اضافة widget متعددة في واجهة المستخدم مثل متعددة ارشيف المدونة ،او اداة HTML/javascript ،يمكنك تخصيص الشكل والمظهر في section بأستخدام CSS ملفوفة حولها

&وتبدو مثل هذا الكود

<b:section id='header' class='header' maxwidgets='1' showaddelement='no' growth='vertical'>
</b:section>

*شرح الاكواد

id - هو معرف فريد يوجد لهذا القسم لتحديدالهوية - ويستخدم احرف الابجدية لهوية معينة

class -هو حقل اختياري يمكن اعطاء اسم المشترك مثل Foter -Sidebar-Main-Header يمكنك اعطاء اسم مختلف على النحو الذي تريده

maxwidgets هو حقا اختياري تستخدم لتحديد عدد الاضافات او widget داخل القسم

showaddelementهو ايضا حقل اختياري ن التي تحددفي ادارة التخطيط في المدونة هناك سوف يتم "اضافة اداة" بyes او no وهي تحديد هذه السمه ( yes هو القيمة الافتراضية )

growth هو ايضا حقل اختياري والتي تشير الى انه اذا الاداة هى اضافة ثم تقوم مضيفا اداة رأسي أو أفقي .رأسيا هي القيمة الافتراضية

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

<b:widget id="header" type='Header' locked="yes" >
</b:widget>

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
    <meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
</b:skin>
</head>

<body>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Weberience -Blogger design Tutorials (Header)' type='Header'/>

</b:section>

</body>

</html>