الطريقة الصحيحة لتركيب انظمة التعليقات في بلوجر
بسم الله الرحمن الرحيم
السلام عليكم , في هذا المقال يسعدني ان اقدم لكم الطريقة الصحيحة لتركيب انظمة التعليقات في مدونات بلوجر , بحيث يستطيع الزائر التعليق باي نظام شاء , سواءا كان نظام مدونات بلوجر الافتراضي او نظام تعليقات ديسكوس او نظما تعليقات الفيس بوك .
لمعاينة الاضافة " من هنا "
ملحوظة مهمة : تركيب اكثر من نظام تعليق على مدونتك يؤثر على سرعة تحميل القالب فانا لا انصح بهذه الامور وانما هي كمالية , فنظام تعليقات بلوجر يسمح لكل من يمتلك حساب في جوجل بالتعليق , وهو كافي .
الشرح
نتوجه الى لوحة التحكم في بلوجر ← القالب ← تحرير 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>
<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;}
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 + "_backlinks-container"'>
<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('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').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 = 'archer-1'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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 = 'archer-1'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
</div>
<!-- نهاية تعليقات Disqus -->
</div>
</div>
</b:includable>
<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 + "_backlinks-container"'>
<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('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ar_AR/all.js'
document.getElementById('fb-root').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 = 'archer-1'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[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 = 'archer-1'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[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'> , ثم نقوم بحفظ القالب وبذلك تكون قد انتهيت من تركيب ثلاثة انظمة للتعليقات في مدونتك .
🔗 رابط الموضوع الاصلي " مدونة ارشر " , و دمتم في حفظ الله ورعايته .