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

يتم تشغيل ملايين المدونات بواسطة منصة Blogger من Google. أول شيء ينتبه إليه الزائر أثناء زيارته للمدونة هو تصميمها أو نموذجها. يتمتع المظهر الجيد المصمم بشكل انيق بالقدرة على الاحتفاظ بالزائرين لفترة أطول من الوقت.

اليوم ، سنتعلم كيفية برمجة قالب بلوجر خاص بك. سيكون تركيزنا في المقام الأول على مفاهيم تصميم القالب الأساسي بدلاً من الذهاب إلى تصميم فاخر.

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

قم بإنشاء هيكل عظمي للقالب الخاص بك

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

يمكنك قرائة هذه المقال لفهم الموضوع بشكل افضل " قالب بلوجر فارغ جاهز لتصميم ".


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html dir='rtl' 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' xmlns:og='http://ogp.me/ns#'>
<head>

</head>
<body>

</body>
</html>

يعلن السطر الأول من القالب أنه مستند XML . من الضروري أن تتمكن متصفحات الويب من تحليل رمز القالب ومعالجته بطريقة صحيحة.

<!DOCTYPE html> في هذه السطر يدل على أننا سنستخدم كود HTML5 داخل مستند XML الخاص بنا. مرة أخرى ، يساعد متصفحات الويب على معالجة رمز القالب بطريقة فعالة.

<html> هو ترميز لبداية القالب

<head> هو مكان البيانات الوصفية لصفحة الويب ، يتضمن ايضا العديد من العلامات الوصفية وأنماط CSS والبرامج النصية.

<body> القسم الذي ستبدأ بناء تصميمك فيه.

دعنا ننتقل إلى الخطوة التالية ونضيف البيانات الوصفية الأساسية إلى قسم <head>


<head>
    <b:include data='blog' name='all-head-content' />
    <title><data:blog.pageTitle/></title>
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <b:skin>
      <![CDATA[ 
      /* يتم وضع قواعد CSS المخصصة هنا... */
      ]]>
    </b:skin>
</head>

<b:include> هذه العلامة الأولى من أهم علامات تحسين محركات البحث ضمن هذا القسم. وهي علامة بالغة الأهمية.

السطر التالي واضح تمامًا وسهل الفهم ، <title> تضيف هذه العلامة عنوان الصفحة الريسية والصفحات الأخرى. كل هذه العلامات مهمة لمحركات البحث وبرامج الزحف.

تتم إضافة <meta content='width=device-width, initial-scale=1' name='viewport'/> لتنشيط وضع تجاوب التصميم بحيث يتم عرض القالب - بشكل جيد - على الأجهزة الأصغر أيضًا.

<b:skin> يتم وضع رموز CSS الخاص بتصميم قالبك داخل هذه الكود . في الوقت الحالي ، هو فارغ وسيتم ملؤه برموز CSS ذات الصلة - في مرحلة لاحقة.

الآن ، دعنا ننتقل إلى قسم <body> ونرى جميع العناصر المهمة فيه.

يضم قسم <body> كافة العناصر - المرئية - لزوار الموقع داخل متصفح الويب. أنت حر في إضافة التخطيط المفضل لديك داخل هذا القسم.

اولا دعنا نضيف قسم <header> يختلف عن قسم الرأس الذي يحتوي على البيانات الوصفية للقالب.


<header>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
  </b:section>
</header>

يتضمن قسم <header> عنوان المدونة والوصف. يمكن للمرء أيضًا استبدالها بشعار مخصص.

قد تلاحظ علامة <b:section> هذه هي الطريقة التي ننشئ بها أنواعًا مختلفة من الأقسام داخل قالب Blogger

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


<b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>

يمكنك ملاحظة أننا أضفنا <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog'/> يقوم تلقائيًا بإنشاء المحتوى المطلوب للصفحة الرئيسية وصفحة الأرشيف وصفحة البحث وبالطبع لصفحة المنشور الفردية.

يمكن إضافة أدوات إضافية إلى هذا القسم لأننا أضفن االسمة showaddelement='yes' إلى <b:section> غالبًا ما يستخدم المدونون هذه الميزة لإضافة محتوى مخصص إما في أعلى أو أسفل المنشور.

القسم المهم التالي هو الشريط الجانبي الذي سيظهر على الجانب الأيمن او الايسر من المحتوى الأساسي.


<aside>
  <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
  </b:section>
</aside>

لقد استخدمنا علامة HTML5 هذه <aside> للشريط الجانبي. على الرغم من أنه ليس إلزاميًا استخدامه ويمكن استبداله بسهولة <div> بعلامة عادية ، إلا أنني أوصي بشدة باستخدامه في هذا القسم.

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

وأخيرًا وليس آخرًا ، سوف نضيف قسم الفوتور او قسم الشريط السفلي . وهذه هو الكود .


<footer>
  <div>
    جميع الحقوق محفوظة © 2021 <strong><data:blog.title/></strong>
  </div>
</footer>

إنه قسم بسيط عبارة عن شريط سفلي يتكون من إعلان حقوق النشر. لاحظ استخدام <footer> وهي علامة HTML5 لهذه القسم . يتم كتابة اسم المدونة - ديناميكيًا - بعد بيان حقوق النشر.

يمكن للمرء إنشاء قسم فوتور سفلي متعدد الأعمدة وعناصر واجهة المستخدم أيضًا. يعتمد تعقيد أو مرونة التصميم كليًا على احتياجاتك ومهاراتك الفنية .

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

إذن ، هذا هو كود القالب الذي صممته انت معنى اليوم.


<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html dir='rtl' 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' xmlns:og='http://ogp.me/ns#'>
    <head>
        <b:include data='blog' name='all-head-content' />
        <title>
            <data:blog.pageTitle/>
        </title>
        <meta content='width=device-width, initial-scale=1' name='viewport' />
        <b:skin>
            <![CDATA[  
            /* يتم وضع قواعد CSS المخصصة هنا... */
            ]]>
        </b:skin>
    </head>
    <body>
        <div id="blog-wrapper">
            <header>
                <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
                    <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
                </b:section>
            </header>
            <div id="content-wrapper">
                <div class="content-table">
                    <div class="content-row">
                        <b:section class='main column' id='main' showaddelement='yes'>
                            <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
                        </b:section>
                        <aside class="column">
                            <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
                            </b:section>
                        </aside>
                    <div>
                </div>
            </div>
                  </div>
              </div>
            <footer>
                <div>
                    جميع الحقوق محفوظة © 2021 <strong><data:blog.title/></strong>
                </div>
            </footer>
         </div>
    </body>
    </html>

قبل أن نمضي قدمًا في تصميم تخطيطنا من خلال قواعد CSS ، دعنا نلقي نظرة على نموذج بالحجم الطبيعي للحصول على فكرة عادلة عنه. سيكون تخطيطًا كلاسيكيًا من عمودين يُستخدمه اغلب المدونات

ستتم كتابة جميع قواعد CSS المخصصة اسفل / بعد وسم <b:skin> كما هو موضح أدناه ( انظر أدناه ) حول الترتيب الذي ستظهر به قواعد CSS .


<b:skin>
  <![CDATA[ 
/* التخطيط الأساسي للقالب */
 #blog-wrapper {
     width: 1024px;
     margin: 0 auto;
}
 #content-wrapper {
     width: 100%;
     height: 100%;
     overflow: hidden;
}
 .content-table {
     display: table;
     border-collapse: separate;
}
 .content-row {
     display: table-row;
}
 #main {
     padding: 25px 25px 25px 20px;
     width: auto;
     height: 100%;
     display: table-cell;
}
 aside {
     width: 32%;
     height: 100%;
     border-left: 1px solid #ddd;
     padding: 25px;
     display: table-cell;
}
 footer {
     width: 100%;
     clear: both;
     border-top: 1px solid #ddd;
     padding: 20px;
}
  ]]>
</b:skin>

يمكنك فحص جميع قواعد CSS عن كثب داخل ملف القالب المتاح للتنزيل في نهاية هذا الدرس التعليمي. وإليك لقطة شاشة جزئية للقالب.

أنت حر في تمديد وإعادة توزيع هذا القالب. تصميم قالب بلوجر Blogger ليس بهذه الصعوبة ويمكن للمرء أن يبدأ به بالمعرفة الأساسية لـ HTML و CSS. آمل أن تكون قد وجدت هذا الدرس التعليمي مفيدًا.

اي نقطه وجدتها صعبة ولم تفهمها ضعها في التعليقات . . . انا سعيد بمساعدتك 😍

يتم تشغيل ملايين المدونات بواسطة منصة Blogger من Google . أول شيء ينتبه إليه الزائر أثناء زيارته للمدونة هو تصميمها أو نموذجها. يتمتع المظه...

أن يكون التعليق خاص بمحتوى التدوينة	1
أن لا تضع أي روابط خارجية	2
لإضافة كود حوله أولاً بمحول الأكواد	3
أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة	4

القيسي ويب