Lessons 4 bloggers: بداية لاااابد منها ... الجزء الثانى

<?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[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

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

.main .Blog {
border-bottom-width: 0;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

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

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-$startSide: 0px;
margin-$endSide: 0px;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='egyptian medicine (رأس الصفحة)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>


<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span>
</p>

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div id='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> 
<div id='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
Subscribe to:
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a>
</p>

<div id='backlinks-container'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>

<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>

<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'>View
my complete profile</a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body>
</html>

رجاءا لا تقرا هذا الموضوع قبل قراءة الجزء الاول

كما ذكر فى الجزء الاول سيتم عرض قالب معين وشرح الاكواد التى يحتوى عليها بالتفصيل ,
هذا القالب بالاعلى هو قالب minima المشهور جدا , هانفصصه حته حته ...

جميع الاكواد كما ذكرنا تقع بين كلمتى <html> و </html> الملونتين باللون الاحمر , ستجد فوق كلمة <html> بعض السطور باللون الموف احب ان اتناولهم ببعض الكلمات البسيطة جدا قبل البدء .
هذا الجزء يسمى بجزء اكواد الميتا وهى مخصصه للاعلان عن المدونة , بمعنى :

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

فى الجزء الاول ذكرت ان هناك نظام خاص بترتيب الاكواد يدعى نظام التعشيش nesting , ببساطة تخيل صندوق كبير داخله صندوق اصغر منه بداخله صندوق اصغر وهكذا , اذا تخيلنا الصندوق الكبير جدا للقالب بدايته ونهايته هما كلمتى <html> و </html> على الترتيب , فان داخل هذا الصندوق الكبير يوجد صندوقان اصغر هما صندوق منطقة الراس (<head> و </head> ) محدد باللون الازرق وصندوق منطقة الجسم ( <body> و </body> ) محدد باللون الطوبى , لذلك اذا رتبنا الترتيب الصحيح سيكون بالشكل الاتى

<html>
<head>
هنا اكواد منطقة الرأس
</head>
<body>
هنا اكواد منطقة الجسم
</body>
</html>

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

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

كلمة <html> هى بداية الاكواد الفعليه للقالب التى سيراها المتصفح وينفذها ليعطيك الشكل الصحيح للمدونة . وتذكر انها بداية الصندوق الكبييير جدا , لذلك فى نهاية القالب توقع ان تجد كلمة </html> - نفس الكلمة مسبوقه بشرطة مائلة - دليلا على نهاية هذا الصندوق . لنر ما داخل هذا الصندوق اذن :

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

لنعتبره صندوق صغير جدا بدايته <title> ونهايته </title> وبداخله القيمة التى ستحدد لنا ماهو عنوان المدونة , والقيمه هى <data:blog.pageTitle/> , وطبعا ليست هذه القيمة التى ستظهر فى المدونة ولكنها مجرد تعريف لهذه القيمة , ولتتعرف اكثر على معنى التعريفات دعنا نتابع الجزء الخاص بتعريفات المدونة ...

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

ـــــــــــــــــــــــــــــــــ

اول قطعة سنجدها فى هذه الصندوق هى جزء التعريفات - محدد باللون الاخضر بالقالب بالاعلى- وهو جزء مهم جدااااا

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

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

هذا مثال للون خلفية المدونة bgcolor وقيمتها المحدده هنا #ffffff وهذا كود اللون الابيض , اى ان الخلفيه ستكون بيضاء . مثال اخر :

هذا تحديد للجهة التى سيبدأ منها النص فى المدونة ورمزها startside , وقيمتها الافتراضيه left وقيمتها المحدده هنا هى left وهذا بالنسبه للمدون الاجنبى الذى يكتب من اليسار لليمين , اما اذا كنت تريد تعريب مدونتك فيمكنك تغيير القيمة الى right . يمكنك ايضا الذهاب الى هذا الموضوع : تعريب المدونة

طبعا هذا تحديد للجهة التى سينتهى اليها النص ورمزها endside وقيمتها الافتراضيه right وقيمتها المحدده هنا right وسيلزمك ايضا عكس القيمة الى left اذا اردت تعريب مدونتك .
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

ما قصة اسماء الطلاب وارقام غيابهم اذن ؟
اذا افترضنا ان جزء التعريفات هو دفتر اسماء الطلاب وارقام غيابهم , ستجد بعد قليل ان القالب يتعامل بهذه الطريقة تماما, مثلا

#main-wrapper {
width: 410px;
float: $startSide;

كلمة float معناها الحرفى " يطوف " ومعناها هنا هو المكان الذى ستتواجد به قطعة التدوين الرئيسية ( main-wrapper ) هل تريدها فى اليمين right ام اليسار left ام المنتصف center ؟
القيمة المحدده هنا هى $startSide ولكن ماهو بالظبط $startSide ؟
$startSide ماهو الا رقم الطالب وليس اسمه , اذا اردت معرفة اسمه سترجع الى دفتر الغياب لتجد ان $startSide تعنى اليسار left , اذن فى هذا القالب سيكون الجزء الرئيسى للمدونة واقع جهة اليسار . حسنا ؟

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

ملاحظة مهمة جدا : جميع التعريفات هى الاسماء + مسبقة بالعلامة $
باقى التعريفات ساذكر اسماؤها ومعانيها فقط :

$bgcolor لون خلفية المدونة
$textcolor لون نص التدوين
$linkcolor لون اللينكات اوالروابط بمعنى اصح
$pagetitlecolor لون نص عنوان المدونة
$descriptioncolor لون نص وصف المدونة
$titlecolor لون نص عناوين التدوينات
$bordercolor لون حدود المدونة
$sidebarcolor لون نص العناوين التى بالاطار الجانبى
$sidebartextcolor لون نص الكلام فى الاطار الجانبى
$visitedlinkcolor لون الروابط المزارة
$bodyfont نوع الخط
$headerfont نوع الخط فى منطقة راس المدونة
$pagetitlefont نوع خط عنوان المدونة
$descriptionfont نوع خط وصف المدونة
$postfooterfont نوع خط منطقة الذيل
$startSide الجهة التى سيبدأ منها النص
$endSide الجهة التى سينتهى اليها النص

اذن , عندما ناتى لاحقا لنحدد لون الروابط فى المدونة , سيقابلنا التعريف $linkcolor , ماهى القيمة للتعريف $linkcolor بالتحديد ؟ ستجد قيمتهه محدده فى جزء التعريفات وهى بالتحديد #5588aa حسنا ؟

بالطبع كل من لديه هذا الجزء فى القالب يمكنه تغير هذه القيم اما يدويا كما ذكرنا , او اوتوماتيكيا عن طريق الذهاب الى layout > fonts and colors ليجد اختيارات تحديد هذه القيم بالتفصيل .

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

#main-wrapper {
width: 410px;
float: left;

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

مع انى اكره تقسيم الموضوع الواحد الى عدة اجزاء الا انه ما باليد حيلة , ساتابع الجزء الثالث حوالى الساعة 12 مساءا او غدا ان شاء الله . c u soooon

7 اضف تعليق , التعليقات:

osama algendy said...: والله لا يسعني إلا أن أقول بسم الله ما شاء الله
كمل مسيرتك يا بطل والله حاسس أني بكلك وهو بالفعل أحد أعظم المدونين العرب
يا دكتور وائل أنا عندي فكرة أن شاء الله هتضاعف بيها عدد زوارك وأرباحك لأضعاف الاضعاف ..كلمني علي الياهو; July 4, 2009 at 12:11 AM
شَــــذَا رُوْحٍــــــيُ said...: مهما اقول لم اوفيك حقك

بارك الله فيك

تسلم ايدك د. وائل

بجد استفدت كتيررررر; February 6, 2010 at 4:19 PM
‎Ibrahem Alsedrany‎ said...: كل الشكر والتقدير للجهد الرائع والكبير في الشرح المفيد والسهل جداً; March 5, 2010 at 6:49 PM
حسن محمد محمد said...: عزيزي وائل أسلوبك في الكتابة أكثر من رائع , وطرحك للموضوع منظم جداً جداً , جزاك الله كل خير يا بطل; March 22, 2010 at 11:11 PM
splashcoupons said...: الان مع رمز ترويجي سبلاش يمكنكم الحصول علي كافة انواع المنتجات الاصلية بـ افضل الاسعار من قسيمة سبلاش يمكنكم الان زياره سبلاش اطفال لـ التعرف علي المزيد من الخدمات; September 30, 2019 at 12:38 PM
online learn said...: نقدم لكم كل جديد فى عالم السوشيال ميديا و انشاء الصفحات و الاعلانات من خلال قناتنا المميزة التى توفر لكم ابسط الطرق لانشاء حساب جيميل فى 3 دقائق كما نقدم لكم كيفيه انشاء مدونة بلوجر و كيفية الاستفادة منها اما فى عالم الاعلانات نقدم لكم اعلانات الفيس بوك المموله التى لا غنى عنها و بابسط الطرق الممكنة و استهداف العميل كما نقدم لكم بلوجر لتقديم كل الفيديوهات
https://youtu.be/7AgJ-PNYqQA
https://youtu.be/rBDXkNYfXQs
https://youtu.be/HUTOTe3fSH4
https://onlinelearn94.blogspot.com/2019/10/blog-post.htm; October 30, 2019 at 11:16 AM
gamezawy said...: العاب موبيل العاب كراش حل الغاز العاب كلمات كراش الان من خلال زيتونة اليك فيديوهات حل لغز كلمات كراش عبر قناتنا علي اليوتيوب .

gamezawy; September 26, 2020 at 11:22 AM

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

أرشيف

قلب ونقى

رابط المدونة

اشترك معانا

2009-09-08

بداية لاااابد منها ... الجزء الثانى

اكتب تعليقك

7 اضف تعليق , التعليقات:

Post a Comment

فهرس الدروس

كلمنى اون لاين

ابحث