8/29/2017

settings_overscan print announcement


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



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

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

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

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

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

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

  • إبحث عن هذا الوسم<b:includable id='comments' var='post'>إحذفه من البداية حتى النهاية وضع مكانه كود HTML التالي ...

  • 
     <b:includable id='comments' var='post'>
                             <nav class='bloggcode_comtab'>
    <ul>
    <li class='comn-tab' id='blogcom' onclick='javascript:commentToggle(&quot;#comments&quot;);'>
    <b:if cond='data:post.allowComments'>
    <span class='comment-info'>
    <i class='fa fa-comments'/>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 0'>
    0 
    </b:if>
    <b:if cond='data:post.numComments == 1'>
    1 
    </b:if>
    <b:if cond='data:post.numComments &gt; 1'>
    <data:post.numComments/>
    </b:if>
    </a>
    </span></b:if>
     <h4>Blogger تعليقات
    </h4>
    </li>
    <li class='comn-tab off-comtab' id='disqcom' onclick='javascript:commentToggle(&quot;#disqcom&quot;);'>
    <span class='disqus-info'><i class='fa fa-comments'/><a expr:href='data:post.url + &quot;#disqus_thread&quot;'/></span>
    <h4>Disqus تعليقات
    </h4>
    </li>
    </ul>
    <div class='clear'/>
            <div class='comments com-page pageshow-active' id='comments' style='display:none;'>
                                <a name='comments'/>
                                <b:if cond='data:post.allowComments'>
                                  <h4>
                                    <b:if cond='data:post.numComments == 1'>
                                      1 
                                      <data:commentLabel/>
                                      :
                                      <b:else/>
                                      <data:post.numComments/>
                                      <data:commentLabelPlural/>
                                      :
                                    </b:if>
                                  </h4>
                                  <b:if cond='data:post.commentPagingRequired'>
                                    <span class='paging-control-container'>
                                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                                        <data:post.oldestLinkText/>
                                      </a>
                                      &#160;
                                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                                        <data:post.olderLinkText/>
                                      </a>
                                      &#160;
                                      <data:post.commentRangeText/>
                                      &#160;
                                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                                        <data:post.newerLinkText/>
                                      </a>
                                      &#160;
                                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                                        <data:post.newestLinkText/>
                                      </a>
                                    </span>
                                  </b:if>
                                  <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
                                    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
                                      <b:loop values='data:post.comments' var='comment'>
                                        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
                                          <b:if cond='data:comment.favicon'>
                                            <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                                          </b:if>
                                          <a expr:name='data:comment.anchorName'/>
                                          <b:if cond='data:blog.enabledCommentProfileImages'>
                                            <data:comment.authorAvatarImage/>
                                          </b:if>
                                          <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow'>
                                              <data:comment.author/>
                                            </a>
                                            <b:else/>
                                            <data:comment.author/>
                                          </b:if>
                                          <data:commentPostedByMsg/>
                                        </dt>
                                        <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
                                          <b:if cond='data:comment.isDeleted'>
                                            <span class='deleted-comment'>
                                              <data:comment.body/>
                                            </span>
                                            <b:else/>
                                            <p>
                                              <data:comment.body/>
                                            </p>
                                          </b:if>
                                        </dd>
                                        <dd class='comment-footer'>
                                          <span class='comment-timestamp'>
                                            <a expr:href='data:comment.url' title='comment permalink'>
                                              <data:comment.timestamp/>
                                            </a>
                                            <b:include data='comment' name='commentDeleteIcon'/>
                                          </span>
                                        </dd>
                                      </b:loop>
                                    </dl>
                                  </div>
                                  <b:if cond='data:post.commentPagingRequired'>
                                    <span class='paging-control-container'>
                                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                                        <data:post.oldestLinkText/>
                                      </a>
                                      <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                                        <data:post.olderLinkText/>
                                      </a>
                                      &#160;
                                      <data:post.commentRangeText/>
                                      &#160;
                                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                                        <data:post.newerLinkText/>
                                      </a>
                                      <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                                        <data:post.newestLinkText/>
                                      </a>
                                    </span>
                                  </b:if>
                                  <p class='comment-footer'>
                                    <b:if cond='data:post.embedCommentForm'>
                                      <b:if cond='data:post.allowNewComments'>
                                        <b:include data='post' name='comment-form'/>
                                        <b:else/>
                                        <data:post.noNewCommentsText/>
                                      </b:if>
                                      <b:else/>
                                      <b:if cond='data:post.allowComments'>
                                        <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                                          <data:postCommentMsg/>
                                        </a>
                                      </b:if>
                                    </b:if>
                                  </p>
                                </b:if>
                                <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:if cond='data:post.showBacklinks'>
                                      <b:include data='post' name='backlinks'/>
                                    </b:if>
                                  </div>
                                </div>
                              </div>
                              <div class='comments com-page pageshow-active' id='disqcom' style='display:none;'>
    <div id='disqus_thread'/>
    <noscript>الرجاء تمكين الجافا سكريبت لعرض <a href='https://disqus.com/?ref_noscript' rel='nofollow'>تعليقات مدعومة من ديسكس.</a></noscript>
    <div class='clear'/></div>
    </nav>
                            </b:includable>
    
    

  • إبحث عن هذا الوسم<b:includable id='threaded_comments' var='post'>إحذفه من البداية حتى النهاية وضع مكانه كود HTML التالي ...

  • 
     <b:includable id='threaded_comments' var='post'>
                            <nav class='bloggcode_comtab'>
    <ul>
    <li class='comn-tab' id='blogcom' onclick='javascript:commentToggle(&quot;#comments&quot;);'>
    <b:if cond='data:post.allowComments'>
    <span class='comment-info'>
    <i class='fa fa-comments'/>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 0'>
    0 
    </b:if>
    <b:if cond='data:post.numComments == 1'>
    1 
    </b:if>
    <b:if cond='data:post.numComments &gt; 1'>
    <data:post.numComments/>
    </b:if>
    </a>
    </span></b:if>
     <h4>Blogger تعليقات
    </h4>
    </li>
    <li class='comn-tab off-comtab' id='disqcom' onclick='javascript:commentToggle(&quot;#disqcom&quot;);'>
    <span class='disqus-info'><i class='fa fa-comments'/><a expr:href='data:post.url + &quot;#disqus_thread&quot;'/></span>
    <h4>Disqus تعليقات
    </h4>
    </li>
    </ul>
    <div class='clear'/>
                              <div class='comments com-page pageshow-active' id='comments' style='display:none;'>
                                <a name='comments'/>
                                <h4>
                                  <data:post.commentLabelFull/>
                                  :
                                </h4>
                                <div class='comments-content'>
                                  <b:if cond='data:post.embedCommentForm'>
                                    <b:include data='post' name='threaded_comment_js'/>
                                  </b:if>
                                  <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:if cond='data:post.showBacklinks'>
                                      <b:include data='post' name='backlinks'/>
                                    </b:if>
                                  </div>
                                </div>
                              </div>
                              <div class='comments com-page pageshow-active' id='disqcom' style='display:none;'>
    <div id='disqus_thread'/>
    <noscript>الرجاء تمكين الجافا سكريبت لعرض <a href='https://disqus.com/?ref_noscript' rel='nofollow'>تعليقات مدعومة من ديسكس.</a></noscript>
    <div class='clear'/></div>
    </nav>
                            </b:includable>
    
    

    ملاحظة مهمة
    عندما تجد الكود المطلوب قم بإغلاقه أو جمعه ثم حذفه ستجد بداية ونهاية الكود الأول والثاني متشابهان بهذا الشكل البداية تكون <b:includable والنهاية تكون </b:includable> وإليك هذه الصورة التوضيحية عن كيفية وضع كود الأول وكود الثاني
  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css

  • 
    
    
    /*=======comment + disqus======*/
    .bloggcode_comtab {overflow: hidden;position: relative;width: 100%;}
    .bloggcode_comtab li.comn-tab {cursor: pointer;float: right;text-align: center;width: 50%;padding: 10px 0;color: #FFF;text-transform: uppercase;font-size: 13px;user-select: none;direction: ltr;list-style: none;position: relative;overflow: hidden;}
    .bloggcode_comtab li.comn-tab:nth-child(1) {background: #F98903;}
    .bloggcode_comtab li.comn-tab:nth-child(2){background:#3498DB;}
    .bloggcode_comtab li.comn-tab h4 {margin: 0;font-size: 1.3em;font-weight: bolder;color: rgba(255, 254, 254, 0.51);font-family: inherit;}
    .disqus-info, .comment-info {position: relative;float: right;display: flex;align-items: center;justify-content: center;}
    .bloggcode_comtab li.comn-tab i {font-size: 5em;line-height: .5em;position: relative;color: rgba(255, 255, 255, 0.18);}
    .bloggcode_comtab .disqus-info a, .bloggcode_comtab .comment-info a {font-size: 1.5em;position: absolute;z-index: 1;color: #ffffff;top: 0;right: 0;width: 100%;height: auto;text-align: center;}
    @media screen and (max-width:640px) {
    .bloggcode_comtab li.comn-tab {font-size: 8px;}
    .bloggcode_comtab li.comn-tab i {font-size: 4em;line-height: .7em;}}/*Microsoft lumia550*/ 
     
    

    التعديل على كود.css
    الكود المحدد بهذا اللون خاص بلون زر بلوجر
    الكود المحدد بهذا اللون خاص بلون زر ديسكس
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js

  • 
    
    
    <!--show (n:) come disqus-->
    <script type='text/javascript'>
    //<![CDATA[
    var disqus_shortname = 'blogger-code';//Your name disqus
    !function(){var comdis=document.createElement("script");comdis.type="text/javascript",comdis.async=!0,comdis.src="//"+disqus_shortname+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(comdis)}();
        //tab coment disq
    function commentToggle(o){$(".comn-tab").addClass("off-comtab"),$(o).removeClass("off-comtab"),$(".com-page").hide(),$(o+".pageshow-active").show()};
    //]]>            
    </script>
    <script id="dsq-count-scr" src="//blogger-code.disqus.com/count.js" async='async'></script>
    <!--end disqus-->
     
    

    التعديل على كود.js
    الإسم blogger-code خاص بإسم المستخدم على Disqus قم بتغييره بالمعرف الخاص بك .. تجده مكرر مرتين
    ملاحظة أخيرة
    -عداد تعليقات ديسكس غالبا ما يأخذ وقت يصل لـ10 دقائق حتى يظهر عدد التعليقات وهذا المشكل من الموقع وليس خلل في الأكواد
    -اما بالنسبة لكلمة comments إذا ظهرت لك بجانب العداد فعليك الولوج إلى حسابك على disqus.com 
  1. الإعدادات
  2.  أدخل على Settings
  3.  ثم على الجانب Community 
  4. وأخيرا إحذف كلمة comments الموجودة داخل كل إطار وترك فقط الأعداد (ستأخذ بعد الوقت حتى تختفي!!) 


add_commentإرسال تعليق

إرسال تعليق