تغيير شكل تعليقات مدونتك مثل قالب مستر عربكو
كيفية تغيير شكل صندوق تعليقات مدونات بلوجر بشكل احترافي
السلام عليكم متابعينا , قالب مستر عربكو السابق والذي حقق نجاح كبير سنقوم اليوم بوضع صندوق التعليقات الخاص به كما في الصورة وستجعل شكل التعليقات بشكل احترافي مثل هذه الصورة ومميزات الاضافة هي
- شكل احترافي
- بدون اكواد جافا
- شكل خاص لفريق العمل
- شكل خاص لتعليقات الزوار
- سريعة
ويمكنك معاينة الاضافة من خلال معاينة قالب مستر عربكو السابق
الشرح
قم بالبحث عن
]]></b:skin>
وضع فوقه هذا الكود
/* Comments
--------------------------*/
#comments{background:#ffffff;padding:15px}
#comments h4,#comments .comment-block p{font-family:Tajawal;color:#636363}
.comments h4{font-size:14px;font-weight:700;color:#fff!important;background:#0984e3;padding:5px 10px;margin:5px 0;display:inline-block;clear:both;border-radius:30px;line-height:2em;position:relative}
.comments h4:before{content:"\f27b";font:normal normal normal 14px/1 FontAwesome;font-size:1em;position:relative;color:#fff;margin:8px}
.comments{text-align:right;width:100%;float:right;background:#fff;border:0;padding:0}
.comments .comment-block{position:relative;background:#f1f1f1;margin-right:60px;border:1px;border-right:1px solid #f1f1f1;padding:15px 10px}
.comments .comment-block:before{content:'\f0da';position:absolute;font:30px fontawesome;top:15px;right:-11px;color:#f1f1f1}
.comment-form{overflow:hidden;padding:5px;background-color:#FFFFFF;clear:both;_width:410px}
.comments h3{line-height:normal;text-transform:uppercase;color:#333;font-weight:700;font-size:14px;margin:0 0 20px;padding:0}
h4#comment-post-message{display:none;margin:0}
.comments .comments-content{font-size:13px;margin-bottom:8px}
.comments .comments-content .comment-thread ol{text-align:right;margin:13px 0;padding:0}
.comments .comments-content .comment-content{text-align:right;padding:15px 10px;background-color:#FFFFFF;border-radius:0.25em;font-size:14px;font-family:Tajawal!important}
.comments .avatar-image-container{float:right;max-height:40px;overflow:hidden;margin:10px;display:inline-block;width:40px;height:40px;border:3px solid #dadada}
.comments .avatar-image-container img{max-width:100%;width:100%}
.comments .comments-content .user a{float:right;color:#0984e3;font-size:16px;padding:2px 5px;font-weight:bold}
.comments .comments-content .comment-replies{margin:8px 60px 0 0}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:last-child{padding:0;margin:0}
.comments .comments-content .comment-thread{margin:0;padding:0}
.comments .comments-content .inline-thread{overflow:hidden;background:none}
.comments .comments-content .icon.blog-author{display:inline}
.comments .comments-content .icon.user:after,.comments .comments-content .icon.blog-author:after{content:"\f118";font:normal normal normal 24px/1 FontAwesome;color:#0984e3;padding:0;margin:0 5px}
.comments .comments-content .icon.blog-author:after{content:"\f1f9";color:#0984e3}
.comments .comments-content .icon.blog-author:before{content:"فريق العمل";font-family:inherit;font-weight:700;color:#9e8895}
.comments a:hover{text-decoration:unset!important}
.comment-header{text-transform:uppercase;font-size:12px}
/*==datetime==*/
.comments .comments-content .datetime{margin:6px;position:relative;float:left}
.comments .comments-content .datetime a{color:#888;margin:10px;cursor:help;border-bottom:1px solid #0984e3;text-decoration:none}
iframe#comment-editor{height:300px;max-height:300px;width:100%;display:block}
/*== ==*/
.comments .comment .comment-actions a{display:inline-block;color:#0984e3;font-weight:700;font-size:10px;border:1px solid #FFFFFF;background-color:#FFFFFF;line-height:15px;padding:5px 10px;margin:15px 8px;width:80px;position:relative;text-align:center;border-radius:0.25em;-moz-border-radius:0.25em;-webkit-border-radius:0.25em;-o-border-radius:0.25em;-ms-border-radius:0.25em}
.comments .continue a{color:#FFFFFF;display:inline-block;font-size:14px;padding:9px 14px;float:left;background-color:#0984e3}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{background-color:#f1f1f1;color:#777}
.pesan-komentar p{line-height:normal;margin:0}
.fb-comments{width:100%!important}
.comments,.form{padding:0}
.leave-comment{width:80%;margin:0 auto}
ul.nested-comments ul li{margin:1em 3em}
.comment p{margin:10px 0}
.comment-avatar{float:right;width:60px;height:auto;margin-left:1em}
.comment-meta span{font-size:.8em;color:#999}
.comment-meta .mid-sep{padding:0 2px}
.avatar{width:60px;height:60px}
.comments .comments-content .inline-thread .avatar-image-container{background-color:#121212}
*/
.comments .thread-chrome.thread-expanded{display:none!important}
وقم بحفظ القالب وسيتغير معك شكل التعليقات الي الشكل الجديد , ولاتنسي ان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا, او اذا كنت تريد شرح معين عن شي في بلوجر لاتتردد في كتابته في التعليقات
شكراااا
ردحذفالعفو شكرا لك
حذف