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

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

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

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

معاينة " من هنا "

الشرح 

 نتوجه الى لوحة تحكم بلوجر > القالب > تحرير 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> ونلصق فوقه الكود التالي :

/*Cnmu & Archer Multi Comments widget*/
#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;}

بعض الامور المهمة حول الكود السابق 

+ اذا قمت بحذف احد الانظمة قم بتغيير الرقم 33.3 الى الرقم 50 .
+ اذا اردت تغيير لون اطار صندوق التعليقات فغيير هذا الكود #9F3F3F الى كود اللون الذي تريده .
+ اذا ارت تغيير لون اطار علامات التبويب فغير هذا الكود #9F3F3F الى كود اللون الذي تريده .
+ الاكواد باللون الاصفر في اخر الكود هي اكواد الوان الخلفية الخاصة بعلامات التبويب عندما يتم الضغط عليها فغيرها بما تريد او اتركها كما هي .

بعد اضافة الكودين السابقين نبحث عن السطر <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 .
+ قم بتغيير عبارة " معرف فيسبوك " بمعرف تطبيق الفيسبوك الذي يمكنك الحصول عليه بالتوجه الى هذا الرابط " Content "  .

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

<b:includable id='threaded_comments' var='post'>

بعد ذلك نقوم بحفظ القالب , وبذلك تكون قد دمجت انظمة التعليقات في مدونتك بنجاح 😊 , واذا واجهتك اي مشكلة او لديك اي استفسار فانا في الخدمة 😇

موضوع طويل صح 😴

الحمد لله الذي بنعمته تتم الصالحات 😄

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

شارك المقال

شاركه على فيسبوكشاركه على جوجل+