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

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

فهرس الموضوع

في البداية:

تحقق من توفر الأدوات التالية:

محرر النصوص المتطور Notepad++.
متصفح فايرفوكس Mozilla Firefox.
حساب تجريبي في بلوجر Blogger.

عليك أن تكون:

على اطلاع مسبق ب HTML & CSS (مجرد اطلاع بسيط)
التعامل مع لوحة تحكم المدونة في بلوجرBlogger.

تحميل قالب نموذجي بسيط (صفحات ثابثة / بنية HTML أولية + ملف css)

أول شيء سنقوم به هو تحميل ملفات html & css التي سبق و جهزتها , المرفقات عبارة عن ملف rar جاهز للتحميل. يحتوي هذا الملف المضغوظ على مجلد لصور القالب التي يتشكل منها , و 3 ملفات أخرى وهي:

Index.html: هذا هو الملف الرئيسي الذي يحتوي على أكواد HTML.
Style.css: هذا الملف يحتوي على تنسيقات القالب المكتوبة CSS.
Blog.xml: هذا الملف فارغ, و فيه سيتم خلط المكونات السابقة لخلق قالب لمدونتنا.

حمل الملفات بالضغط على هذا الرابط. بعد الانتهاء من عملية التحميل , يجب عليك فك الضغط عن الملفات , ستظهر لك محتويات المجلد بهذا الشكل (أنظر للصورة).

إنشاء مدونة تجريبية لاختبار القالب

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

تسجيل الدخول إلى حسابك الخاص في بلوجر.
في لوحة التحكم الرئيسية، انقر فوق إنشاء المدونة.
أدخل عنوانا مثل “تجربة”، وعنوان الكتروني URL للوصول الى مدونتك مثل www.test.blogspot.com.
قم بتعبئة خانة التحقق من الكلمات، ثم انقر فوق متابعة.
على صفحة “اختيار قالب”، حدد أي قالب و انقر فوق متابعة.
تم إنشاء مدونتنا التجريبية بنجاح, الآن أنقر على زر ابدأ التدوين.

عموما انشاء حساب في بلوجر سهل جدا و لن يأخذ من وقتك أكثر من دقيقتين , و الآن بما أننا انتهينا من هذه الخطوات الروتينية و السهلة , ننتقل و اياكم الى أول الخطوات لانشاء قالبنا المنشود.

نسخ محتويات ملف index.html في ملف Blog.xml

الآن افتح كل من ملف index.html و Blog.xml باستعمال برنامج المذكرة الذكية Notepad++

الآن , اذهب الى ملف index.html ، قم بتحديد كلي للمحتوى من خلال المذكرة Edit > Select All. اعمل نسخ للمحتوى المحدد Edit > Copy.

الآن , اذهب الى ملف Blog.xml، اعمل لصق للمحتوى Edit > Past. وبهذا نكون انتهينا من هذه الخطوة بنجاح , الآن ننتقل الى الأهم , تابع معي.

استبدال الجزء الأعلى من كود القالب index.html بالكود القياسي لبلوجر

ان قوالب بلوجر تحتوي على وسوم و علامات في رأس الصفحة مختلفة عن تلك الموجودة في ملف HTML , لذا يجب علينا استبدال القسم العلوي في ملف Blog.xml. كود الاستبدال:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[

/* Insert CSS Here */

]]></b:skin>
  </head>

لاستبدال الكود، اتبع الخطوات التالية:

انسخ كود الاستبدال الموضح أعلاه.
حدد الجزء العلوي في ملف Blog.xml الى غاية وسم الاغلاق لرأس الصفحة.
اعمل لصق في الجزء المحدد.
احفظ الملف Blog.xml.

نسخ كود css من ملف style.css و ادراجه في بنية القالب

ان مدونات بلوجر تستخدم عناصر خاصة لتحديد مختلف أجزاء القالب ، مثل نوع الخط و حجمه ,و أمكنة القوائم و جسم الصفحة … الخ. و لكي يظهر لنا القالب كما نريده منظما و منسقا , فاننا نستخدم css في ذلك , و كما قلت سابقا , فان نموذج القالب لهذا الدرس معد مسبقا بكل ملفاته (Style.css / Index.html / Blog.xml) فبعدما تطرقنا للملفين السابقين حان الآن دور style.css لكي نضيفه الى وصفتنا. اذن سنقوم الآن باضافة محتوى ملف style.css الى ملف القالب blog.xml و لفعل ذلك اتبع الخطوات التالية:

افتح ملف Style.css و قم بتحديد كلي لمحتواه Edit > Select All.
افتح ملف Blog.xml و ابحث عن الوسم الموجود في الكود التالي الموجود في رأس الصفحة.
قم بلصق محتوى ملف Style.css بين الوسمين الموجودين في رأس الصفحة لكي يكون مشابه لهذا الكود.

<b:skin><![CDATA[
*/قم بلصق محتويات ملف Style.css هنا/*
]]></b:skin>

قم بمسح التعليق (/* قم بلصق محتويات ملف Style.css هنا */) و من ثم قم بلصق محتويات الملف Style.css

إزالة الشريط الجانبي الأيمن من القالب

يحتوي القالب النموذجي على ثلاث قوائم أو تقسيمات , و كل تقسيم يدل على موقع ما في القالب:

عنوان المدونة على اليسار

<div id="page-header">

العمود الرئيسي المتضمن فيه النص

<div id="main-content">

عمود جانبي أيمن صغير

<div id="sidebar">

سنستعمل العمود الأيسر للقالب في اضافة مكونات بلوجر الاخرى مثل : أرشيف المدونة و المتابعون …الخ , كما أننا سنعتمد العمود الثاني كحاضن للمحتوى النصي للمدونة , و هذا يعني أننا لسنا في حاجة الى العمود الأيمن , اذن سنقوم بازالته من القالب و نمدد العمود المتضمن للنصوص.

لازالة الشريط الجانبي الأيمن اتبع مايلي :

في ملف Blog.xml قم بحذف الجزء الملون الظاهر في الصورة التالية:

انتقل الى جزء css في ملف القالب Blog.xml و قم بحذف الجزء التالي:

/* القوائم الجانبية */
#sidebar
{
  float: right;
  width: 190px;
  padding: 2px 10px 0 0;
  font-size: 0.9em;
  line-height: 1.2em;
}

الآن نقوم بتوسيع مساحة النص الى مكان الشريط الجانبي الذي قمنا بحذفه:

/* مساحة المحتوى */
#main-content
{
  float: left;
  width: 340px;
}

نغير القيمة px340 الى px550 ( مع العلم أن هذا التغيير يكون ضمن جزء الـ css في ملف القالب Blog.xml )

رفع صور القالب و تعديل مساراتها

يتشكل هذا القالب من 3 صور مرفقة في مجلد مع باقي الملفات:

palms-big.jpg: صورة المنظر الطبيعي الموجودة في أعلى القالب.
pinstripe.png: صورة خلفية القالب.
footer-rule.png: صورة تحديد فوتر الصفحة.

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

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

عموما الصور أكثر تعبيرا من الكلام السابق , شاهد كيف ترفع صورك عن طريق بلوجر:

نقوم بانشاء تدوينة جديدة ونضيف إحدى صور القالب إلى المحرر

نضغط بيمين الفأرة على الصورة ونختار من القائمة المنسدلة: Open Link in New Tab.

لا تتسرع و تنسخ ذلك الرابط لأنه ليس المسار المباشر الذي يقودك الى الصورة التي رفعتها , و هذا ما يخطئ فيه الكثير من الناس , اذن تريث قليلا و تابع معي:

بعدما ظهرت لنا الصورة في المتصفح , نضع مؤشر الفأرة عليها و نضغط على الزر الأيمن , و نختار من القائمة المنسدلة خيار Copy Link Location:

الوصلة المتحصل عليها هي المسار الحقيقي و المباشر للصور التي يتم رفعها باستخدام بلوجر , و تكون الوصلة على هذه الشاكلة:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCvXdSNISkctUcoXXua5Au1p1yhyphenhyphenqxlCObZSBq_zMxW1_T3wA-04hM9Umg6tk_iyAYVOJFwsb2_ydValrVUCTcBwWRe16FQZSoWk8ZkRAs-hYOdjMnk-8_7G2H1D3e9wOSO8boY1FPz5Z/s1600/2008-05-28_124414.jpg

بعدما ننتهي من رفع جميع الصور , ننسخ الوصلات المتحصل عليها في مكان آمن و من الافضل أن يكون ملف *txt مع توضيح كل مسار و ما يوافقه من صور , هذا حتى لا يحدث خلط في تصميم القالب.

الآن ننتقل الى تعديل مسارات الوصول الى الصور في ملف القالب , حاليا , يتم توجيه القالب الى مجلد الصور الموجود في حاسوبك و يكون المسار المؤدي اليها مثل هذا:

قم بالبحث باستخدام المذكرة عن main-image في جزء HTML:

<img id="main-image" src="images/palms-big.jpg"

قم بالبحث عن هذا الوسم في جزء CSS و بالتحديد في body:

background: #d4d5c5 url(images/pinstripe.png) repeat 0 0;

قم بالبحث عن هذا الوسم في جزء CSS و بالتحديد في فوتر الصفحة #page-footer:

background: transparent url(images/footer-rule.png) repeat-x 0 0;

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

حتى الآن قطعنا شوطا كبيرا في انشاء قالب لمدونتنا , لكني آسف على تخييب أملك , لا يزال الكثير من العمل حتى يخرج القالب سليما معافى من غرفة العمليات , لكنني سأسمح بالقاء نظرة أولية على القالب حتى تطمئن أن عملك يسير على ما يرام و بشكل جيد.

اختبار القالب

حان الوقت الآن لالقاء أول نظرة على القالب , سنقوم باختباره على مدونتنا التجريبية التي سبق و قمنا بانشاءها , اتبع خطوات تركيب القالب من خلال لوحة التحكم في مدونتك:

قم بالدخول الى حسابك على بلوجر من خلال الرابط التالي : www.blogger.com.
في لوحة تحكم مدونتك التجربية اضغط على ” تصميم ” أو بالانجليزية Layout.
ثم Edit HTML ” تحرير الـ HTML”.
اضغط على زر Browse و اذهب الى مكان ملف الـ Blog.xml و قم برفعه بالضغط على زر Upload.
ستظهر لك رسالة تحذير “Widgets are about to be deleted” لا تقلق حيالها , فقط قم بالضغط على Confirm & Save.

و ها هو القالب ( لا يبدو قالبا لبلوجر ) , اذا ظهر في متصفحك بهذا الشكل فأنت تبلي بلاءا حسنا

إضافة وسوم بلوجر الى القالب

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

الوسوم الأساسية و الأكثر شيوعا في توزيعة نظام بلوجر هي:

b:section : هذا الوسم وضع لتعريف header و footer و sidebar و المنطقة الرئيسية للمحتوى.
b:widget : هذا الوسم وضع لإدخال الاضافات ( و تسمى أيضا الأدوات) في الصفحة ، مثل عنوان المدونة / وصفها , و الأرشيف … الخ.

استبدال مقطع عنوان الموقع بوسم بلوجر لرأس الصفحة:

في هذه الخطوة نقوم باستبدال عنوان الموقع باسم المدونة , و استبدال وصف الموقع بوصف المدونة , و لفعل هذا نقوم بنسخ الكود التالي و لصقه في الجزء

<!-- site title -->

الى

<!-- menu -->

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

الكود القديم:

<!-- site title -->
<h1><a href="index.html">عنوان الموقع</a></h1>
    <p>وصف المدونة في سطور</p>
<!-- menu -->

لإدراج الكود أعلاه ، اتبع الخطوات التالية: حدد الكود أعلاه و اعمل له نسخ. ثم افتح Blog.xml في المذكرة وحدد الكود الموضح باللون الأحمر أعلاه وقم بلصق الكود الجديد مكانه , ثم اعمل حفظ.

استبدال قسم القائمة بوسم الشريط الجانبي لبلوجر sidebar:

ألق نظرة خاطفة على القالب , ستلاحظ أن هناك قائمة على اليسار تحتوي على وصلات ( الرئيسية / أخبار / صور … ) في حقية الأمر نحن لا نحتاج لهذه القائمة , كما أن مكانها حيوي بالنسبة للقالب , فالمكان على اليسار مخصص للشريط الجانبي , و الذي سيحتوي على أدوات و عناصر بلوجر الأخرى , مثل : أرشيف المدونة و المتابعون …. الخ

لاستبدال الكود , قم بالبحث عن هذا الجزء في القالب

<!-- menu -->

الى

<!-- end Menu -->

الكود الحالي:

<!-- Menu -->
    <ul id="menu">
      <li><a href="index.html">الرئيسية</a></li>
      <li><a href="page.html">أخبار</a></li>
      <li><a href="page.html">صور</a></li>
      <li><a href="page.html">خدمات</a></li>
      <li><a href="page.html">تحميل</a></li>
      <li><a href="page.html">اتصل بنا</a></li>
    </ul>
    <!-- End Menu -->

كود الاستبدال:

<b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    </b:section>

استبدال قسم المحتوى العادي بوسم نص التدوينات لبلوجر main-content:

بنية نظام المحتوى في بلوجر مختلف عن بنية المحتوى العادي الموضح باللون الأحمر أدناه , لهذا وجب علينا تغييره

الكود الحالي:

<!-- Content -->
    <div id="main-content">
      <p> نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص...</p>
      <p> نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص نصوص...</p>
      </div>
    <!-- End Content -->

كود الاستبدال:

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

الآن أصبح لدى القالب صلاحية عرض كل التدوينات التي يتم كتابتها في لوحة تحكم المدونة , سواءا احتوت هذه التدوينات على صور أو فيديوهات أو روابط … الخ.

اضافة وسم فوتر الصفحة الخاص ببلوجر:

أخيرا , نحن نحتاج الى اضافة وسم فوتر الصفحة في ملف القالب , ( أنظر الصور ):

<!-- Page Footer -->
  <div id="page-footer">
    <p>شبكة درسني &copy; 2010-2011 <a href="http://www.drsni.com/">درسني</a> &amp; <a href="http://www.twitter.com/sookx">أسامة حميدة</a></p>
  </div>
</div>
<!-- End Outer Container -->

اضافة وسم الفوتر الخاص ببلوجر:

<!-- Page Footer -->
  <div id="page-footer">
<b:section class='footer' id='footer'/>
    <p>شبكة درسني &copy; 2010-2011 <a href="http://www.drsni.com/">درسني</a> &amp; <a href="http://www.twitter.com/sookx">أسامة حميدة</a></p>
  </div>
</div>
<!-- End Outer Container -->

ملاحظة مهمة: رجاءا لا تحذف حقوق نشر و اعداد القالب من الفوتر , مكافئتك لنا هي الحفاظ على حقوق هذا القالب كما هي , و شكرا لكم.

اختبار القالب مرة أخرى

الآن يمكنك اختبار القالب بشكل حقيقي و ذلك بإضافة محتوى اختبار للمدونة: قم بالدخول الى مدونتك التجريبية , و من لوحة التحكم أنشأ تدوينة جديدة , و من ثم قم بحشو نص عشوائي في محرر المدونة … كرر العملية مرتين أو ثلاث حتى يصبح لدينا 3 تدوينات. و بعد كل التغييرات التي أجريناها على القالب , حان الوقت لكي نشاهد ثمار جهدنا حتى الآن:

كما نشاهد في الصورة , فان القالب يحتوي على التدوينات التي سبق اضافتها + الشريط الجانبي الذي يحتوي على الأدوات الذكية من بلوجر , مثل : أرشيف المدونة , البروفايل ( ملف التعريف الشخصي ) , المتابعون … الخ , الآن بامكاننا القول أنه أصبح لدينا قالب يصلح لمدونة مجانية على بلوجر … انتظر لحظة , نحن لم ننتهي بعد , هناك بعض التعديلات التي يلزم القيام بها حتى ننسق مظهر القالب بشكل جيد.

تعديل تنسيق القالب عن طريق css

في هذا الجزء الأخير في الدرس سنقوم باجراء بعض التعديلات في الـ css المحتوى في ملف القالب Blog.xml , قم بالبحث في أعلى كود القالب عن وسم b:skin , هذا الوسم أدرجنا فيه خصائص الـ css في ما مضى , و الآن حان الوقت للعودة اليه و اضافة اللمسة الأخيرة و النهائية في مرحلة انشاء قالب بسيط لبلوجر:

تعديل وضعية الشريط الجانبي

سيكون من الجيد التعديل في هذا الجزء من القالب , لأنه مهم جدا , اذ أن كل الأدوات الذكية الخاصة ببلوجر تتواجد فيه , مثل الأرشيف و المتابعون … الخ , اذا لاحظت معي شكل القالب فستجد أن الشريط الجانبي مرتفع قليلا أعلى الصفحة و يكاد يلامس عنوان المدونة ( لاحظ المدونة عند آخر اختبار أجريناه لها ) , و لتعديل هذا الخلل نضيف قيمة الارتفاع الى الهيدر , و نقوم بنسخ الكود في ملف القالب Blog.xml في نهاية وسم اغلاق الـ css:

/* إزالة عنصر */
.clear
{
  position: relative; clear: both; height: 1px; line-height: 1px; font-size: 1px;
}
/* اضافة قيمة ارتفاع هيدر الصفحة */
#header
{
  height: 336px;
}

]]></b:skin>

ملاحظة مهمة: كل هذه الاضافات في قسم css يتم اضافتها على حدى في نهاية رموز خصائص الـ css في القالب , هذا حتى لا تحدث أخطاء نحن في غنى عنها و يمكن تجاوزها.

تعديل أرشيف المدونة Blog Archive

أرشيف المدونة لا يبدو متناسقا هو الآخر , لذا سنحرص على أن نعدله بشكل جيد حتى يعرض أرشيف التدوينات بشكل منظم و جميل , و لفعل ذلك قم باضافة كود الـ css الموضح أدناه:

/* تعديل أرشيف المدونة */
#page-header li
{
  margin: 0;
  padding: 0 0 .25em 15px;
  text-indent: -15px;
  line-height: 1.5em;

الغاء التسطير على الروابط / الوصلات Links

/* الغاء تسطير الروابط */
a
{
  text-decoration: none;
}
.post-body a
{
  text-decoration: underline;
}

تعديل قسم البروفايل about me

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

/* تعديل البروفايل */

.profile-img
{
  float: left;
  margin: 5px 5px 5px 0;
  padding: 0;
  border: 1px solid #333;
}

.profile-data
{
  margin: 0;
  font-weight: bold;
  line-height: 1.6em;
  font-size: 0.8em;
}

.profile-datablock
{
  margin: 0.5em 0 0.5em;
}

.profile-textblock
{
  margin: 0;
  line-height: 1.2em;
  font-size: 0.9em;
}

.profile-link {
  font-size: 0.9em;
}

تباعد السطور / عدم التداخل

ألق نظرة أخرى على قالب مدونتنا الحالي , و ركز على الفقرات المكتوبة , ستلاحظ أن النص يبدو متداخلا و غير منسق , و هذا ما يسمى بتباعد السطور , و لتصحيح هذا الوضع نغير قيمة صغيرة في كود line-height , يعني الآن ننتقل مرة أخرى الى أعلى صفحة الملف , و بالتحديد في خصائص جسم الصفحة أو الـ body و نقوم بتغيير قيمة الكود الموضح باللون الأخضر من 1.3 الى 1.5:

/* خصائص جسم الصفحة */
body
{
margin: 0;
padding: 0;
color: #393b4a;
background: #d4d5c5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKv52rywHfOYqcPg4Grd02PAN14CzczLISkIg6oo90OlgrqEf8UGxWq8TYW_vV9Bhy9gEQJof6VBJgP0hSOXDqVKC8SANVaSxIUGSZplXtMbY4iCk029TGPqRsDG-SUJPG_2UhQfASKvg/s1600/pinstripe.png) repeat 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.85em;
line-height: 1.5em;
text-align:right;
direction:rtl;
}

تعديل عناوين التدوينات h3

عناوين التدوينات و التي هي عناصر h3 تبدو صغيرة و عادية جدا , فليس بمقدورنا التفريق بينها و بين الروابط الأخرى الموجودة في المدونة , و لتصحيح هذا الوضع نغير حجم خط العنوان من 0.8 الى 1.3 و نضيف قيمة الوصلات الى هذه العناوين:

h3
{
  font-weight: bold;
  font-size: 1.3em;
  margin: 0 0 10px 0;
}

h3 a:link, h3 a:active, h3 a:visited
{
  color: #a0854f;
}

h3 a:hover
{
  color: #000;
}

تعديل ” مرسلة بواسطة … “

نجد هذه العبارة عند آخر كل تدوينة , حيث تشير الى اسم المدون الذي كتب محتوى التدوينة تلك , هذه العبارة سنعمل على تحسينها حتى تبرز كعنصر خارج عن المحتوى , و لتصحيح هذا الوضع , قم باضافة الكود التالي:

.post-footer
{
  margin: 1em 0;
  line-height: 1.6em;
  font: italic normal 100% Georgia, "Times New Roman", Times, serif;
  color: #666;
}

.post-footer div
{
  line-height: 1.6em;
}

فصل عناصر الشريط الجانبي عن بعضها

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

.post
{
  margin: .5em 0 1.5em;
  border-bottom: 1px dotted #333;
  padding-bottom: 1.5em;
}

.sidebar .widget, .main .widget
{
  border-bottom: 1px dotted #333;
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
}

اختبار القالب للمرة الأخيرة و الـتأكد من عدم وجود أخطاء

الخطوة الأخيرة هي التحقق من القالب و اختباره , اذا طبقت كل شيء طرحته في هذا الدرس بشكل صحيح فعلى الأرجح لن ترى أية أخطاء أو مشاكل في القالب , أما اذا لاحظت شيئا غير اعتياديا , أنصحك بمراجعة الدرس مرة أخرى , و ان لم تتوصل الى حل , فلا تتوانى في ترك تعليق على الدرس يحمل أسئلتك و استفساراتك و سأجيب عنها في أقرب وقت ممكن , عموما صورة القالب النهائية , تبدو بهذا الشكل:

يمكنك مشاهدة تطبيقي على هذا العنوان الالكتروني : http://testdrsni.blogspot.com/ ، كما يمكنك تحميل القالب في صيغته النهائية من المرفقات.

كلمة ختام

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

المرفقات

يمكن تحميل القالب النهائي الذي تم شرح إنشاؤه في هذا الدرس من هنا. قالب بلوجر

اهلا وسهلا بك في الموسوعة التقنية

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

عن انس اسماعيل

اضاف للموقع عدد 59 مقالة ودرس.

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

ايضا ننصحك بقراءة :

1
1
1
1
1
1
1
1
1

nourheikel

التسميات

عدد المواضيع و التعليقات

أرشيف المدونة الإلكترونية

translate blog

هل تعلم ؟

الساعة الآن بتوقيت بغداد

نور هيكل

رسالة تعلمية

اشترك بنشرتنا البريدية

Suscríbete via email

Tecnologia Diaria

¿Sin email? CrearHotmail.com Guide

اقسام الموقع

الاكثر مشاهدة

تابع جديدنا في الفيس بوك

المتواجدين الان

تقييم اليكسا

موسوعة مختصة بالمقالات التقنية , تطوير مواقع , برمجة , تصميم , دروس اشهار وارشفة , مدرسة الكترونية متكاملة

انشاء قالب لمدونات BLOGGER