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

بسم الله الرحمن الرحيم اليوم احضرت لكم شكل جميييييل لتعليقات بلوجر يمكنك اضافتة فقط بوضع القليل من 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/AVvXsEiD5pc1m9CPnW1JHsP6vOnEJJXF-lB67p7A9Qs9pkKA6Zpvzh-6xlciM__Y3HfRPW9XI7ijnhedC7nP0SAmMVEDxK98E6vb3sUAoIGhzEuBlPMzteiCnehbpbh-K8wv2kAgCASQPbEHZUI/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;}