manhajiate: août 2011

في هذه السلسة من التدوينات التي تروم الرقي بمظهر المدونات العربية والرفع من قيمة محتواها، استقيت لكم مجموعة من الإضافات من عدة مواقع متخصصة سواءا العربية منها أو الغربية، والتي أعتبرها الأكثرا نفعا وعملية.

سنتعرف في هذه التدوينة - بمشيئة الله - على خمسة إضافات ستضفي لا محالة رونقا وجمالية على مظهر المدونة مما سيساهم في جذب انتباه الزوار إلى محتوى مدونتك وسيساهم في الرفع من قيمة المدونة بصفة عامة. من هذه الإضافات ما يتعلق بشكل بمختلف التدوينات في المدونة بأنه يدل الزائر على التدوينات السابقة أو المهمة، ومنها ما يهتم خاصة بتخصيص التعليقات مما ينمي التواصل بين المدون والزوار.

وحتى لا أطيل عليكم أكثر فهذه هي الإضافات التي سنتطرق لها في هذا الجزء الأول من هذه السلسلة - بعون الله - مرتبة كالتالي :

تخصيص تعليقات الكاتب.

تركيب عداد التعليقات بجانب عنوان التدوينة.

إضافة تدوينات ذات صلة أسفل كل تدوينة.

تركيب صندوق تعليق الفايسبوك بعد كل تدوينة.

إضافة صندوق عرض الشرائح بطريقة جميلة.

قبل أن نبدأ يجب أن أشير إلى أن كل هذه الإضافات - التي ربما أكون قد عدلت على أكوادها - لكنني لا أدعي أنني صاحبها. عندما يكون مصدر إضافة ما معلوما فسأقوم بتحديده تحتها كملاحظة، أما في حالة عدم تواجد هذه الملاحظة فهذا يدل على أن الكود مجهول المصدر ولم أجد له صاحبا !

تخصيص تعليقات الكاتب

سنقوم - بمشيئة الله - بواسطة كود css بجعل تعليق الكاتب مختلفا عن باقي التعليقات، حتى يتسنى لزائر التعرف عليه بسهولة. بالإضافة إلى خاصية هذه الإضافة المهمة فهي تزيد المدونة جمالية واحترافية، كما أنها لا تكلف شيئا !

الآن مع مراحل تركيب الكود وإضافته للقالب :

لوحة التحكم > تصميم > تحرير HTML

قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.

وسع قوالب عناصر الواجهة.

اضعط CTRL+F و ابحث عن ]]></b:skin>

ألصق فوقها الكود التالي :

.mbt-comment-body {
background: #FFFFFF;
color: #fdca0d;
border: 1px dotted #fdca0d;
margin:0;
padding:0 10px;
width:520px; }

يمكنك أيضا تخصيص التعليق عبر المتغيرات التالية :

لتغيير خلفية التعليق : #FFFFFF

لتخصيص لون خط التعليق : #fdca0d

للتحكم في حجم الحدود 1px ولونها #fdca0d أما بخصوص نوعه فيمكنك تغيير dotted : منقط إلى :

dashed : متقطع

solid : متراص

وبعد ذلك نصل إلى الخطوة الأخيرة في الدرس الأول :

ابحث عبر Crtl +F عن هذا الكود :

<data:commentPostedByMsg/>
</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>

وبعد ذلك قم باستبداله بالكود التالي :

<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>

الآن قم بحفظ قالبك، وبذلك تكون قد حصلت على تخصيص لتعليقاتك بكل سهولة !

ملاحظة : هذه الإضافة استقيتها من هنا وأنصحكم بتتبع ذلك الموقع فهو مفيد أيضا ;)

تركيب عداد التعليقات بجانب عنوان التدوينة

من البديهي أن للتعليقات دور هام في تحديد مدى تفاعل الزوار مع تدوينتك. لدى يحبذ بعض الزوار - ومنهم أنا ! - تركيب عداد التعليقات لما يضيف من جمالية وجذبه انتباه الزوار للتدوينة. ولمن يريد أيضا تركيب هذه الإضافة فليتبع الخطوات التالية :

لوحة التحكم > تصميم > تحرير HTML

قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.

وسع قوالب عناصر الواجهة.

اضعط CTRL+F و ابحث عن ]]></b:skin>

ألصق فوقها الكود التالي :

/*------عداد التعليقات------*/

.comment-bubble {
float : left;
width : 48px;
height : 48px;
background : url(رابط الأيقونة) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:8px 0px 0px 0px;
}
/*------نهاية عداد التعليقات------*/

ولتخصيص هذا الكود :

left : موضع الإضافة يسارا بالنسبة للعنوان يمكنك استبدالها بـ right لتكون على يمينه.

48 : الأولى لعرض الأيقونة والثانية لارتفاعها.

رابط الأيقونة : من المهم إضافة أيقونة وإلا سيظهر عدد التعليقات فقط، استعمل أحد هذه النماذج :

اواو

او

او بامكانك البحث أكثر مع احترام الحجم الموصى به 48*48 باسثناء للإيقونات العريضة كالثانية.

بعد إضافة الكود قم بالبحث عن التالي :

<h3 class='post-title entry-title'>

إن لم تجده فابحث أيضا عن :

<b:if cond='data:post.link'>

وأضف بعده الكود التالي :

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

الآن قم بحفظ قالبك، وبذلك تكون قد حصلت على عداد التعليقات بكل سهولة !

إضافة تدوينات ذات صلة أسفل كل تدوينة

هذه الإضافة مهمة جدا لكل مدون لما لها من دور كبير في إعادة توجيه زائرك إلى تدوينة أخرى وبالتالي مشاهدته لأكبر قدر ممكن من التدوينات في مدونتك. ما يمز هذه الإضافة أن روابط التدوينات التي ستظهر أسفل كل تدوينة على مدونتك تربطها علاقة وطيدة مع التدوينة الأصلية من خلال التسميات، فجميعها تنتمي لنفس الصنف، وهذه الإضافة بمشيئة الله ستعمل في أغلب المتصفحات.

الآن مع خطوات تركيب الإضافة :

لوحة التحكم > تصميم > تحرير HTML

قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.

وسع قوالب عناصر الواجهة.

اضعط CTRL+F و ابحث عن </head>

ألصق فوقها الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

والآن ابحث عن أحد الأكواد التالية :

<data:post.body/>أو<div class='post-body>أو<data:post.body/>أو

وأضف تحته الكود :

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=5;var relatedpoststitle="تدوينات ذات صلة";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div style='clear:both'/></b:if>

لتخصيص هذا الكود :

#d4eaf2 : لون الخلفية عند مرور الفأرة.

5 : العدد الأقصى للتدوينات ذات صلة.

تدوينات ذات صلة : عنوان الإضافة.

قم الآن بحفظ القالب وهنيئا لك بالإضافة !

ملاحظة : هذه الإضافة استقيتها من هنا وقمت بتعديل الكود لحذف رابط الإشهار لأجلكم ;)

تركيب صندوق تعليق الفايسبوك بعد كل تدوينة.

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

الآن نصل إلى عملية التركيب وهي حسب المراحل التالية :

لوحة التحكم > تصميم > تحرير HTML

قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.

وسع قوالب عناصر الواجهة.

اضعط CTRL+F و ابحث عن <html

ألصق بعده الكود التالي :

xmlns:fb='http://www.facebook.com/2008/fbml'

ليصبح كالتالي :

<html xmlns:fb='http://www.facebook.com/2008/fbml' 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'>

الآن ابحث عن <body> وألصق بعده الكود :

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({xfbml: true, appId: معرف التطبيق });
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').appendChild(e);
}());
</script>

ولا تنسى تعديل معرف التطبيق بمعرف التطبيق. بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي :

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='عنوان المدونة' property='og:site_name'/>
<meta content='رابط صورة شعار المدونة' property='og:image'/>
<meta content='معرف التطبيق ID' property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

ولمعرفة معرف حسابك على الفايسبوك فيمكنك معرفته عبر هذ الموضوع الذي انجزه الأخ ذؤيب.
الآن ابحث عن <data:post.body/> وأضف بعده الكود التالي :

<b:if cond='data:blog.pageType == "item"'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>

مع 560 تمثل عرض الصندوق الذي يجب ان لا يتجاوز عرض الصفحة. ولمن يحبذون استعمال صندوق تعليقات فيسبوك باللون الأسود عليهم إضافة colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.
الآن احفظ قالب مدونتك وهنيئا لك !

ملاحظة : هذه الإضافة مأخوذة من موقع البلوجتولز وهي مقدمة من عند الفايسبوك.

تركيب إضافة عارض الصور المنزلقة

إن هذه الإضافة الرائعة ستسمح لك بعرض المواضيع الأكثر أهمية في مدونتك حتى تجذب الزائر إليها، كما أنها تضفي جمالية ورونقا لقالب مدونتك. إن الإضافة التي بين أيدينا ستقوم لا محالة بنزع الإعجاب من زوار مدونتك !
كما أنه من السهل إضافتها فقط اتبع الخطوات التالية :

لوحة التحكم > تصميم > تحرير HTML

قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.

وسع قوالب عناصر الواجهة.

اضعط CTRL+F و ابحث عن <head>

ألصق بعده الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascript-file.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/>

الآن ابحث عن ]]></b:skin> وألصق فوقه الكود التالي :

/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { text-align:right; width: 590px; padding:10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

590 : عرض المستطيل الذي يحبذ أن يتناسب مع عرض المنزلقة ويوفق عرض الصورة بالطبع.
وبعد ذلك اتبع الخطوات الآتية :
لوحة التحكم > تصميم > عناصر الصفحة > إضافة أداة > HTML/Javascript
وألصق الكود التالي :

<div id='coin-slider'>
<a href="رابط الموضوع الأول">
<img src="رابط صورة الموضوع الأول" />
<span>عنوان الموضوع الأول</span>
</a>
<a href="رابط الموضوع الثاني">
<img src="رابط صورة الموضوع الثاني" />
<span>عنوان الموضوع الثاني</span>
</a>
<a href="رابط الموضوع الثالث">
<img src="رابط صورة الموضوع الثالث" />
<span>عنوان الموضوع الثالث</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 590, height: 250, navigation: true, delay: 5000 });
});
</script>

590 : عرض الصورة.
250 : ارتفاعها.
5000 : مدة كل شريحة بأجزاء الثانية.

بعد التعديل على الكود قم بالحفظ، وبذلك تكون قد حصلت على هذه الأداة بكل سهولة !
ولجعل الإضافة تظهر فقط بالصفحة الرئيسية، اجعل لها عنوانا، وقم بالضغط على CTRL+F وابحث عن العنوان في صفحة تحرير القالب بعد تنزيله وتوسيع قوالب عناصر واجهة المستخدم، وقم بالتعديل كالتالي :

<b:widget id='HTML2' locked='false' title='عنوان الإضافة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<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:if>
</b:includable>
</b:widget>

الآن حفظ القالب، وقم بحذف العنوان، وهنيئا لك بالإضافة !

ملاحظة : هذه الإضافة من إبداع Workshop وتم تعديلها أكوادها من طرف مدونة ذؤيب.

آمل أن تكونوا قد استمتعتم بالتدوينة، وإن اصبت فمن الله وإن أخطأت فمني ومن الشيطان .

اقترح إضافات أخرى لعرضها في المستقبل

وإلى جزء آخر من هذه السلسلة

السلام عليكم ورحمة الله

تعالى وبركاته

بالتوفيق

manhajiate

mardi 30 août 2011

vendredi 26 août 2011

#1 إضافات عملية لمدونة بلوجر

dimanche 14 août 2011

أفضل موقع للقران الكريم على الإطلاق

vendredi 5 août 2011

موقع لجعل صورك قديمة

Archives du blog

Membres