السبت، 10 أكتوبر 2009

صمم theme المدونة بنفسك على blogger (2تكملة)

حسنا بعد تحفيز ملح الحياة لي وهي مشكورة على ذلك أكمل

درس صناعة الثيم ^ ^

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

نبدأ بتطبيق ماتعلمناه:

في آخر الدرس ذكرت ثلاث تقسيمات لكود مدونتنا وهم

الكود القياسي والذي كما قلت لن نغير فيه شيئا

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

أما الأخير فيمثل بيانات المدونة..إلخ

التطبيق:

نفتح برنامج تحرير نصوص بسيط مثلا على ويندوز blocnot

وعلى linux ubuntu text editor

ونكتب القسم الأول من الكود:

كما قلنا سابقا هذا الجزء لا يتم التعديل عليه يبقى كما نشاهده

<?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>

<script type='text/javascript'>

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type='text/javascript'>

try {

var pageTracker = _gat._getTracker("UA-5664899-3");

pageTracker._trackPageview();

} catch(err) {}</script>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*

وهكذا يبقى لنا القسم المهم والمرحلة الأجمل في تصميم theme مدونتنا

ألا وهوcss

نبدأ بشرح المصطلحات التي نحتاج إليها في theme مدونتنا

margin=الحاشية أو الهامش

padding=الهامش الداخلي

color=لون

text-align="محاذاة النص أو إتجاه النص "يمين-يسار-وسط

حسنا المصطلح لا يمكن فهمه إن لم يتم تجريبه وبذلك سأرسم مثالا تجريبيا للهامش