أهلا ومرحبا بكم في مقال جديد وحصري من قسم بلوجر
مقدمة
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة
علينا معرفة أن قالب بلوجر من الأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجة , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله أو رفعه على مدونتك لتصبح مدونة مميزة وذات مظهر جميل ومتناسق.
 |
| Blogger Html,Css,JavaScript |
عند رفع ملف القالب على مدونتك وفتح تعديل أو محرر HTML ستجد أن القالب عباره عن أكواد مصفوفة بشكل منظم ومنسق ومرتب , هذه الأكواد لها معنى وكلا منها له وظيفة خاصة , وسنتعرف سويا الآن في السطور القادمة على هذه الأكود وكل جزء على حدا ماذا تنتظر أفتح قالب مدونتك عبر الذهاب إلى المظهر>تعديل 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 tags.
<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>
وهذه هى أكواد و أوامر الميتا تاج meta tags وهى الأساسية ويمكنك اضافة أكواد و أوامر ميتا تاج أخرى على حسب إحتياجك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 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 ويلى بعد أكواد ووسوم المتغيرات مباشرة , وهذا الكود كنموذج يحدد لنا محتوى أو جسد المدونة من حيث الخطوط ولون النصوص والخلفيه والحشو , ونلاحظ إستخدام المتغيرات فى هذه الأكواد .
]]></b:skin>
وهو وسم نهاية وإغلاق الكود الذى ضم بداخله لغة CSS , وبهذا يحدد أوامر هذه اللغة بين وسميه بداية ونهاية .
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
وهو كود مكتبة جى كويرى jquery الذى يجعل مدونتك قابله للإستعانه بتأثيرات جى كويرى jquery الجذابة والرائعة جدا , وإن لم تكن موجودة بقالب مدونتك فعليك إضافتها .
</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 وهى لغة تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيرة تفيد فى استخدام جميع قوالب بلوجر .
إلى هنا إنتهى شرح أهم وسوم وأكواد قوالب بلوجر إذا أفادك المقال لاترحل وشاركنا ببصمتك وسنعمل في المقالات القادمة علي شرح أكواد ووسوم أخرى لتصبح أكثر إحترافية
هل يمكن ربط المدونة بالفايرباس و نشر و تعديل كل شئ من الفايرباس
ردحذفالله أعلم فلم يخطر في بالي هذه الفكرة
حذف