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

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

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

لمعاينة الاضافة " من هنا "

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

الشرح

نتوجه الى لوحة التحكم في بلوجر ← القالب ← تحرير 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 + "_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>


<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>

</div>
</div>
</b:includable>

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

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

🔗 رابط الموضوع الاصلي " مدونة ارشر " , و دمتم في حفظ الله ورعايته .

By glok

Similiar tagsبلوجر