كن مهووس: تغير شكل التعليقات v2

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
تغير شكل التعليقات v2
كتب بواسطة
عدد التعليقات
4 التعليقات

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

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

  1.  خذ نسخة احتياطية من القالب لتجنب حدوث اى مشاكل او اخطاء (لوحة التحكم => قالب => نسخ احتياطى / استعادة => تنزيل النموذج الكامل)
  2.  افتح القالب من تحرير html
  3.  إبحث عن <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://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/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 &gt; h4 {
        color: #7B7B7B;
        padding: 20px;
        text-align: right;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        font-weight: 300;

      }
      #comments &gt; 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(&#39;https://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/s1600/tr.png&#39;) !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(&#39;https://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/s1600/tr.png&#39;) !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://2.bp.blogspot.com/-Tli7X-Epbus/V5ENQ3om9hI/AAAAAAAAAWc/xsCPHqTOTIQeJu8ZEaXmFIIGoMyxnyyPACLcB/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: &quot;الكاتب&quot;;
    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.  إبحث عن <b:include data='post' name='threaded_comments'/> ثم غيره بالكود التالي قد تجد الكود متكرر غيرهم بأكملهم
<b:include data='post' name='comments'/>

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

اذا واجهتك مشكلة او للاستفسار فباب التعليقات مفتوح وكذلك ركن الاسئلة للطلبات والشات
avatar

العفوا وشكرا لمرورك

delete 19‏/9‏/2016 12:07 م
avatar

موضوع حصري واضافة رائعة ومدونة رائعة وانتما الاثنين الاروع

delete 19‏/9‏/2016 4:31 م
avatar

مرورك الاروع اخى

delete 20‏/9‏/2016 1:45 ص

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير