تغيير شكل تعليقات بلوجر الأفتراضى الى شكل اخر احترافى الشكل الثانى CSS Comments

غير شكل تعليقات بلوجر الأفتراضية الى شكل اخر جذاب مثل المواقع الكبرى لتعطى شكل افضل للمدونة لتجذب الزوار والمشاركين على التعليقات فالاضافة او التغيير بتقنية css اللغة الأكثر من رائعة الذى اعطت الروح والحياه للغة Html فلن اطيل عليكم بالكلام ونأتى الى طريقة التركيب .

مثال للتغير من خلال الصورة التالية :

طريقة تركيب الأضافة :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير HTML 

 الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث 

ابحث عن هذا الكود : 

]]></b:skin>

اضف قبلة مباشرة هذا الكود :

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#FFFFFF;border:1px solid #000000;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

.comments .comments-content .inline-thread{padding:0}

.comments .comments-content .comment-thread{margin:8px 0}

.comments .comments-content .comment-thread:empty{display:none}

.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

.comments .comments-content .comment:first-child{padding-top:16px}

.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}

.comments .comments-content .comment-body{position:relative}

.comments .comments-content .user{font-style:normal;font-weight:normal}

.comments .comments-content .user a{color:#000000;font-weight:normal;text-decoration:none}

.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

.comments .comments-content .datetime a{color:#000000;font-size:12px;float:left;text-decoration:none}

.comment-content{margin:0 0 8px;padding:0 5px}

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

.comments .comments-content .owner-actions{position:absolute;right:0;top:0}

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}

.comments .thread-toggle{cursor:pointer;display:inline-block}

.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}

.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

.comments .thread-chrome.thread-collapsed{display:none}

.comments .thread-toggle{display:inline-block}

.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}

.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}

.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMnBRnhxtxW5ntNv9IQvFK6kmYubDs5d4KSSGi47BQWn2jDGMu4eR6oW7hwHKFUmlivy4_BbiHdw5rV0gs3cz0mQjxIutykRnh3UkaPIKLRis11sKxcW9JbnYuQ-g2Z4wQFh1cj1CHuA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

قم بحفظ التغيرات وانتهى التركيب

ملحوظة هامة :

لمن يواجهة مشكلة بعدم نجاح التغيرات او عدم نزول زر الرد او عدم التنسيق فقط اضغط على هذا الدرس الضرورى الذى سيحل لك هذا المشاكل .

حل مشكلة عدم اضافة زر الرد الاقتباس على التعليقات المنشورة وعدم التنسيق comment reply

ارجو بأن هذه الأضافة اعجبتكم وانتظرونى باضافة اخرى مفيدة  

الشكل الأول السابق :

 تغيير شكل تعليقات بلوجر الأفتراضى الى شكل اخر احترافى الشكل الأول CSS Comments