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



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


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

طبعا لتغيير شكل من الضروري تغيير أكواد 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(http://4.bp.blogspot.com/-IWb4aHUGy9Y/UbCY5Le708I/AAAAAAAABWs/7quaLpItlhM/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(http://3.bp.blogspot.com/-oXtMYI4_PL4/UbCYKeISeSI/AAAAAAAABWk/Zx8WKou8CkU/s1600/Verificon.png);
    }


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

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

Previous
Next Post »

10 التعليقات

التعليقات
8/05/2014 delete

مشكورررر أخي الكريم

http://afaq0.blogspot.com/

Reply
avatar
8/17/2014 delete أزال المؤلف هذا التعليق.
avatar
3/05/2016 delete

السلام عليكم
أولا شكرا لكم على المجهود الطيب الذي تبذلونه
فقط عندي مشكلة و أتمنى منكم مساعدتي
عندي صندوق التعليقات يعمل عادي لكن لا أستطيع الرد على تعليقات الزوار عند الضغط على
رد يختفي كل شئ اتمنى أن تفيدوني
الايميل : ishakess.sa@gmail.com
شكرا

Reply
avatar
3/05/2016 delete

السلام عليكم
أولا شكرا لكم على المجهود الطيب الذي تبذلونه
فقط عندي مشكلة و أتمنى منكم مساعدتي
عندي صندوق التعليقات يعمل عادي لكن لا أستطيع الرد على تعليقات الزوار عند الضغط على
رد يختفي كل شئ اتمنى أن تفيدوني
الايميل : ishakess.sa@gmail.com
شكرا

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا