تغيير شكل تعليقات مدونات بلوجر

التسميات

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

كيفية تغيير شكل التعليقات

1. اذهب الى لوحة التحكم > القالب > تحرير HTML
2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه
/* CSS Comments by al7otweb */
.avatar-image-container img{height:70px;width:70px;overflow:hidden;float:right;margin-left:20px;max-width:100%!important;border: 1px solid #E0E0E0; padding: 5px}
#comments{padding:0!important;}
#comments a {font-family:inherit;font-size:13px;font-weight:600;}
.comments .avatar-image-container{max-height:100%!important;width:70px!important;margin-left:10px;border-radius:3px;overflow:initial;margin-left:20px;}
.comment-block{border-bottom:1px solid #ecedee;margin-bottom:20px;padding-bottom:20px;overflow:hidden;position:relative}
.comment-header a{font-size:14px;font-style:normal;display:inline-block;margin-bottom:5px;color:#34495E;    font-family: inherit;}
.comments .comments-content .datetime a{font-size:11px;font-weight:600;font-family:inherit;}
.comments .comments-content .datetime,.comments .comment .comment-actions a{float:left}
.comment-actions a:hover{background:$(main.color);color:#fff;text-decoration:none}
.comment-actions a{color:$(main.color);background:#fff;border:1px solid #ddd;float:left;font-size:13px;padding:5px 20px!important;margin-right:10px;font-weight:600;border-radius:3px;font-family:inherit;}
.comments .comments-content .comment-header{background:#fff;padding:5px;margin-bottom:0;border:1px solid #ddd;}
.comments .comment .comment-actions a{padding:0;}
.comments .comment .comment-actions a:hover{text-decoration:none}
.comments .continue{cursor:pointer;margin-top:-30px;margin-bottom:30px}
.comments .continue a{display:block;color:#333;font-size:11px;font-weight:normal;padding:0}
.comments .comments-content .icon.blog-author{height:initial;width:initial;margin:0 12px -4px 0;font-weight:700;color:#FFFFFF;font-size:11px;background:$(main.color);padding:3px;border-radius:3px}
.comments .comments-content .icon.blog-author:after{content:"المشرف"}
.comments .comments-content .comment-content{text-align:right;padding:20px;background:rgb(235,235,235);color:#232323;border:1px solid #DEDEDE;border-top:0;font-family:inherit;font-weight: 600;}
.comments .comments-content {padding: 15px; padding-top: 0;}
#comments{padding:15px;margin-bottom:20px;background:#fff;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #E6E6E6;}
#comments h4{color: #2D2D2D; font-size: 15px; font-weight: bold; margin-bottom: 10px; text-align: right; text-transform: capitalize; margin: 0; background: #FCFCFC; padding: 18px; border-bottom: 1px solid #E6E6E6;}
.deleted-comment{font-style:italic;color:gray}
#outer-wrapper{padding: 0 20px; position: relative; max-width: 1150px; margin: 0 auto;}
#banner{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;text-align:center;padding:10px;margin:15px}
3. ابحث عن الكود التالي او عن نصفه
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
4. استبدل الكود التالي بالكود السابق
<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;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>
5. ابحث عن الكود التالي او عن نصفه
<b:includable id="comments" var="post">...</b:includable>
6. استبدل الكود التالي بالكود السابق
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<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>
</b:includable>
7. إنتهى الموضوع ، نأمل أن تكون استفدت

مواضيع ذات صلة

8 التعليقات

أنت الأجمل صديقي :)

تسلم ايدك اخى الغالى على الطرح المميز

أزال أحد مشرفي المدونة هذا التعليق.

شكرًا صديقي
تدوينة رائعة

شكرا على الإضافة الجميل
ممكن تتبادل التعليقات مع مدونتي

موضوع جميل
لمزيد من شروحات البلوجر والمواقع تابعوني على
مدونة اللامي


EmoticonEmoticon