أعمالنا
الدعم الفني
إتصل بنـا
السلام عليكم ورحمة الله تعالى وبركاته
اليوم ومع بداية دورة تعلم لغة HTML
سأقدم لكم
شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الأول
قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى
تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا
SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا
جميلا ومميزا .
عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن
أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه ,
سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى
تتابع معنا هذه الأكواد وشكلها فى الواقع .
<?xml version="1.0" encoding="UTF-8" ?>
وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو .
<!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>
وهو وسم رأس المدونه وهو الوسم الذى يحتوى على أوامر هامه جدا مثل الميتا تاج .
<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>
وهذه هى أوامر الميتا تاج وهى الأساسيه ويمكنك اضافة أوامر ميتا تاج أخرى على حسب إحتياجاتك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه .
<b:skin><![CDATA[
هو وسم بداية وفتح الكود الذى يضم بداخله أوامر لغة CSS وهى اللغه التى تحدد شكل المدونه وتعطيه المظهر المطلوب .
<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"/>
وهو كود المتغيرات ويوجد عادة فى القوالب التى تقدمها لنا بلوجر رسميا ,
ونجد هذا الكود موجود بكثره ولكل واحد فيهم وظيفه محدده , فمثلا فى هذا
الكود فهو يحدد لنا خط محتوى المدونه ويقدم لنا الخط الأساسى والمعتاد ثم يقدم لنا الخط الذى قمت أنت بإختياره وتغييره من خلال مصمم نماذج بلوجر .
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 ويلى أكواد ووسوم المتغيرات مباشرة , وهذا الكود الذى كتبته كنموذج يحدد لنا محتوى أو جسد المدونه من حيث الخط ولون النص والخلفيه والحواشى , ونلاحظ إستخدام المتغيرات فى هذه الأكواد .
وهو وسم نهاية وإغلاق الكود الذى ضم بداخله لغة 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>
وهو وسم الشرط , ووظيفته أنه يشتطر أمرا ما على المتصفح , فمثلا يشترط على
المتصفح بإظهار أداه معينه فى الصفحه الرئيسيه فقط وإخفائها فى باقى
الصفحات , وهكذا فى أمور كثيره فى المدونه
<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>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهى لغه تقوم بعمل عدة مهام والقيام
بعدة وظائف وإعطاء أوامر كثيره تفيد فى استخدام القوالب فى بلوجر .
</body>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب , وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحه أو محتوى المدونه
</html>
وسم الإغلاق للكود كاملا
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر
لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر
بارك الله فيك يا اخى الكريم على الشرح الأكثر من رائع وجعلة الله لميزان حسناتك تقبل مرروى
ردحذفبارك الله فيك أخي على مرورك منور المدونة
ردحذفوراح أضع المزيد من الدروس الخاصة بهذا المجال
:)
صدقاً من أجمل المدونات (h)
ردحذفالله يعطيك العافية
شكرا لك اخي :)
ردحذف