قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا جميلا ومميزا .
عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه , سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى تتابع معنا هذه الأكواد وشكلها فى الواقع .
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر .
وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو .<?xml version="1.0" encoding="UTF-8" ?>
هذه تكويدات خاصه بنوع الملف ومحتواه وليس من الضرورى عليك معرفة ماذا تفعل هذه الأكواد , ولكن هنك جزء هام فيها وهو الملون باللون الأحمر وهو الذى يخبر المتصفح أن يقوم بقراءة المحتوى من إتجاه معين , وهذا الجزء هام جدا وسنتعامل معه كثيرا فيما بعد .<!DOCTYPE html>
<html b:version='2' class='v2' 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>
وهذه هى أوامر الميتا تاج وهى الأساسيه ويمكنك اضافة أوامر ميتا تاج أخرى على حسب إحتياجاتك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه .<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
هو وسم بداية وفتح الكود الذى يضم بداخله أوامر لغة CSS وهى اللغه التى تحدد شكل المدونه وتعطيه المظهر المطلوب .<b:skin><![CDATA[
وهو كود المتغيرات ويوجد عادة فى القوالب التى تقدمها لنا بلوجر رسميا , ونجد هذا الكود موجود بكثره ولكل واحد فيهم وظيفه محدده , فمثلا فى هذا الكود فهو يحدد لنا خط محتوى المدونه ويقدم لنا الخط الأساسى والمعتاد ثم يقدم لنا الخط الذى قمت أنت بإختياره وتغييره من خلال مصمم نماذج بلوجر .<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
وهو كود CSS ويلى أكواد ووسوم المتغيرات مباشرة , وهذا الكود الذى كتبته كنموذج يحدد لنا محتوى أو جسد المدونه من حيث الخط ولون النص والخلفيه والحواشى , ونلاحظ إستخدام المتغيرات فى هذه الأكواد .body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
وهو وسم نهاية وإغلاق الكود الذى ضم بداخله لغة CSS , وبهذا يحدد أوامر هذه اللغه بين وسميه بداية ونهايه .]]></b:skin>
وهو كود مكتبة جى كويرى الذى يجعل مدونتك قابله للإستعانه بتأثيرات جى كويرى الجذابه جدا , وإن لم تكن موجوده بمدونتك فعليك إضافتها .<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
وهو وسم إغلاق رأس المدونه , وهو الذى يضم كل ما ذكرناه سابقا فيما بعد وسم فتح رأس المدونه .</head>
وهو وسم بداية وفتح جسد المدونه أو محتوى المدونه .<body expr:class='"loading" + data:blog.mobileClass'>
وهو كود أداه موجوده على المدونه , والكود السابق خاص بقائمة الروابط , فهو يحدد إسم الأداه وإذا كانت مقفله أو مفتوحه ونوع الأداه, ومثل هذه الأدوات يكون رأس الصفحه و رسائل المدونه الإلكترونيه ( التدوينه نفسها ) .<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
وهو كود التقسيم والذى يحدد قسم معين فى المدونه ويحتوى على ما يحتوى عليه هذا القسم , ويبدأ بكود البدايه وينتهى بوسم الإغلاق .<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
وهو وسم الشرط , ووظيفته أنه يشتطر أمرا ما على المتصفح , فمثلا يشترط على المتصفح بإظهار أداه معينه فى الصفحه الرئيسيه فقط وإخفائها فى باقى الصفحات , وهكذا فى أمور كثيره فى المدونه .<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهى لغه تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد فى استخدام القوالب فى بلوجر .<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب , وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحه أو محتوى المدونه .</body>
وسم الإغلاق للكود كاملا .</html>
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر .
ايه الجمال ده يا معلم تسلم ايدك
ردحذفكنت عايز اعرف رايك في مدونتي سريعة ولا بطيئة وشكلها جذاب ولا لاء
http://seyana-online.blogspot.com/
بس الاوامر دي القاها وين
حذفجميل ما كتبت اخي ولكن عني مشكلة
ردحذفعندما اقوم بتنزيل قالب من الانترنت لأنصبه على مدونتى تحدث مشكلة
هي لا يوجد ملف XML عند فك الضغط عن القالب
ما هي المشكلة هل القوالب المتواجدة على الانترنت ليس بها ملف XML
ام كيف ؟
مبروك القالب الجديد يا ياسر
ردحذفشكله اشيك من التاني بكتير
http://bit.ly/VdRmsf
مشكووور جدا اخي على هذا المجهود بانتظار الدرس الثاني و الثالث و الاخير
ردحذفأنا مبتدئ بهذا المجال واشكرك على جهودك الجبارة أخ ياسر .. بسألك هل كود XML هذا مهم؟ يعني لو صممت أنا صفحة بواسطة HTML وبعدين مسحت كود XML الخاص بالمدونة كاملاً ولصقت بدلاً منه كود HTML اللي أنا كتبته هل هذا خطأ؟ وهل ستعمل المدونة أم لا؟ أرجو الرد وشكراً
ردحذفللأسف لن تعمل وهذا يعتمد على خبراتك أيضا فى معالجة مثل هذه الامور .
حذفزورونا هنا
ردحذفhttp://comsoftware9.blogspot.com/
شرح رائع مشكور
ردحذف