تغير شكل التعليقات v3

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

شرح طريقة التركيبة

1.  افتح القالب من تحرير html
2.  إبحث عن <b:includable id='comments' var='post'>...</b:includable> ثم غيره بالكود التالي 

 ملاحظة : إذ لم تجده إبحث عن <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>
                      <div class='comments' id='comments'>
                        <a name='comments'/>
                        <b:if cond='data:post.allowComments'>
                          <h4><data:post.commentLabelFull/>: <i class='fa fa-comments-o'/></h4>
                          <b:if cond='data:post.commentPagingRequired'>
                            <span class='paging-control-container'>
                              <b:if cond='data:post.hasOlderLinks'>
                                <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;
                              </b:if>
                              <data:post.commentRangeText/>
                              <b:if cond='data:post.hasNewerLinks'>
                                &#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>
                              </b:if>
                            </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:elseif cond='data:post.allowComments'/>
                              <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
                            </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>
                        <script class='java' type='text/javascript'>
                          //<![CDATA[
                          $(document).ready(function(){
                            $('.comments .comments-content .avatar-image-container img').each(function(){
                              this.src = this.src.replace('/s35-c/', '/s80-c/');
                            });
                            $('.comments .comments-content .avatar-image-container img').each(function(){
                              this.src = this.src.replace('/s35/', '/s80-c/');
                            });
                          });
                          //]]>
                        </script>
                      </div>
                    </b:includable>

نلانال

1. ابحث عن <b:includable id='threaded-comment-form' var='post'>...</b:includable> واغلقه واستبدله كاملا بهذا الكود

* ملاحظة : إذ لم تجده إبحث عن نصفه كما بالسابق

<b:includable id='threaded-comment-form' var='post'>
                      <div class='comment-form'>
                        <a name='comment-form'/>
                        <b:if cond='data:mobile'>
                          <p><data:blogCommentMessage/></p>
                          <data:blogTeamBlogMessage/>
                          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
                          <b:else/>
                          <p><data:blogCommentMessage/></p>
                          <data:blogTeamBlogMessage/>
                          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
                          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
                        </b:if>
                        <data:post.friendConnectJs/>
                        <data:post.cmtfpIframe/>
                        <script type='text/javascript'>
                          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
                        </script>
                      </div>
                    </b:includable>

1.  ابحث عن ]]></b:skin> وضع هذا الستايل قبله

* ملاحظة : تاكد اولا من حذف ستايل التعليقات القديم

#comments {
        margin-top: 40px;
        padding: 0px 20px;
        display: inline-block;
        width: 100%;
        border-bottom-width: 0;
           background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_LUeA7akmXWStEYN5jp03zCH-XJwdxXNRBJoiIASAWHupNpADSkpT0xOVjLukT7cU-exkcut42EUhSVblKTxfZiiHPjXcQw5HX-YjsTkMD7eGRck1T6daOcWKOWEAE2446AfCVNDRRV/s1600/tr.png) no-repeat !important;
    transition: box-shadow .25s;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    background-color: #fbfbfb !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    position: relative;
    border-radius: 4px;
    border-bottom: 3px solid rgba(214,223,222,.25);
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.08);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 3px 5px rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 3px 5px rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 3px 5px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #e4e4e4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-family: Electrolize,ge_ss_threeregular;
    font-weight: 900;
      }
      #comments > h4 {
        color: #7B7B7B;
        padding: 20px;
        text-align: right;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        font-weight: 300;

      }
      #comments > h4 i {
        float: left;
        line-height: 1.5em;
      }
      #comments #comment-post-message {
        padding-right: 20px;
        color: #7B7B7B;
      }
      #comments .user a {
    color: #fff;
    font-style: normal;
    font-size: 13px;
    line-height: 26px;
    font-weight: 400;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_LUeA7akmXWStEYN5jp03zCH-XJwdxXNRBJoiIASAWHupNpADSkpT0xOVjLukT7cU-exkcut42EUhSVblKTxfZiiHPjXcQw5HX-YjsTkMD7eGRck1T6daOcWKOWEAE2446AfCVNDRRV/s1600/tr.png') !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-color: rgba(0, 150, 136,1.0) !important;
    padding: 4px;
    border-radius: 2px;
       
      }
#comments .datetime,#comments .datetime a {color: #999;text-decoration: none;margin: 0 0px 0px;font-size: 14px;display: inline-block;float: left;}
.comments .comments-content .comment-content {margin: 0 0 20px;color: #7B7B7B;font-size: 13px;}
#comments .datetime a {margin: auto;font-weight: 500;font-size: 12px;color: #fff;font-style: normal;font-size: 13px;line-height: 26px;font-weight: 400;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_LUeA7akmXWStEYN5jp03zCH-XJwdxXNRBJoiIASAWHupNpADSkpT0xOVjLukT7cU-exkcut42EUhSVblKTxfZiiHPjXcQw5HX-YjsTkMD7eGRck1T6daOcWKOWEAE2446AfCVNDRRV/s1600/tr.png') !important;background-attachment: fixed !important;background-size: cover !important;background-color: rgba(96, 125, 139,1.0) !important;padding: 4px;border-radius: 2px;}
#comments .comment-actions a {
background-color: #E15D5D;
border: 1px solid #E15D5D;
border-radius: 2px;
color: #FFF;
        font-size: 11px;
        line-height: 1.2em;
        padding: 3px 9px 2px;
        text-transform: uppercase;
        text-decoration: none;
        margin-left: 10px;
      }
      #comments .comment-actions a:hover {
        color: #fff;
        background-color: #555;
        border: 1px solid #555;
      }
      #comments .comment {
        border-bottom: 1px solid #eee;
        padding: 0;
      }
      #comments .loadmore {
        margin-top: 0;
      }
      .comment-replies .inline-thread {
    border-width: 1px 1px 1px 3px;
    border-style: solid;
    border-color: #ddd #ddd #ddd #E15D5D;
    margin: 20px 0 20px !important;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDH_LUeA7akmXWStEYN5jp03zCH-XJwdxXNRBJoiIASAWHupNpADSkpT0xOVjLukT7cU-exkcut42EUhSVblKTxfZiiHPjXcQw5HX-YjsTkMD7eGRck1T6daOcWKOWEAE2446AfCVNDRRV/s1600/tr.png) no-repeat !important;
    transition: box-shadow .25s;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    background-size: cover !important;
    background-attachment: fixed !important;
    position: relative;
    border-radius: 4px;
      }
      #comment-editor {
        height: 235px;
      }
      .comments .comments-content .avatar-image-container {
        max-height: 76px;
        width: 76px;
    border: 2px solid rgba(0, 188, 212,1.0);border-radius: 50%;
      }
      #comments .comments-content .avatar-image-container img {
        max-width: 100%;
        border: 1px solid #eee;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
      }
      .comments .comment-block {
        margin-right: 98px;
      }
      span.icon.user.blog-author:after {
    background-color: rgba(233, 30, 99,1.0);
    color: #fff;
    padding: 3px 5px;
    border-radius: 2px;
    font-weight: normal;
    font-size: 13px;
    font-weight: 400;
    content: "الكاتب";
    display: inline-block;
      }
      .thread-toggle {
        display: block !important;
      }
      .thread-toggle.thread-expanded {
        border-bottom: 1px solid #ddd;
        width: 100%;
        padding: 0px 0 10px;
        margin-bottom: 10px;
      }
      .comments .thread-toggle .thread-arrow {
        margin: 0px 0 1px 10px;
      }
      #comments .thread-chrome .comment {
        border-bottom-color: #ddd !important;
      }

1.  احفظ القالب