11/08/2018

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





  1. مميزات الإظافة
  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: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> في الصورة أي أننا أسفله مباشرة نضع الكود التالي..

    
                  <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://3.bp.blogspot.com/-OPew1v1hjO4/VqpIpESmS7I/AAAAAAAAAvM/v3oxGsnBVd0/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 المحدد بهذا اللون هو من بين مميزات هذه الأداة فعند إخفاء نظام التعليقات من خلال إعدادات المنشور مثلا في صفحة الأرشيف أو إتصل بنا أو تدوينة معينة سيبقى زر إظهار التعليقات ظاهر لكن عند الضغط عليه سيعطيك رسالة مفادها [ التعليقات غير مسموحة هنا ] تستطيع تغيير نص الرسالة بمايناسبك من خلال هذا الإعداد... ولمعاينة ذلك قم بزيارة صفحة الأرشيف الخاصة بنا من هنا والتي نمنع فيها التعليقات.