تغيير شكل التعليقات في مدونتك الى شكل مميز مثل البعداني

الكاتب بتاريخ عدد التعليقات : 14
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب اليوم لدينا شرح كيفية تغيير شكل التعليقات الى شكل مدونة البعداني الإحترافي الشكل رائع وجميل ايضا موجودة في المدونة الان يمكنك معاينتها بوضع تعليق في هذه الصفحة في الاسفل الان نأتي الى 
طريقة التركيب على بلوجر

  1. اولا نتجه الى لوحة التحكم
  2. ثم القالب
  3. ثم تحرير html
  4. إبحث عن ]]></b:skin>
  5. ضع الكود التالي فوقها(قبله)
/* CSS comments */
.comments .comments-content .comment-content a { display: none; }
colll4 .numcomment{line-height: 0.6em !important;font-size:4em; float:left; width:100%; margin:10px -4px 6px 0; display:block;margin-top:-1px;font-family: serif;color:#5D9F5E;}
.colll4 .labelscomment{font-family: ge_hiliregular;font-size:11px; color:#A6A6A6}
.comment-form p{background:#fff;padding:5px;width:98%;border:1px solid #f1f1f1;color:#777;font:14px Droid Arabic Naskh;margin:0 auto;margin-top:10px;line-height:21px;}
.comment-form p:before{content:&#39;\f05a&#39;;float:right;font:39px fontawesome;width:41px;color:#ccc;height:41px;margin:0 5px;}
.comments-content{background:#f9f9f9;padding:5px;border:1px solid #DDD;margin:5px;position:relative;}
.comments .avatar-image-container{float:right;max-height:50px;overflow:hidden;width:50px;padding:2px;background:#fff;border:1px solid #eee;margin:0 7px;}
.comments .avatar-image-container img{width:100%;max-width:100%;}
.comments .comment-block {
background: none repeat scroll 0% 0% #F6F6F6;
margin: 0px 73px 0 14px;
position: relative;
border: 1px solid rgba(200, 200, 200, 0.54);
color: #818F96;
}
.comment-header a {
color: #999;
text-shadow: 1px 1px #FFF;
font-size: 13px;
font-weight: 100;
line-height: 1.6;
}
.comments .comment-block:after {
content: &quot;&quot;;
position: absolute;
bottom: -3px;
right: 0px;
color: #468847;
background: url(&#39;http://3.bp.blogspot.com/-JfvhAJeiFeY/VHo2uLQkmVI/AAAAAAAADag/zmmNZwAM79I/s1600/bg_color.png&#39;) repeat scroll 0% 0% transparent;
height: 3px;
width: 100%;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 3px;
padding-bottom: 0px;
}
.comment-header{display:inline-block;border:1px solid #eee;border-right:0;border-top:0;padding:1px 10px 0 10px;}.comments .comment-block:before{content:&#39;\f0da&#39;;position:absolute;font:30px fontawesome;top:15px;right:-11px;color:#E8E8E8;}.comment-content{padding:20px;}
.comment-actions a{background:#fff;color:#6F6F6F;padding:0 10px;padding-top:2px !important;padding-left:10px !important;font-size:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:2px;border:1px solid #eee;display:inline-block;}
.comments .comments-content .user a {
float: right;
margin: -1px -10px 0px 10px;
padding: 0px 5px;
height: 23px;
color: #166dbd;
background-color: #D8E7F0;
border-color: #D8E7F0;
}
.comments .comments-content .user a:before{
content:&#39;\f0d9&#39;;
font: 19px fontawesome;
float: left;
position: relative;
left: -12px;
top: 2px;
color: #D8E7F0;
text-shadow: none;}
.comments .comments-content .user a:after{
content: &#39;\f14b&#39;;
font: 17px fontawesome;
float: right;
margin: 0px 0px 0px 8px;
position: relative;
top: 2px;
padding: 0px 2px;
text-shadow: none;
}
span.item-control.blog-admin a:after{content:&#39;\f014&#39;;font:14px fontawesome;margin:0 5px 0 0;color:#ccc;}.comments .continue a{background:#fff;color:#6F6F6F;padding:3px 10px!important;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-weight:500!important;border:1px solid #eee;display:inline-block;}.comments .continue a:after{content:&#39;\f124&#39;;font:12px fontawesome;margin:0 10px 0 0;display:inline-block;color:#ccc;}.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#eee;}
.comments {
background: none repeat scroll 0% 0% #F9F9F9;
padding: 15px;
border: 1px solid #DDD;
margin: 5px 0 0 0;
position: relative;
}
.feed-links {
display: none;
}
.top-comment-widget-menu {
background: none repeat scroll 0px 0px #FFF;
border-color: #DDD;
border-style: solid;
border-width: 1px 1px 5px;
float: right;
margin: 20px 0px;
width: 953px;
}
.top-comment {
float: right;text-align: center;
font-family: &quot;ge_ss_threeregular&quot;;
font-size: 14px;
list-style: none outside none;
margin: 10px 0;
text-transform: uppercase;
width: 50%;
cursor: pointer;
}
.top-comment.selected {
color: $(mmcb.background.color);
cursor: pointer;
}
#comments h4 {
display: inline;
padding: 4px 8px;
line-height: 45px;
}
#comments h4,.comments.comment-header,.comments .comment-thread.inline-thread .comment{position:relative}#comments h4{background:#166DBD}
#comments h4{font-size:17px}
#comments h4{font-weight:normal;color:#fff}
#comments h4:after {
content: &quot;&quot;;
position: absolute;
bottom: -10px;
right: 10px;
border-top:10px solid #166DBD;
border-left: 20px solid transparent;
width: 0px;
height: 0px;
line-height: 0;
}
.icon.blog-author:after {
content: &quot;المدير&quot;;
background: #166dbd;
color: #FFF;
padding: 2px 16px;
border-radius: 1px;
position: absolute;
left: 0px;
margin-top: -3px;
font-size: 14px;
font-family: ge_hiliregular;
}
.comment-content {
padding: 20px;
font-family: ge_hiliregular;
}
.top-comment.blogico:before {
content: &quot;\f0d5&quot;;
font-family: fontawesome;
font-size: 18px;
margin-left: 15px;
color: #F66;
}
.top-comment.faceico:before {
content: &quot;\f09a&quot;;
font-family: fontawesome;
font-size: 18px;
margin-left: 15px;
color: #627AAC;
}
#submitButton-2{margin:0 0 0 16px!important}
#submitButton, #submitButton-2{background:none repeat scroll 0% 0% transparent; font:bold 12px &quot;roboto&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; width:108px; height:36px; overflow:hidden; text-transform:uppercase; border:medium none; cursor:pointer; float:left; color:#fff}
.comments .comments-content .comment:first-child{padding-top:0}
.colll4 .numcomment {
font-size: 3em;
float: left;
width: 100%;
margin: 6px -4px 6px 0px;
display: block;
line-height: 0.6em !important;
}
.colll4 .numcomment {
line-height: 0.7em !important;
font-size: 2em;
float: left;
width: 100%;
margin: 4px 0px 6px 0px;
display: block;
}
.comments .avatar-image-container img {
float: right;
background: none repeat scroll 0% 0% rgba(30, 30, 30, 0.5);
border: 1px solid #151515;
box-shadow: 0px 2px 3px #000, 0px 0px 1px 0px #000 inset;
height: 45px;
width: 45px;
padding: 2px;
max-width: 45px;
border-radius: 8px;
}
.comments .comment-block {
background: none repeat scroll 0% 0% #F6F6F6;
margin: 0px 73px 0 14px;
position: relative;
border: 1px solid rgba(200, 200, 200, 0.54);
color: #818F96;
}
.comments .thread-toggle {
display: block !important;
position: absolute !important;
right: 8px !important;
margin-top: -36px !important;
}
.comments .comments-content .comment-replies .avatar-image-container img {
width: 35px;
height: 35px;
overflow: hidden;
border-radius: 5px;
margin-right: -2px;
}
.comments .comments-content .comment-content {
padding: 0px 11px 8px 0px;
margin: 0px 0px 0px 1.1em;
color: #A6A6A6;
font-size: 13px;
line-height: 1.4em !important;
}
.colll4 .numcomment {
line-height: 0.1 !important;
font-size: 2em;
float: left;
width: 100%;
margin: 8px 0px 13px 0px;
display: block;
}
.comments .comments-content {
width: 738px;
margin-right: -20px;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}


  • الخطوة الاخير قم بالبحث عن 

<b:includable id='comments' var='post'> سوف تجده على الشكل التالي:

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

  • قم بتوسيع الكود وإستبداله بالكود التالي حتى تصل إلى نهايته:

<b:includable id='comments' var='post'>  <div class='comments' id='comments'>    <a name='comments'/>    <b:if cond='data:post.allowComments'>      <h4><data:post.commentLabelFull/>:</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: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></b:includable>
وحفظ القالب والى هنا يكون قد انتهى درسنا ونلتقي في درس جديد انشاء الله في القريب العاجل والسلام عليكم ورحمة الله وبركاته

14 تعليقات على موضوع " تغيير شكل التعليقات في مدونتك الى شكل مميز مثل البعداني "

موضوع رائع أخي تسلم
لاتحرمنا من تعليقاتك
مساعد قوالب بلوجر

موضوع رائع وفي انتظار الحصري

شكرا في القريب العاجل

لم افهم قصدك إذا كنت تريد صفحة الوان فلات هذا هو رابط الصفحة فقط قم بنسخ الكود الموجود فوق اللون الذي تريده http://th3geekweb3.blogspot.com/p/class-post-body-entry-content-id-post.html

طلب ارجو كود اضافة المواقع الاجتماعيه بنفس شكل المدونة

هل لديك صورة للإضافة لأنه يوجد الكثير من إضافات المواقع الاجتماعية في المدونة

الاضافة موجوده عندك http://th3geekweb3.blogspot.com/2015/02/blog-post_16.html بس عايز الشكل الحالي مع طريقة التركيب وشكرا ياخي

تم إرسال الطريقة الى ‫alihassan205555@hotmail.com‬

جزاك الله خير الجزاء وزادك من علمه أخوك من مدونة الكابتن

واياكم،سررت بمرورك

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء