شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الثاني
قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا جميلا ومميزا .
عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه , سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى تتابع معنا هذه الأكواد وشكلها فى الواقع .
وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو .
هذه تكويدات خاصه بنوع الملف ومحتواه وليس من الضرورى عليك معرفة ماذا تفعل هذه الأكواد , ولكن هنك جزء هام فيها وهو الملون باللون الأحمر وهو الذى يخبر المتصفح أن يقوم بقراءة المحتوى من إتجاه معين , وهذا الجزء هام جدا وسنتعامل معه كثيرا فيما بعد .
وهو وسم رأس المدونه وهو الوسم الذى يحتوى على أوامر هامه جدا مثل الميتا تاج .
وهذه هى أوامر الميتا تاج وهى الأساسيه ويمكنك اضافة أوامر ميتا تاج أخرى على حسب إحتياجاتك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه .
هو وسم بداية وفتح الكود الذى يضم بداخله أوامر لغة CSS وهى اللغه التى تحدد شكل المدونه وتعطيه المظهر المطلوب .
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 , وبهذا يحدد أوامر هذه اللغه بين وسميه بداية ونهايه .
وهو كود مكتبة جى كويرى الذى يجعل مدونتك قابله للإستعانه بتأثيرات جى كويرى الجذابه جدا , وإن لم تكن موجوده بمدونتك فعليك إضافتها .
وهو وسم إغلاق رأس المدونه , وهو الذى يضم كل ما ذكرناه سابقا فيما بعد وسم فتح رأس المدونه .
وهو وسم بداية وفتح جسد المدونه أو محتوى المدونه .
وهو كود أداه موجوده على المدونه , والكود السابق خاص بقائمة الروابط , فهو يحدد إسم الأداه وإذا كانت مقفله أو مفتوحه ونوع الأداه, ومثل هذه الأدوات يكون رأس الصفحه و رسائل المدونه الإلكترونيه ( التدوينه نفسها ) .
وهو كود التقسيم والذى يحدد قسم معين فى المدونه ويحتوى على ما يحتوى عليه هذا القسم , ويبدأ بكود البدايه وينتهى بوسم الإغلاق .
وهو وسم الشرط , ووظيفته أنه يشتطر أمرا ما على المتصفح , فمثلا يشترط على المتصفح بإظهار أداه معينه فى الصفحه الرئيسيه فقط وإخفائها فى باقى الصفحات , وهكذا فى أمور كثيره فى المدونه .
(function() {
var items =
var msgs =
var config =
//
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 + entry.content.$t + ;
}
}
}
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);
}
})();
// ]]>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهى لغه تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد فى استخدام القوالب فى بلوجر .
وهو وسم نهاية وإغلاق جسد أو محتوى القالب , وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحه أو محتوى المدونه .
وسم الإغلاق للكود كامل