تغيير شكل صندوق التعليقات في بلوجر

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

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

طريقة تركيب الشكل الجديد لصندوق التعليقات

• إذهب إلى لوحة التحكم .

• قالب تم تحرير HTML

• ابحث باستعمال CTRL+F عن Comment

•  كما ترى على الصورة ، ذاك هو الكود شكل التعليقات .
  • ما عليك الآن سوى اختياره و استبداله بالكود الثالي :

    .comments .avatar-image-container, .comments .avatar-image-container img {
    width: 48px;
    max-width: 40px;
    height: 40px;
    max-height: 48px;
    background: #FFF;
    float: right;
    border-radius: 50%;
    -moz-border-radius: 50%;
    margin: 0 10px 0 0;
    }

    #comments .avatar-image-container img {
    border: 1px solid #ddd;
    }

    .comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {
    width: 36px;
    max-width: 36px;
    height: 36px;
    max-height: 36px;
    margin-right: 5px;
    }
     #comments {
    background-color: #fff;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    }

    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
    margin-right:60px;
    width:490px;
    }

    .comments .comment-block,.comments .comment-thread.inline-thread .comment {
    border:1px solid #ddd;
    background:#fff;
    background-color:#fff;
    padding:10px;
    padding-left:0px;
    padding-right: 0px;
    }

    .comment-header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    }

    .thread-chrome.thread-expanded .comment-header {
    width: 412px;
    margin-right: 15px;
    }
    .comments .comments-content .comment {
    width:100%;
    line-height:1em;
    font-size:13px;
    margin:15px 0 0;
    padding:0;
    }
    .comments .comments-content .comment-content {
    text-align: justify;
    line-height: 22px;
    overflow: hidden;
    }
    .thread-chrome.thread-expanded .comment-content {
    width: 380px;
    line-height: 22px;
    overflow:hidden
    }
    .comments .comment-thread.inline-thread .comment-actions {
    display: none;
    }

    .item-control.blog-admin {
    display: none;
    }
    .comments .comments-content .comment-replies {
    margin-top:0;
    }

    .comments .comment-content {
    line-height: 1.4em;
    padding: 15px;
    }

    .comments .comment-thread.inline-thread {
    padding-right: 0px;
    }

    .comments .comment-thread.inline-thread .comment {
    width:auto;
    }

    .comments .comment-thread.inline-thread .comment:after {
    content:"";
    position:absolute;
    top:10px;
    right:-20px;
    border-top:1px solid #d2d2d2;
    width:10px;
    height:0;
    }

    .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 .continue {
    border-top:0;
    width:100%;
    }

    #comment-editor {
    width:98%!important;
    }

    .comment-form {
    width:100%;
    max-width:100%;
    }

    #comments h4 {
    display:inline;
    line-height:40px;
    padding:10px;
    }

    .comments .continue a {
    background:#0d86cc;
    text-align:center;
    padding:10px 0;
    display:none;
    }

    #comments h4,.comments .continue a {
    line-height: 30px;
    margin: 0;
    padding: 20px 0 14px 10px;
    font-size: 18px!important;
    text-transform: uppercase;
    font-weight: 400!important;
    color: #444;
    }

    .comments .user a {
    color: #444!important;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;
    margin-top: 20px;
    font-weight: 600;
    padding-right: 15px;
    }

    .comments .comments-content .datetime {
    cursor: pointer;
    float: left;
    padding-top: 6px;
    padding-left: 20px;
    }

    .icon.user {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCZ4DIklnmQFmRN7k86EfCGhpa9YIpPp7pCnq_7Ygaj1b4oIzHhyphenhyphenSI7WhxqwveqtXWSAxnM0H1DE54xh9rGpwxHSR9FZkNdkjl2b5pcBKyJJa_dhcYcIKU3vtymXaGS6KDKbWNtSVKiYE/s1600/online.png) no-repeat;
    height: 12px;
    width: 16px;
    display: inline-block;
    margin: 0 0 -4px 6px;
    }

    .comments .comment-thread.inline-thread .user a {
    font-size:13px;
    margin: 0px;
    padding: 0px;
    }

    .comment-actions {
    background: #f2f2f2;
    padding: 8px;
    margin-right: 435px;
    border: 1px solid #ddd;
    float: left;
    margin-top: -30px;
    margin-left: 5px;
    }

    .comment-thread a {
    color: #777;
    }

    .comments .comment .comment-actions a:hover {
    text-decoration: underline;
    }

    .comments .comments-content .icon.blog-author {
    display: inline-block;
    height: 18px;
    margin: 0 0 -4px 6px;
    width: 18px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHZt9dfhb-ZqEuqvttQs93uDTC1cL2tFjUUQcZWA3Bo6-7nKmtSeSVxk51M0bYNoG0tJaCwG8lN42fQ91XIQ_lAHuXgCIZjK2wLShjrAQyF0lBKD429pr3Y6cXnIaxvh7GOK1hXqjq3hY/s1600/Verificon.png);
    }

• تم اضغط حفظ .

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

مقالات ذات صلة