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

اليوم أكمل شرحي لما تبقى عن تصميم المدونة

وهذه المرة سأوضح أكثر شرحي لأني أعلم أن لا فهم ما لم يكن هناك تطبيق.

وهذا ماتعلمته من تجاربي الخاصة.

لذى سيكون الشرح هذه المرة بالتطبيق وتوضيح كل خطوة نقوم بها وتذكيركم في أي تدوينة كتبت عن هذه الخطوة :)

هكذا لا تكون شروحاتي خيالا علميا

والرجاء عدم اليأس أو الملل

بسم الله أبدأ:

فالنكتب هذا الكود أو إنسخوه في المحرر



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

لقد مر عليكم هذا الكود سابقا وقد شرحت لكم عنه هنا

/*----start css----*/

هذا رمز للتعليقات ولن يظهر في الصفحة فلا تقلقوا

وبهذه الطريقة تستطيعون أن تكتبوا أسمائكم وحقوق ملكيتكم لقالب

blogger الخاص بكم

/* Variable definitions

والآن دخلنا إلى عالم المتغيرات التعريفية التي ستعرف لنا بعض الألوان والخطوط التي نود إستخدامها

وفي هذا المكان أترك لكم حرية إختيار ألوانكم وخطوطكم بل وأريكم أين تضعون الألوان والخطوط.



<Variable name="bodybgColor" description="Body Background Color"



type="color" default="#FFBBE8" value="#DBD7CE">

هنا نجد لون الخلفية الخاص بالوسم body

الذي ركزت عليه في البداية أي هنا

وكما شرحت في الدرس السابق للمتغيرات التعريفية فإنه تلزم علينا كتابة هذه التوضيحات (الملون).

ربما ستقولون لي أين الألوان التي إخترتها حسنا في الكمبيوتر بصفة عامة لا تكتب الألون بل توضع كرموز يفهمها الكمبيوتر مثال:

#FFBBE8

وربما ستسألون وكيف أختار الألوان إن كانت كلها رموز هكذا؟

هناك الكثير من المواقع التي توفر خدمة إختيار الألوان وكمثال سأعطيكم هذا الموقع

بنفس المصطلحات نكمل البقية



<Variable name="blogframeColor" description="Blog Background Color"



type="color" default="#800040" value="#ffffff">



<Variable name="blogBorderColor" description="Blog Border Color"



type="color" default="#800040" value="#ffffff">



<Variable name="headerbgColor" description="Header Background Color"



type="color" default="#ffffff" value="#1f1f1f">



<Variable name="headerBorderColor" description="Header Border Color"



type="color" default="#800040" value="#000000">



<Variable name="blogTitleColor" description="Blog Title Color"



type="color" default="#800040" value="#ffffff">



<Variable name="blogDescriptionColor" description="Blog Description Color"



type="color" default="#800040" value="#666666">











<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"



type="color" default="#C94093" value="#1f1f1f">



<Variable name="linkbarbgColor" description="Linkbar Background Color"



type="color" default="#C94093" value="#F5F1E6">



<Variable name="linkbarBorderColor" description="Linkbar Border Color"



type="color" default="#9D1961" value="#202020">



<Variable name="linkbarTextColor" description="Linkbar Text Color"



type="color" default="#ffffff" value="#ebebeb">



<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"



type="color" default="#ffffff" value="#ebebeb">



<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"



type="color" default="#9D1961" value="#1f1f1f">











<Variable name="contentbgColor" description="Content Background Color"



type="color" default="#ffffff" value="#ebebeb">



<Variable name="contentBorderColor" description="Content Border Color"



type="color" default="#9D1961" value="#ebebeb">



<Variable name="postbgColor" description="Post Background Color"



type="color" default="#ffffff" value="#ffffff">



<Variable name="postBorderColor" description="Post Border Color"



type="color" default="#ffffff" value="#ffffff">



<Variable name="postTitleColor" description="Post Title Color"



type="color" default="#000000" value="#202020">



<Variable name="posttitletopBorderColor" description="Post Title Top-Border Color"



type="color" default="#000000" value="#202020">



<Variable name="posttitleBorderColor" description="Post Title Border Color"



type="color" default="#000000" value="#999999">



<Variable name="dateHeaderColor" description="Date Header Color"



type="color" default="#000000" value="#b3b3b3">



<Variable name="textColor" description="Text Color"



type="color" default="#191919" value="#202020">



<Variable name="mainLinkColor" description="Main Link Color"



type="color" default="#333333" value="#155CA7">



<Variable name="mainHoverLinkColor" description="Main Hover Link Color"



type="color" default="#9D1961" value="#202020">



<Variable name="mainVisitedLinkColor" description="Main Visited Link Color"



type="color" default="#9D1961" value="#155CA7">



<Variable name="blogQuoteColor" description="Blog Quote Color"



type="color" default="#191919" value="#202020">



<Variable name="codeTextColor" description="Code Text Color"



type="color" default="#660000" value="#202020">



<Variable name="imagebgColor" description="Photo Background Color"



type="color" default="#f5f5f5" value="#ffffff">



<Variable name="imageBorderColor" description="Photo Border Color"



type="color" default="#f5f5f5" value="#ebebeb">











<Variable name="postfooterBorderColor" description="Postfooter Border Color"



type="color" default="#E590C8" value="#ebebeb">



<Variable name="postfooterTextColor" description="Postfooter Text Color"



type="color" default="#b8659C" value="#155CA7">



<Variable name="postfooterLinkColor" description="Postfooter Link Color"



type="color" default="#b8659C" value="#155CA7">



<Variable name="commentTabLinkColor" description="Comment Tab Link Color"



type="color" default="#b8659C" value="#155CA7">



<Variable name="feedlinksColor" description="Feed Links Color"



type="color" default="#9D1961" value="#155CA7">











<Variable name="mainsidebarbgColor" description="Main Sidebar Background Color"



type="color" default="#FFBBE8" value="#ebebeb">



<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"



type="color" default="#FFBBE8" value="#ebebeb">



<Variable name="sidebar1BorderColor" description="Sidebar1 Border Color"



type="color" default="#C94093" value="#ebebeb">



<Variable name="sidebar1HeaderBgColor" description="Sidebar1 Header Background Color"



type="color" default="#ffffff" value="#ebebeb">



<Variable name="sidebar1HeaderBorderColor" description="Sidebar1 Header Border Color"



type="color" default="#C94093" value="#333333">



<Variable name="sidebar1HeaderColor" description="Sidebar1 Header Color"



type="color" default="#000000" value="#333333">



<Variable name="sidebar1TextColor" description="Sidebar1 Text Color"



type="color" default="#9D1961" value="#155CA7">



<Variable name="sidebar1LinkColor" description="Sidebar1 Link Color"



type="color" default="#9D1961" value="#155CA7">



<Variable name="sidebar1HoverLinkColor" description="Sidebar1 Hover Link Color"



type="color" default="#000000" value="#333333">



<Variable name="sidebar1VisitedLinkColor" description="Sidebar1 Visited Link Color"



type="color" default="#000000" value="#155CA7">











<Variable name="lowerbarbgColor" description="Lowerbar Background Color"



type="color" default="#ffffff" value="#ebebeb">



<Variable name="lowerbarBorderColor" description="Lowerbar Border Color"



type="color" default="#C94093" value="#ffffff">



<Variable name="lowerbarHeaderColor" description="Lowerbar Header Color"



type="color" default="#000000" value="#ffffff">



<Variable name="lowerbarTitleBorderColor" description="Lowerbar Header Border Color"



type="color" default="#C94093" value="#ffffff">



<Variable name="lowerbarTextColor" description="Lowerbar Text Color"



type="color" default="#9D1961" value="#999999">



<Variable name="lowerbarLinkColor" description="Lowerbar Link Color"



type="color" default="#9D1961" value="#999999">



<Variable name="lowerbarHoverLinkColor" description="Lowerbar Hover Link Color"



type="color" default="#000000" value="#ffffff">



<Variable name="lowerbarVisitedLinkColor" description="Lowerbar Visited Link Color"



type="color" default="#000000" value="#999999">



<Variable name="lowerbarListLineColor" description="Lowerbar List Line Color"



type="color" default="#000000" value="#191919">











<Variable name="commentTitleColor" description="Comment Header Color"



type="color" default="#000000" value="#202020">



<Variable name="commentAuthorBgColor" description="Comment Author Background Color"



type="color" default="#9D1961" value="#ffffff">



<Variable name="commentboxBorderColor" description="Comment Author Border Color"



type="color" default="#C94093" value="#ebebeb">



<Variable name="commentauthorColor" description="Comment Author Color"



type="color" default="#9D1961" value="#155CA7">



<Variable name="commentTimeStampColor" description="Comment Timestamp Color"



type="color" default="#C94093" value="#999999">



<Variable name="commentTextColor" description="Comment Text Color"



type="color" default="#4c4c4c" value="#202020">











<Variable name="footerbgColor" description="Footer Background Color"



type="color" default="#ffffff" value="#ffffff">



<Variable name="footerBorderColor" description="Footer Border Color"



type="color" default="#000000" value="#ffffff">



<Variable name="footerHeaderColor" description="Footer Header Color"



type="color" default="#000000" value="#cccccc">



<Variable name="footerTextColor" description="Footer Text Color"



type="color" default="#C94093" value="#cccccc">



<Variable name="footerLinkColor" description="Footer Link Color"



type="color" default="#C94093" value="#155CA7">



<Variable name="footerHoverLinkColor" description="Footer Hover Link Color"



type="color" default="#C94093" value="#cccccc">



<Variable name="footerVisitedLinkColor" description="Footer Visited Link Color"



type="color" default="#C94093" value="#cccccc">

/*الخطوط*/

<Variable name="blogTitleFont" description="Blog Title Font"

type="font"

default="normal bold 273% Georgia, Times, serif"

  value="normal normal 207% Times, serif">

<Variable name="blogDescriptionFont" description="Blog Description Font"

type="font"

default="normal normal 104% georgia,helvetica,verdana,Georgia, serif"

  value="normal normal 76% Times, serif">

<Variable name="linkbarTextFont" description="Linkbar Text Font"

type="font"

default="normal normal 77% Verdana, sans-serif"

  value="normal normal 74% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="dateHeaderFont" description="Date Header Font"

type="font"

default="normal bold 117% Arial, sans-serif"

  value="normal normal 86% Arial, sans-serif">

<Variable name="postTitleFont" description="Post Title Font"

type="font"

default="normal bold 180% Georgia, Times, serif"

  value="normal normal 120% Georgia, Times, serif">

<Variable name="textFont" description="Text Font"

type="font"

default="normal normal 90% Arial, sans-serif"

  value="normal normal 78% Arial, sans-serif">

<Variable name="quoteFont" description="Blog Quote Font"

type="font"

default="normal normal 92% helvetica,tahoma,verdana,arial,times,Sans-serif"

  value="normal normal 97% Arial, sans-serif">

<Variable name="sidebarHeaderFont" description="Sidebar Title Font"

type="font"

default="normal bold 117% Arial, sans-serif"

  value="normal normal 141% Georgia, Times, serif">

<Variable name="sidebarTextFont" description="Sidebar Text Font"

type="font"

default="normal normal 78% Arial, Verdana, sans-serif"

  value="normal normal 75% Arial, sans-serif">

<Variable name="postfooterTextFont" description="Post-Footer Text Font"

type="font"

default="normal normal 93% Arial, sans-serif"

  value="normal normal 77% Arial, sans-serif">

<Variable name="commentTitleFont" description="Comment Title Font"

type="font"

default="normal bold 120% Arial, sans-serif"

  value="normal normal 140% Georgia, Times, serif">

<Variable name="commentTextFont" description="Comment Text Font"

type="font"

default="normal normal 95% Arial, sans-serif"

  value="normal normal 86% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="footerHeaderFont" description="Footer Header Font"

type="font"

default="normal bold 131% Trebuchet, Trebuchet MS, Arial, sans-serif"

  value="normal bold 97% Arial, sans-serif">

<Variable name="footerTextFont" description="Footer Text Font"

type="font"

default="normal normal 76% Trebuchet, Trebuchet MS, Arial, sans-serif"

  value="normal normal 72% Arial, sans-serif">

*/

لا أعلم لكن أضن إلى الآن كل شيء واضح لأن نفس الطريقة التي كتبناها مع الألوان سنكتبها مع الخطوط وطبعا هي أيضا لكم لتختاروا ما الخطوط التي تناسبكم.

الآن فالنكتب ما تعلمناه سابقا:

/*العام*/

إقرأ أول تدوينة .

إحفظوا ما كتبناه الآن إلى تكملة أخرى إن شاء الله فقد تعبت الآن خصوصا أنني كتبت هذه التدوينة بعد عودتي من العمل مباشرة أعذروني:(

شارك هذا مع أصدقائك

2 تعليقات

ملح الحياة 17 أكتوبر 2009 في 3:34 م

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

رد

saadeddine 17 أكتوبر 2009 في 3:48 م

ههههههه والله ما أتدخل في موضوع إلا إن أعجبني طرحه.
ثانيا الدروس لا تفهم إلا بالتطبيق وفي النهاية حين نقوم بتطيق الثيم بإذن الله ستجدينه بسيطا وسهلا.

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

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

شارك هذا مع أصدقائك

2 تعليقات