تنسيق تعليقات مدونة بلوجر بشكل مميز (وتميز تعليق المدير) 2013

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

السلام عليكم ورحمة الله وبركاته

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

انا قبل شرح الاضافة اتمنى ان تشاهدوا الصورة

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

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

من هنا

بعد ذلك ادخل الى تصميم او القالب في الواجهات الجديد  ثم تحرير HTMIL  ثم احفظ نسخة احتياطية من قالبك ثم توسيع القوالب 

ثم ابحث عن الكود التالي

                                                                                                                            

 ]]></b:skin>

ثم اضف الكود التالي قبل الكود السابق

      

    /* Start Comment Style Code http://www.iraqshop1.blogspot.com */

    .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:#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-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:#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:right;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/AVvXsEjM-QfMuWtlEEC3u5I8XpZ3eeKoZcIIIu3qDMB2Uphg2p9NJ9l9x8KjuTy9ek-rXTUnmOwJUPyLvV8j9W77K7uSbjqGg6IMcAEnPidUDzbAQs5flmmWYkdBhs1-CcPPj3zN_KnDpc8fR4k/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}}

    /* End Comment Style Code http://www.iraqshop1.blogspot.com */

ثم احفظ القالب

انتهى الشرح اتمنى ان ينال رضاكم اي استفسار يرجى ترك تعليق للاجابة عليه