إضافة شكل جذاب لتعليقات بلوجر

بسم الله الرحمان الرحيم 

قامت بلوجر مؤخرا بعمل نظام تعليقات جديد يتيح العديد من الخيارات الإضافيه لمستخدمى بلوجر, وكان ذلك شيئا جميلا, لكن تخلل ذلك التطوير فى البدايه بعض العيوب والأخطاء ولكن سرعان ما تغلبت بلوجر على كل هذه الأخطاء لتصل بنا إلى نظام تعليقات جميل جدا.

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

  

لنبدأ الشرح على بركة الله

  

أولا وكالعادة نذهب إلى

للوحة التحكم >> تصميم>> تحرير html

و ما عليك فعله هو أن تبحث عن الكود التالى

]]></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:right} .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:#fede72;border:1px solid #fec648;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-right: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:#0E6284;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:#0E6284;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;left: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-right: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-left: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/AVvXsEgzI57dQpDs_5huW7PsHtGvshgr-L8LYD1tvB1V0Qg5iyzLxOIbe_spoqdcMbjgrbrmsoMule2vEJRt4J1hvQ6SY4jC_Z_wtg3WNg7ENRdCYYXEZop2gbEVfiDN3_BHm6iiafXkvSErBkE/s51/arrow.png) top left no-repeat;float:right;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-right:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px} @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}

ثم قم بحفظ القالب وإستمتع بالشكل الرائع للتعليقات.

ومن يريد عمل اى تعديلات على هذا الشكل الرجاء وضع تعليق هنا.