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

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

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

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

***********************

***********************

اذا لم تجد المطلوب في الصفحة يمكنك البحث هنا في جوجل للتحويلك الي موضوع اخر

: شارك

Tweet

✚

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