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

بسم الله الرحمن الرحيم اليوم احضرت لكم شكل جميييييل لتعليقات بلوجر يمكنك اضافتة فقط بوضع القليل من css في القالب شكل التعليقات سيكون مثل الصورة اعلاه اظن انك تستطيع رؤية جمال التعليقات بهذا الشكل الجذاب والبسيط . والذي يجذب الزائر للتعليق في مواضيعك باذن الله :اذا اعجبك ذلك الشكل فتابع معي لتعرف طريقة اضافته
قم بالبحث عن وأضف قبله الكود التالي:

#comments{overflow:visible} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color: #647275; font-family: tahoma} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0;margin: 0 5px 0 20px;float: right;} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color: #00abe3 } .comments .avatar-image-container,.comments .avatar-image-container img{width:60px;max-width:60px;height:60px;max-height:60px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:70px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #B5B4B4;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVl7mmEGq8pSh8SBYh9tdk21nmpJcm6yOPpBWCtLQUlXOn3iCWZcsRJtvUPiUgoZKbGoDt6L3mU6F1-xfPP_Xm29iwvbBLNcvaBWA4_f5HPlmj5UK9j2ojC_S_esuEsm_8LtIvg5gokTE/s1600/author-red.png);width:50px;height:44px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-right:48px;} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:60px;max-width:60px;height:60px;max-height:60px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} .comments .comments-content .datetime a{color:#111111;font-size:12px;text-decoration:none;position: absolute;left: 100px;}

ثم إعمل حفظ وتمتع بالإضافة
إذا واجهت أي مشاكل يمكن طرحها في تعليق

اذا اعجبك ذلك الموضوع فقم بمشاركته مع اصدقائك وارجوكم لا تحرمونا من التعليقات

الموضوع من قسم:

bloger

ads

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