الطريقة الصحيحة لتركيب انظمة التعليقات في بلوجر

بسم الله الرحمن الرحيم

السلام عليكم , في هذا المقال يسعدني ان اقدم لكم الطريقة الصحيحة لتركيب انظمة التعليقات في مدونات بلوجر , بحيث يستطيع الزائر التعليق باي نظام شاء , سواءا كان نظام مدونات بلوجر الافتراضي او نظام تعليقات ديسكوس او نظما تعليقات الفيس بوك .

ملحوظة مهمة :
تركيب اكثر من نظام تعليق على مدونتك يؤثر على سرعة تحميل القالب فانا لا انصح بهذه الامور وانما هي كمالية , فنظام تعليقات بلوجر يسمح لكل من يمتلك حساب في جوجل بالتعليق , وهو كافي .

الشرح

نتوجه الى لوحة التحكم في بلوجر القالب تحرير HTML ثم نضغط على Ctrl+f ونبحث عن الوسم <head/> ونلصق فوقه الكود التالي :

script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js”></script>
<script>
jQuery(document).ready(function($) {
$(“#tabs”).tabs();
});
</script>

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

#tabs {
background-color: #fff;
border:2px solid #9F3F3F;
border-radius:5px;
box-shadow: 0 0 0 1px #ddd inset;
margin: 0 0 20px;
padding: 0 0 10px;
}
.cnmu-multicomm {
background-color: #fff;
border-radius:0px;
border : 2px solid #9F3F3F;
-moz-box-shadow: 0 15px 10px -12px black; box-shadow: 0 15px 10px -12px black;  display: block;
height: 32px;
line-height: 32px !important;
list-style: outside none none;
margin: 0 0 10px !important;
overflow: hidden;
padding: 0 !important;
}
.cnmu-multicomm li {
float: right;
margin: 0 !important;
padding: 0 !important;
width: 33.3%;
}
.cnmu-multicomm li a {
color: #9F3F3F;
font-family: elmessiri-bold ;
display: block;
float: right;
height: 100%;
line-height: 32px;
text-align: center;
text-decoration: none;
width: 100%;
}
.ui-tabs-active.ui-state-active .blogger-comm {color: #fff;background-color: #fc5400;}
.ui-tabs-active.ui-state-active .fb-comm {color: #fff;background-color: #3f5c9a;}
.ui-tabs-active.ui-state-active .dis-comm {color: #fff;background-color: #229CFF;}

ثم نبحث عن السطر <b:includable id=’comments’ var=’post’> ونقوم بعمل توسعه له ونقوم بالتظليل من <b:includable id=’comments’ var=’post’> الى الوسم </b:includable> ونستبدل السطور المظللة بالكود التالي :

<b:includable id=’comments’ var=’post’>
<div id=’tabs’>
<ul class=’cnmu-multicomm’>
<li><a class=’blogger-comm’ href=’#tabs-1′>تعليقات بلوجر</a></li>
<li><a class=’fb-comm’ href=’#tabs-2′>تعليقات فيسبوك</a></li>
<li><a class=’dis-comm’ href=’#tabs-3′>Disqus تعليقات</a></li>
</ul>
<div style=’margin:0 10px;’>
<!– تعليقات بلوجر –>
<div id=’tabs-1′>
<div class=’comments’ id=’comments’>
<a name=’comments’/>
<h4><data:post.commentLabelFull/>:</h4>    <div class=’comments-content’>
<b:include cond=’data:post.embedCommentForm’ data=’post’ name=’threaded_comment_js’/>
<div id=’comment-holder’>
<data:post.commentHtml/>
</div>
</div>

<p class=’comment-footer’>
<b:if cond=’data:post.allowNewComments’>
<b:include data=’post’ name=’threaded-comment-form’/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>

<b:if cond=’data:showCmtPopup’>
<div id=’comment-popup’>
<iframe allowtransparency=’true’ frameborder=’0′ id=’comment-actions’ name=’comment-actions’ scrolling=’no’>
</iframe>
</div>
</b:if>

<div id=’backlinks-container’>
<div expr:id=’data:widget.instanceId + &quot;_backlinks-container&quot;’>
<b:include cond=’data:post.showBacklinks’ data=’post’ name=’backlinks’/>
</div>
</div>
</div>
</div><!– نهاية تعليقات بلوجر –>
<!– تعليقات فيس بوك –>
<div id=’tabs-2′>
<script src=’http://connect.facebook.net/ar_AR/all.js#xfbml=1’/>
<fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ migrated=’1′ width=’100%’/>
<div id=’fb-root’/>
<script>
window.fbAsyncInit = function() {
FB.init({xfbml: true, appId: معرف فيسبوك });
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/ar_AR/all.js&#39;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
</div>
<!– نهاية تعليقات فيس بوك –>
<!– تعليقات Disqus –>
<div id=’tabs-3′>
<div id=’disqus_thread’/>
<script type=’text/javascript’>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;archer-1&#39;; // required: replace example with your forum shortname

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href=’http://disqus.com/?ref_noscript’>comments powered by Disqus.</a></noscript>

<script type=’text/javascript’>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;archer-1&#39;; // required: replace example with your forum shortname

/* * * DON&#39;T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement(&#39;script&#39;); s.async = true;
s.type = &#39;text/javascript&#39;;
s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
(document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
}());
</script>
</div>
<!– نهاية تعليقات Disqus –>
</div>
</div>
</b:includable>

ونقوم باستبدال عبارة Archer-1 المكتوبة باللون الاحمر الى معرف حسابك في  Disqus .

بعد ذلك نقوم بالبحث عن السطر <b:includable id=’threaded_comments’ var=’post’> ونستبدله بالسطر التالي <b:includable id=’threaded_comments’ var=’post’> , ثم نقوم بحفظ القالب وبذلك تكون قد انتهيت من تركيب ثلاثة انظمة للتعليقات في مدونتك .