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

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

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

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

الشرح

نتوجه الى لوحة التحكم في بلوجر القالب تحرير 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'> , ثم نقوم بحفظ القالب وبذلك تكون قد انتهيت من تركيب ثلاثة انظمة للتعليقات في مدونتك .

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



مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق