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

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

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

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

1. تخصيص تعليقات الكاتب.
2. تركيب عداد التعليقات بجانب عنوان التدوينة.
3. إضافة تدوينات ذات صلة أسفل كل تدوينة.
4. تركيب صندوق تعليق الفايسبوك بعد كل تدوينة.
5. إضافة صندوق عرض الشرائح بطريقة جميلة.

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

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

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

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

1. لوحة التحكم > تصميم > تحرير HTML
2. قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.
3. وسع قوالب عناصر الواجهة.
4. اضعط CTRL+F و ابحث عن ]]></b:skin>
5. ألصق فوقها الكود التالي :

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

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

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

1. dashed : متقطع
2. 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> 

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

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

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

  

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

1. لوحة التحكم > تصميم > تحرير HTML
2. قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.
3. وسع قوالب عناصر الواجهة.
4. اضعط CTRL+F و ابحث عن ]]></b:skin>
5. ألصق فوقها الكود التالي :

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

.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;
}
/*------نهاية عداد التعليقات------*/

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

1.  left : موضع الإضافة يسارا بالنسبة للعنوان يمكنك استبدالها بـ right لتكون على يمينه.
2. 48 : الأولى لعرض الأيقونة والثانية لارتفاعها.
3. رابط الأيقونة : من المهم إضافة أيقونة وإلا سيظهر عدد التعليقات فقط، استعمل أحد هذه النماذج :

اواواواواواو

او بامكانك البحث أكثر مع احترام الحجم الموصى به 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>

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

3- اضافه تدوينات ذات صله

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

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

1. لوحة التحكم > تصميم > تحرير HTML
2. قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.
3. وسع قوالب عناصر الواجهة.
4. اضعط CTRL+F و ابحث عن </head>
5. ألصق فوقها الكود التالي :

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

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

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

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

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

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

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

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

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

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

1. لوحة التحكم > تصميم > تحرير HTML
2. قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.
3. وسع قوالب عناصر الواجهة.
4. اضعط CTRL+F و ابحث عن <html
5. ألصق بعده الكود التالي :

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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 في الكود السابق.
الآن احفظ قالب مدونتك وهنيئا لك !

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

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

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

1. لوحة التحكم > تصميم > تحرير HTML
2. قم بتنزيل القالب تحسبا لأي مشكل قد يحصل فيما بعد.
3. وسع قوالب عناصر الواجهة.
4. اضعط CTRL+F و ابحث عن <head>
5. ألصق بعده الكود التالي :

<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'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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>

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

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