الجمعة، 22 يوليو 2016


دمج ثلاث أنظمة التعليقات بلوجر فيسبوك Disqus






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

اهم ميزات دمج ثلاث انظمة التعليقات

1. تتيح لزائر مدونتك اختيار النظام الذي يفضل التعليق عليه والذي يراه سهل ولا يجد به اي صعوبه .
2. زيادة نسبة التعليقات على مواضيع مدونتك .
3. خفيفه في تصفح وليس ثقيل على القالب .
4. كسب باك لينكس قوي عند تعليق الزوار في اكثر من نظام على مواضيع مدونتك .
. . . الخ
طريقة التركيب
1. قم بتحرير قالب مدونتك وأبحث عن هذه الوسم </head> واضف الكود التالي فوقه/قبله

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/*<![CDATA[*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
#comments2{clear:both;padding:10px 0;margin-top:0;font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}

#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd;font-family: 'Noto Sans Kufi Arabic', sans-serif!important;}

#comment_block{padding-top:25px}

.comment_header{margin-right:5px}

.comment_avatar{height:48px;width:48px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NQ13AB3NONrh4Ug55ixUbJYFko1Y6x431aNo3F-b0mpL2CK9auXebemM4WVjN8XKSeMTlCS_1vt6-SYFVAEfPeAmjgcBMJBj9J_u9mlOm-ZEGqmnYoymnEoDxAWny_MmXOi603SkalQ/s48/anon48.gif) center center no-repeat #F0F0F0;float:right;margin-top:-1px;margin-right:-5px;margin-left:10px;overflow:hidden;border-radius:3px!important;}

.comment_admin .comment_author_flag,.comment_reply,a.comment-delete{border-radius:3px!important;text-decoration:none}

.comment_name{line-height:19.5px;display:inline-block;text-decoration:none;position:relative;margin-top:-3px;right: 18px;}

.comment_name a{text-decoration:none;font-weight:500}

.comment_name a:hover{color:#0088b2;text-decoration:none}

.comment_service{margin-right:10px;margin-top:2px;position:relative;line-height:1em}

.comment_body p{font-size:16px;color:#444;line-height:1.3em;font-weight:300;margin:5px 0}

.comment_body p img{vertical-align:middle}

.comment_body{margin:-12px 70px 10px 47px;padding:0 10px 10px;position:relative;z-index:1}

.comment_date{color:#999;font-style:italic;font-size:11px;line-height:1.2em;cursor:pointer;font-weight:400;margin-right:20px}

.comment-set{margin-bottom:30px}

.comment_child .comment_body{margin-top:-5px;margin-bottom:10px;margin-left:39px}

.comment_child .comment_wrap{padding-right:50px}

.comment_reply{cursor:pointer;color:#fff!important;font-size:12px;font-weight:500;margin-top:5px;margin-left:10px;padding:3px 5px;float:right;background:#29b6f6;border-radius: 3px!important;direction: ltr;}

.comment_reply:hover,a.comment-delete:hover{text-decoration:none;background:#333!important}

.unneeded-paging-control{display:none}

.comment_reply_form{padding:0 0 0 48px}

.comment_reply_form .comment-form{width:100%}

.comment_reply,.comment_service a{display:inline-block}

.comment_avatar *{max-width:1000%!important;display:block;max-height:1000%!important;width:48px!important;height:48px!important;margin-left:10px}

.comment-form,.comment_img,.comment_youtube{max-width:100%!important}

.comment_child .comment_avatar,.comment_child .comment_avatar *{width:40px!important;height:40px!important;float:right;margin-left:10px}

.comment_form{margin-top:-20px}

.comment_form a{color:#444;text-decoration:none;font-size:16px;font-weight:700}

.comment_form a:hover{color:#fff}

.comment_author_flag{display:none}

.comment_admin .comment_author_flag{background-color:rgba(34,59,74,.3);display:inline-block;color:#fff;font-family:arial;font-size:10px;font-weight:700;padding:2px 5px;line-height:1em;position:absolute;top:2px;left:-51px}

a.comment-delete{color:#fff!important;font-size:12px;font-weight:500;margin:5px 0 0;padding:3px 5px;float:right;background:#e91e63;border-radius:3px!important;}

#comment-editor{width:100%!important;background:url(data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7) 50% 30% no-repeat #fff;margin-top:10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.blogger-box,.comment-form p,.disqus-box,.facebook-box{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}

.comment-form{margin-top:25px!important}

.comment_emo_list .item{float:left;text-align:center;height:40px;width:41px;margin:10px 0 0}

.comment_emo_list span{display:block;font-weight:400;font-size:11px;letter-spacing:1px;color:#444}

.comment_youtube{width:400px;height:225px;display:block;margin:auto}

.comment-form p{background:#666;padding:10px 10px 5px;margin:5px 0;color:#eee;font-weight:300;font-family:'Noto Sans Kufi Arabic', sans-serif!important;line-height:1.3em;width:100%;border-radius:3px!important;position:relative;box-sizing:border-box}

.comment-form p:after{content:"";width:0;height:0;position:absolute;bottom:-15px;left:15px;border:8px solid transparent;border-color:#666 transparent transparent}

.deleted-comment{display:block;color:#efefef;font:italic 13px Arial;margin-top:-10px;background:#DB6161;padding:10px}

.blogger-bar,.comment-text,.disqus-bar,.facebook-bar{font-family:'Noto Sans Kufi Arabic', sans-serif;font-weight:500;color:#555}

iframe.blogger-iframe-colorize{max-height:250px}

.small-button a{color:#f1f1f1!important}

.small-button a:hover{color:#fff!important}

.blogger-bar,.disqus-bar,.facebook-bar{display:inline;float:left;padding:5px 10px;cursor:pointer;background:#eee;direction: ltr;}

.blogger-bar,.disqus-bar{margin-left:5px;margin-top:20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}

.facebook-bar{margin-left: 5px; margin-top: 20px;border-radius:3px 3px 0 0;border:1px solid #ddd;border-bottom:none}

.blogger-box,.disqus-box,.facebook-box{width:100%;padding:0;border-top:1px solid #ddd;box-sizing:border-box}

.blogger-box,.facebook-box{display:none}

.fb-comments,.fb_iframe_widget iframe,.fb_iframe_widget span{width:100%!important}

.fb-comments{padding:0!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}

.comment-text{display:inline;float:right;padding:5px 10px 5px 0;margin-top:20px}

.comment-text:after{content:'\f060';font-family:FontAwesome;color:#555;margin-right:5px}

/*]]>*/

</style>

</b:if>

2 . الان سوف نقوم بالبحث عن الاكواد التاليه

< b:includable  id = 'comment-form'  var = 'post' >... </ b:includable > 

< b:includable  id = 'commentDeleteIcon'  var = 'comment' > ... </ b:includable > 

< b:includable  id = 'comment_count_picker'  var = 'post' > ... </ b:includable > 

< b:includable  id = 'comment_picker'  var = 'post' > ... </ b:includable > 

< b:includable  id = 'comments'  var = 'post' > ... </ b:includable >
حددهم كما في الصوره وقم بحذفهم



الان ضع مكانهم الكود التالي
    <b:includable id='comment-form' var='post'>
  <div class='comment-form'>

    <b:if cond='data:mobile'>

      <h4 id='comment-post-message'>

        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' expr:title='data:postCommentMsg' href='javascript:void(0)'><data:postCommentMsg/></a></h4>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

    <b:else/>

      <h4 id='comment-post-message'><data:postCommentMsg/></h4>

<div id='threaded-comment-form'>

<p>رجاء&#1611; سيتم إزالة التعليقات التي تحتوي على روابط خارج الموضوع . 
<span class='small-button'>

<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>

</span>

  </p>

<div id='emo-box' style='display:none'>

  <div class='comment_emo_list'/>

</div>

      <data:blogTeamBlogMessage/>

              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

      </div>

    </b:if>

    <data:post.friendConnectJs/>

    <data:post.cmtfpIframe/>

    <script type='text/javascript'>

      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);

    </script>

  </div>

</b:includable>
    <b:includable id='commentDeleteIcon' var='comment'>

  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>

    <b:if cond='data:showCmtPopup'>

      <div class='goog-toggle-button'>

        <div class='goog-inline-block comment-action-icon'/>

      </div>

    <b:else/>

      <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' title='delete comment'><i class='fa fa-trash'/></a>

    </b:if>

  </span>

</b:includable>
    <b:includable id='comment_count_picker' var='post'>

  <b:if cond='data:post.forceIframeComments'>

    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>

    </span>

  <b:else/>

    <b:if cond='data:post.commentSource == 1'>

      <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'>

      </span>

    <b:else/>

      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

        <data:post.commentLabelFull/>:

      </a>

    </b:if>

  </b:if>

</b:includable>
    <b:includable id='comment_picker' var='post'>

  <b:if cond='data:post.forceIframeComments'>

    <b:include data='post' name='iframe_comments'/>

    <b:if cond='data:post.showThreadedComments'>

      <b:include data='post' name='comments'/>

    <b:else/>

      <b:include data='post' name='comments'/>

    </b:if>

  <b:else/>

    <b:if cond='data:post.commentSource == 1'>

      <b:include data='post' name='iframe_comments'/>

    <b:else/>

      <b:if cond='data:post.showThreadedComments'>

        <b:include data='post' name='comments'/>

      <b:else/>

        <b:include data='post' name='comments'/>

      </b:if>

    </b:if>

  </b:if>

</b:includable>
    <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='facebook-bar commentbtn' onclick='toggleVisibility(&apos;facebook-box&apos;)'>

Facebook تعليقات

</div>

<div class='blogger-bar commentbtn' onclick='toggleVisibility(&apos;blogger-box&apos;)'>

Blogger تعليقات

</div>

<div class='disqus-bar commentbtn btncurrent' onclick='toggleVisibility(&apos;disqus-box&apos;)'>

Disqus تعليقات

</div>

<div class='comment-text'>

اختر نظام التعليقات الذي تفضله

</div>

<div class='clear'>

</div>

<div class='disqus-box' id='disqus-box'>

<div class='comments' id='comments'>

<b:include data='post' name='disqus-comment'/>

</div>

</div>

<div class='blogger-box' id='blogger-box'>

<div class='comments' id='comments2'>

        <b:if cond='data:post.allowComments'>

         <h3 id='total-comments'><data:post.commentLabelFull/></h3>             

         <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 class='clear'/>

         <div id='comment_block'>

          <b:loop values='data:post.comments' var='comment'>

           <div class='data:comment.adminClass comment-set' data-level='0' expr:id='data:comment.anchorName'>

            <b:if cond='data:post.adminClass == data:comment.adminClass'>

             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;

            <b:else/>

             &lt;div class=&#39;comment_inner&#39;&gt;

            </b:if>

             <div class='comment_area'>

             <div class='comment_header'>

             <div class='comment_avatar'>

      <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>

              </div>

              <div class='comment_name'>

               <b:if cond='data:comment.authorUrl'>

                <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>

               <b:else/>

                <data:comment.author/>

               </b:if>

               <b:if cond='data:comment.author == data:post.author'>

                  <span class='comment_author_flag'>االمشرف</span>

               </b:if>

              </div>           

              <div class='comment_service'>

               <a expr:href='data:comment.url' rel='nofollow' title='permalink'><span class='comment_date'><data:comment.timestamp/></span></a>            

              </div>

              <div class='clear'/>

             </div>

             <div class='comment_body'>

              <b:if cond='data:comment.isDeleted'>

               <span class='deleted-comment'><data:comment.body/></span>

              <b:else/>

               <p><data:comment.body/></p>

<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='رد'><i class='fa fa-reply'/> رد </a>            

               <a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'><i class='fa fa-trash'/></a>                                               <div class='clear'/>                                        

              </b:if>                                      

             </div>

              <div class='clear'/>

            &lt;/div&gt;

            <div class='clear'/>

            </div>

            <div class='comment_child'/>

            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>             

           </div>

          </b:loop>             

         </div>   

         <div class='clear'/>

         <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 class='clear'/>

         <div class='comment_form' id='comment-form'>        

        

          <b:if cond='data:post.embedCommentForm'>

           <b:if cond='data:post.allowNewComments'>                                                       

            <b:include data='post' name='threaded-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>

         </div>

        </b:if>

       </div>            

       <script type='text/javascript'>

       //<![CDATA[

       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}

       //]]>

       </script>    

       <script type='text/javascript'>     

         <b:if cond='data:post.numComments != 0'>

         var Items = <data:post.commentJso/>;

         var Msgs = <data:post.commentMsgs/>;

         var Config = <data:post.commentConfig/>;

        <b:else/>

         var Items = {};

         var Msgs = {};

         var Config = {&quot;maxThreadDepth&quot;:&quot;0&quot;};

        </b:if>

       //<![CDATA[

function downloadJSAtOnload2(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/comment-hack.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload2,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload2):window.onload=downloadJSAtOnload2;      //]]>

         </script>

</div>

<div class='facebook-box' id='facebook-box'>

<div class='comments-fb'>

<b:include data='post' name='fb-comments'/>

</div>

</div>

</b:if>

</b:includable>
    <b:includable id='disqus-comment' var='post'>

            <script type='text/javascript'>

                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

                if (!disqus_blogger_current_url.length) {

                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;

                }

                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;

                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;

            </script>

            </b:includable>
    <b:includable id='fb-comments' var='post'>

            <div class='fb-comments' data-colorscheme='light' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>

            </b:includable>

3.  فم بالبحث عن الكود التالي وقم بتحديده كما بالصوره التاليه


لان قم بحذفها وضع مكانه الكود التالي

    <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>

<div id='form-wrapper'>

    <b:if cond='data:mobile'>

      <p><data:blogCommentMessage/></p>

      <data:blogTeamBlogMessage/>

              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

    <b:else/>

<div id='threaded-comment-form'>

      <p><data:blogCommentMessage/>

<span class='small-button'>

<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'><i class='fa fa-smile-o'/></a></span><span id='hide-emo' style='display:none'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'><i class='fa fa-smile-o'/></a></span>

</span>

  </p>

<div id='emo-box' style='display:none'>

  <div class='comment_emo_list'/>

</div>

      <data:blogTeamBlogMessage/>

              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;https://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='250' id='comment-editor' name='comment-editor'/>

        </b:if>

      </div>

    </b:if>

</div>

    <data:post.friendConnectJs/>

    <data:post.cmtfpIframe/>

    <script type='text/javascript'>

      BLOG_CMT_createIframe(&quot;<data:post.appRpcRelayPath/>&quot;, &quot;<data:post.communityId/>&quot;);

    </script>

  </div>

</b:includable>
    <b:includable id='threaded_comment_js' var='post'>

  <script type='text/javascript'>

    (function() {

      var items = <data:post.commentJso/>;

      var msgs = <data:post.commentMsgs/>;

      var config = <data:post.commentConfig/>;

       //<![CDATA[

function downloadJSAtOnload3(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload3,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload3):window.onload=downloadJSAtOnload3;      //]]>

  </script>

</b:includable>

4. ابحث عن هذه الوسم </body> وضع الكود التالي قبله/فوقه

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='fb-root'/>

<script type='text/javascript'>

//<![CDATA[

  var disqus_shortname="qaisi1web";

var disqus_url = disqus_blogger_current_url;



(function () {

    "use strict";

    var get_comment_block = function () {

        var block = document.getElementById('comments');

        if (!block) {

            block = document.getElementById('disqus-blogger-comment-block');

        }

        return block;

    };

    var comment_block = get_comment_block();

    if (!!comment_block) {

        var disqus_div = document.createElement('div');

        disqus_div.id = 'disqus_thread';

        comment_block.innerHTML = '';

        comment_block.appendChild(disqus_div);

        comment_block.style.display = 'block';

        var dsq = document.createElement('script');

        dsq.async = true;

        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

        (document.getElementsByTagName('head')[0] || document.body).appendChild(dsq);

    }

})();



!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");



    var divs = ["disqus-box", "blogger-box", "facebook-box"];

    var visibleDivId = null;

    function toggleVisibility(divId) {

      if(visibleDivId === divId) {

        visibleDivId = null;

      } else {

        visibleDivId = divId;

      }

      hideNonVisibleDivs();

    }

    function hideNonVisibleDivs() {

      var i, divId, div;

      for(i = 0; i < divs.length; i++) {

        divId = divs[i];

        div = document.getElementById(divId);

        if(visibleDivId === divId) {

          div.style.display = "block";

        } else {

          div.style.display = "none";

        }

      }

    }



$(".commentbtn").click(function (e) {

$(this).addClass("btncurrent").siblings().removeClass("btncurrent");

});

//]]>

</script>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='fb-root'/>

<script type='text/javascript'>

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="URL HOSTING JAVASCRPT DI SINI",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

</b:if>

5. قم بتغير المحدد باللون الاحمر بمعرف تعليقات Disqus الخاص بك
لكل شخص واجهة صعوبة او مشكله يضع استفسار في تعليق بالاسفل سوف ارد على جميع استفساراتكم . . . بالتوفيق 😍

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