تركيب نظام تعليقات blogger-facebook-disqus إحترافي.

من أهم البرامج وأكثرها طلبا على منصة البلوجر هو تركيب نظام التعليقات المدمج الذي يتيح لنا التعبير عن أرائنا بإستخدام نظام تعليقات بلوجر أو ديسكس أو فايسبوك .

حول الإظافة

المميز في الإظافة ميزة إخفاء الصناديق ولايتم إظهارها إلا بعد الضغط على زر - إظهار التعليقات -  والجميل أنه في تلك النقرة يتم حقن روابط المكون الإظافي الخاص بديسكس و فايسبوك وهذا مايجعله يخفف الضغط على القالب أثناء التحميل.
أضف أنه يمكنك تخصيص الأداة فقط من صفحة التخطيط مثلا يمكنك التبديل بين موضع كل نظام أو إخفاء أحدها لاتحتاجه.

مميزات الإظافة

1. قائمة مميزات الإصدار v1.0.0
2. - ثلاث أنظمة للتعليق blogger-facebook-disqus مع توفر إمكانية التبديل بينهم أو إخفاء أحدها.
3. - تخصيص كامل من صفحة التخطيط
4. - سريع ومتجاوب مع جميع المتصفحات الحديثة والشاشات الصغيرة.
5. - خاصية إظهار التعليقات بالتزامن
6. - شكل أنيق مع توفر ثلاث ألوان رئيسية  للزر المسؤول عن - إظهار التعليقات 

معاينة الإظافة

معاينة

تركيب الإظافة

تنبيه:

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

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

• قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
• إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
• إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
• بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

• قم بالبحث عن هذا العنصر <b:includable id='comment_picker' var='post'> ثم إستبدل كامل الحاوية بكود html التالي..
  
  
  

  
                  <b:includable id='comment_picker' var='post'>
        <b:if cond='data:post.allowNewComments'>
          <script>var allowComment=true;</script>
          <b:else/>
          <script>var allowComment=false;</script>
        </b:if>
        <b:if cond='data:post.commentSource == 1'>
        <b:include data='post' name='iframe_comments'/> 
        <b:elseif cond='data:post.showThreadedComments'/>
        <b:include data='post' name='threaded_comments'/> 
        <b:else/>
        <b:include data='post' name='comments'/>
        </b:if>
                </b:includable>
  

  
  
• قم بالبحث عن هذا المعرف Blog1 من خلال قائمة الأداة أو إبحث عن هذا العنوان رسائل المدونة الإلكترونية ثم أسفل الحاوية مباشرة أضف كود html التالي..

  ملاحظة:

  الكود الذي نبحث عنه هو عبارة عن أداة رسائل المدونة ستجد بدايته في الغالب هكذا <b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog' version ونهايته وسم الإغلاق </b:widget> كما في الصورة الأتية
  

  
                <b:widget id='LinkList987' locked='true' mobile='yes' title='blogger-facebook-disqus' type='LinkList' version='1'>
                  <b:widget-settings>
                    <b:widget-setting name='link-3'>التعليقات غير مسموحة هنا</b:widget-setting>
                    <b:widget-setting name='sorting'>NONE</b:widget-setting>
                    <b:widget-setting name='text-1'>facebook</b:widget-setting>
                    <b:widget-setting name='link-1'>ضع معرف الفايسبوك هنا</b:widget-setting>
                    <b:widget-setting name='text-0'>disqus</b:widget-setting>
                    <b:widget-setting name='link-2'>orange</b:widget-setting>
                    <b:widget-setting name='text-3'>Not-comments</b:widget-setting>
                    <b:widget-setting name='link-0'>ضع معرف ديسكس هنا</b:widget-setting>
                    <b:widget-setting name='text-2'>skin</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
          <script typp='text/javascript'>
          var blogLocale = &quot;<data:blog.locale/>&quot;;
          Settingscom={
            <b:loop values='data:links' var='link'>&quot;<data:link.name/>&quot; : &quot;<data:link.target/>&quot;,
            </b:loop>
          }      
        </script>
  <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
  <div class='threaded-comments-wrapper'>
  <button class='btn-skin' id='commentsshow' onclick='load_Comments()'>
  إظهار التعليقات
  </button>
  <div id='Tabcom_gr' style='display: none;'><b:if cond='data:title == &quot;blogger&quot;'><div class='c-icons'><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='blogger'/></div><b:elseif cond='data:title == &quot;facebook&quot;'/><div class='c-icons'><span class='fbc' data-id='fbc'/></div><div class='c-container'><b:include name='facebook'/></div><b:elseif cond='data:title == &quot;disqus&quot;'/><div class='c-icons'><span class='dsq' data-id='dsq'/></div><div class='c-container'><b:include name='disqus'/></div><b:elseif cond='data:title == &quot;blogger-facebook-disqus&quot;'/><div class='c-icons'><span class='blo' data-id='blo'/><span class='fbc' data-id='fbc'/><span class='dsq' data-id='dsq'/></div><div class='c-container'><b:include name='blogger'/><b:include name='facebook'/> <b:include name='disqus'/></div><b:elseif cond='data:title == &quot;blogger-disqus-facebook&quot;'/><div class='c-icons'><span class='blo' data-id='blo'/><span class='dsq' data-id='dsq'/><span class='fbc' data-id='fbc'/></div><div class='c-container'><b:include name='blogger'/><b:include name='disqus'/> <b:include name='facebook'/></div><b:elseif cond='data:title == &quot;facebook-blogger-disqus&quot;'/><div class='c-icons'><span class='fbc' data-id='fbc'/><span class='blo' data-id='blo'/><span class='dsq' data-id='dsq'/></div><div class='c-container'><b:include name='facebook'/><b:include name='blogger'/> <b:include name='disqus'/></div><b:elseif cond='data:title == &quot;facebook-disqus-blogger&quot;'/><div class='c-icons'><span class='fbc' data-id='fbc'/><span class='dsq' data-id='dsq'/><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='facebook'/><b:include name='disqus'/> <b:include name='blogger'/></div><b:elseif cond='data:title == &quot;disqus-facebook-blogger&quot;'/><div class='c-icons'><span class='dsq' data-id='dsq'/><span class='fbc' data-id='fbc'/><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='disqus'/><b:include name='facebook'/> <b:include name='blogger'/></div><b:elseif cond='data:title == &quot;disqus-blogger-facebook&quot;'/><div class='c-icons'><span class='dsq' data-id='dsq'/><span class='blo' data-id='blo'/><span class='fbc' data-id='fbc'/></div><div class='c-container'><b:include name='disqus'/><b:include name='blogger'/> <b:include name='facebook'/></div><b:elseif cond='data:title == &quot;blogger-facebook&quot;'/><div class='c-icons'><span class='blo' data-id='blo'/><span class='fbc' data-id='fbc'/></div><div class='c-container'><b:include name='blogger'/><b:include name='facebook'/></div><b:elseif cond='data:title == &quot;blogger-disqus&quot;'/><div class='c-icons'><span class='blo' data-id='blo'/><span class='dsq' data-id='dsq'/></div><div class='c-container'><b:include name='blogger'/><b:include name='disqus'/></div><b:elseif cond='data:title == &quot;facebook-blogger&quot;'/><div class='c-icons'><span class='fbc' data-id='fbc'/><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='facebook'/><b:include name='blogger'/></div><b:elseif cond='data:title == &quot;facebook-disqus&quot;'/><div class='c-icons'><span class='fbc' data-id='fbc'/><span class='dsq' data-id='dsq'/></div><div class='c-container'><b:include name='facebook'/><b:include name='disqus'/></div><b:elseif cond='data:title == &quot;disqus-blogger&quot;'/><div class='c-icons'><span class='dsq' data-id='dsq'/><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='disqus'/><b:include name='blogger'/></div><b:elseif cond='data:title == &quot;disqus-facebook&quot;'/><div class='c-icons'><span class='dsq' data-id='dsq'/><span class='fbc' data-id='fbc'/></div><div class='c-container'><b:include name='disqus'/><b:include name='facebook'/></div><b:elseif cond='data:title == &quot;&quot;'/><div class='c-icons'><span class='blo' data-id='blo'/></div><div class='c-container'><b:include name='blogger'/></div><b:elseif cond='data:title == &quot;no&quot;'/><div/></b:if></div>
  </div>
            <script type='text/javascript'>
              /*<![CDATA[*/
  /*---Settings---*/
  eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 x=9 0!==2["k"]?2["k"]:"11",y=9 0!==2["l-a"]?2["l-a"]:"التعليقات غير مسموحة هنا",z=9 0!==2["b"]?2["b"]:"‏",A=9 0!==2["m"]?2["m"]:"";5 B=3.13("C-k")[0];B.D("E","C-14-"+x);n 15(){5 e=$("#16");e.17().18();5 T=$("#19");T.1a();!n(){F?($(".d-1b:G").6("d-o"),$(".c-H I:G").6("q-r"),$(".c-H I").1c(n(){$(J).6("q-r").K().g("q-r");$("#"+$(J).s("t-h")).6("d-o").K().g("d-o")})):$("#1d").1e(\'<p E="l-a 1f">\'+y+\'</p>\');0<$(".L").1g?($(".u").g("u").6("i").s("t-h","i"),$("#u").g("M-v").6("1h-v").s("h","i"),$("#i").N($(".L"))):$(".M-v").N($("#a"));1i(F){5 e=3.O("P");e.Q="R/S",e.U=!0,e.V="1j://"+A+".m.1k/1l.W",e.D(\'t-1m\',+1n 1o()),(3.j("X")[0]||3.j("Y")[0]).Z(e);1p(w){8"10":4=\'1q\';7;8"10-1r":4=\'1s\';7;8"1t-1u":4=\'1v\';7;8"1w":4=\'1x\';7;8"1y":4=\'1z\';7;1A:4=w+"1B"+w.1C();7}5 f=3.O("P");f.Q="R/S",f.U=!0,f.V="//1D.b.1E/"+4+"/1F.W#1G=1&1H=1I.12&1J="+z,f.h=\'b-1K\',(3.j("X")[0]||3.j("Y")[0]).Z(f)}}()}',62,109,'||Settingscom|document|fb_loca|var|addClass|break|case|void|comments|facebook||tab|||removeClass|id|plus|getElementsByTagName|skin|Not|disqus|function|active||ico|act|attr|data|blo|Comments|blogLocale|btn_Skin|Not_comments|fac_id|Dis_id|btn_Showcomments|btn|setAttribute|class|allowComment|first|icons|span|this|siblings|cmt_iframe_holder|Blogger|append|createElement|script|type|text|javascript||async|src|js|head|body|appendChild|en|orange||getElementsByClassName|Showcomments|load_Comments|commentsshow|fadeOut|remove|Tabcom_gr|fadeIn|cont|click|LinkList987|html|radius5|length|Gplus|if|https|com|embed|timestamp|new|Date|switch|en_US|GB|en_GB|pt|PT|pt_PT|da|da_DK|he|he_il|default|_|toUpperCase|connect|net|sdk|xfbml|version|v2|appId|jssdk'.split('|'),0,{}))
              /*]]>*/
             </script>
  </b:if>
  
      </b:includable>
                  <b:includable id='blogger'>
                    <div class='Blogger-Comments tab-cont' id='blo'/>
                  </b:includable>
                  <b:includable id='disqus'>
                    <div class='Disqus-Comments tab-cont' id='dsq'>
                     <div id='disqus_thread'/>
                    </div>
                      <noscript>Please enable JavaScript to view the <a href='https://disqus.com/?ref_noscript' rel='nofollow'>comments powered by Disqus.</a></noscript>
                </b:includable>
                  <b:includable id='facebook'>
                    <div class='Facebook-Comments tab-cont' id='fbc'>
                     <div class='fb-comments' data-numposts='5' data-width='100%' expr:data-href='data:blog.url'/>
                    </div>
            <div id='fb-root'/>
               </b:includable>
                </b:widget>
  

  
  
• قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css التالي..
  

  
   /*----comments  [blogger-facebook-disqus]-----*/
  div#Blog1 div#comments{display:none;}
  .threaded-comments-wrapper{background:white;position:relative;overflow:hidden;display:block;width:100%;padding:20px 8px;margin-bottom:30px;clear:both;}
  button#commentsshow{color:white;cursor:pointer;width:100%;display:block;padding:10px 16px;font-size:17px;line-height:1.3;outline:0;outline-offset:0;border:0;border:0 solid transparent;font-family:inherit;font-weight:400;letter-spacing:inherit;}
  p.Not-comments{position:relative;padding:10px;margin:10px auto;text-align:center;font-size:14px;font-weight:bold;color:#d2d2d2;background:#f5f5f5;display:block;}
  .c-icons{width:100%;display:block;position:relative;padding:0;margin-bottom:20px;}
  .c-container{position:relative;overflow:hidden;display:block;clear:both;padding:0;}
  .c-icons span{margin:0 5px;cursor:pointer;text-align:center;width:25%;width:-webkit-calc(100% / 7);width:calc(100% / 7);height:30px;padding:0;text-transform:uppercase;list-style:none;position:relative;overflow:hidden;display:inline-block;vertical-align:top;background:#eaeaea url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiox4DoikKw6cmbDzCHO2epecgYiHCDw97jmK3Cg-NRv6g2ubOtlKatnkDVVGZCaiRBvGURLJRhOJ93b7G6aeddxjwkV6vk8jMeSs8cStv_RGLKDRokfRC5vXmtdSL25BQN5F0E-n9yCDNy/s1600-r/comments.png) no-repeat;-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;}
  .tab-cont{display:none;}
  .tab-active{display:block;}
  .ico-act.blo{background-color:#FFA611!important;}
  .blo{background-position:center -36px!important;}
  .ico-act.fbc{background-color:#5176C5!important;}
  .fbc{background-position:center -2px!important;}
  .ico-act.dsq{background-color:#656C7B!important;}
  .dsq{background-position:center -70px!important;}
  .plus{background-position:center -104px!important;}
  .ico-act.plus{background-color:#DD4E42!important;}
  iframe#comment-editor{height:300px;max-height:300px;width:100%;}
  .cmt_iframe_holder,.cmt_iframe_holder iframe{width:100%!important;display:block!important;}
  div#disqus_thread iframe{height:auto!important;}
  /*------border radius-------*/
  button#commentsshow,p.Not-comments{border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
  /*------box shadow-------*/
  button#commentsshow{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16);-o-box-shadow:0 6px 15px rgba(0,0,0,0.16);box-shadow:0 6px 15px rgba(0,0,0,0.16);}
  button#commentsshow:hover,.c-icons span:hover{-webkit-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-moz-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-ms-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);-o-box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);outline:0;}
  /*linear-gradient*/
  .btn-Showcomments-orange{background:#ffa610;background:-webkit-linear-gradient(50deg,#ffc410,#ffa610);background:-moz-linear-gradient(50deg,#ffc410,#ffa610);background:-ms-linear-gradient(50deg,#ffc410,#ffa610);background:-o-linear-gradient(50deg,#ffc410,#ffa610);background:linear-gradient(40deg,#ffc410,#ffa610);}
  .btn-Showcomments-blue{background:#1fffac;background:-webkit-linear-gradient(50deg,#1fffac,#3aa2ff);background:-moz-linear-gradient(50deg,#1fffac,#3aa2ff);background:-ms-linear-gradient(50deg,#1fffac,#3aa2ff);background:-o-linear-gradient(50deg,#1fffac,#3aa2ff);background:linear-gradient(40deg,#1fffac,#3aa2ff);}
  .btn-Showcomments-red{background:#fcb615;background:#1fffac;background:-webkit-linear-gradient(50deg,#754597,#ff4848);background:-moz-linear-gradient(50deg,#754597,#ff4848);background:-ms-linear-gradient(50deg,#754597,#ff4848);background:-o-linear-gradient(50deg,#754597,#ff4848);background:linear-gradient(40deg,#754597,#ff4848);}
  /*------error btn-------*/
  #postCommentSubmit{background-color:#ffa610;border:1px solid #ffa610;color:#fff;font-weight:bold;margin:0 0 6px 8px;}
  /* Responsive */
  @media screen and (max-width:768px){.c-icons span{width:25%;width:-webkit-calc(100% / 4);width:calc(100% / 4);}}
  /*ipad + ipad mini------*/
  @media screen and (max-width:320px){.c-icons span{margin:0;width:33.3333%;width:-webkit-calc(100% / 3);width:calc(100% / 3);}}
  /* iphon 4/5 + nok lumia 520 */
  

  
  

قم الآن بحفظ التعديلات وتوجه إلى صفحة التخطيط قم بتحديث الصفحة وستلاحظ ظهور أداة جديدة بإسم blogger-facebook-disqus ستجدها مباشرة أسفل أداة رسائل المدونة الإلكترونية .. ماتقوم به هو تحريرها لتظهر لك الإعدادات كما في الصورة التالية ثم إتبع التعليمات في الأسفل.

التعديل على الأداة

العنوان blogger-facebook-disqus المحدد بهذا اللون من خلاله نستطيع التحكم في ترتيب أو عرض كل نظام كالآتي..
1- إذا غيرنا الترتيب سيظهر كل صندوق على حسب الموضع الذي نختاره مثلا نريد وضع فايسبوك في المقدمة سنجعل العنوان هكذا facebook-blogger-disqus
2- إذا أردنا حذف نظام تعليقات معين يكفي أن نحذف إسمه مثلا نريد حذف ديسكس سنجعل العنوان هكذا blogger-facebook

الإسم disqus المحدد بهذا اللون نقوم بالضغط على تعديل ثم نضع معرف ديسكس الخاص بنا مكان الرابط لتشغيل نظام التعليقات ديسكس ولاتنسى الضغط على حفظ.

الإسم facebook المحدد بهذا اللون نفس العملية لتشغيل نظام التعليقات فيسبوك نقوم بوضع معرف التطبيق الخاص بنا مكان الرابط ولاتنسى الضغط على حفظ.

الإسم skin المحدد بهذا اللون خاص بتغيير لون زر إظهار التعليقات ليتماشى مع لون القالب نقوم بالضغط على تعديل ثم نضع أحد الأسماء التالية
لجعل الزر برتقالي متدرج نضع الإسم orange
لجعل الزر أزرق متدرج نضع الإسم blue
لجعل الزر أحمر متدرج نضع الإسم red

الإسم Not-comments المحدد بهذا اللون هو من بين مميزات هذه الأداة فعند إخفاء نظام التعليقات من خلال إعدادات المنشور مثلا في صفحة الأرشيف أو إتصل بنا أو تدوينة معينة سيبقى زر إظهار التعليقات ظاهر لكن عند الضغط عليه سيعطيك رسالة مفادها [ التعليقات غير مسموحة هنا ] تستطيع تغيير نص الرسالة بمايناسبك من خلال هذا الإعداد.