-->

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

Change-the-form-of-comments-to-a-professional-form-in-Blogger

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

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

طريقة التركيب

1-الذهاب الى القالب تحرير HTML
2- قم بالبحت عن ]]></b:skin>
3- ضع الكود التالي فوقه /اعلى 

/*----------- التعاليق ----------*/
#comments {
background-color: #fff;
padding-top: 20px;
width: 98%;
}
.comments .continue a {
background: #0d86cc;
text-align: center;
padding: 10px 0;
display: none;
}
.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 .avatar-image-container img {
border: 1px solid #ddd;
margin: -1px -1px;
}
.comment-thread {
color: #111;
}
.comment-thread a {
color: #777;
}
.comment-thread ol {
margin: 0 0 20px;
}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a {
color: #000;
}
.comments .avatar-image-container {
overflow: visible;
}
.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 .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-right: 60px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
background: #F6F6F6;
background-color: #F6F6F6;
padding: 10px;
padding-left: 0px;
padding-right: 0px;
border-radius: 4px;
border-top: 5px solid #f34246;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 452px;
margin-right: 15px;
}
#comments h4 {
padding-bottom: 5px;
color: #3f3f3f;
font-size: 25px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 10px;
margin-top: 0px;
}
.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;
color: #444;
}
.thread-chrome.thread-expanded .comment-content {
width: 435px;
line-height: 22px;
overflow: hidden;
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .datetime {
cursor: pointer;
float: left;
padding-top: 6px;
padding-left: 20px;
}
.comment-actions {
background: #f34246;
padding: 8px;
margin-right: 435px;
border-left: 0px;
border-bottom: 0px;
float: left;
margin-top: -20px;
}
.comment-actions a {
color: #fff;
gont-weight: bold;
text-decoration: none;
}
.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/AVvXsEjJRxW0ER_ZfFw0Us6TIX28zJdZT8vr7lo7B0xw19TbLK9b7kuAFqis07thbHCUY9ns5Syg0hj9rCXhG84XIuy_M89xd34Tq8BbJf72TPsN0jhYHk_q5ZKH9UCtumGVc0cPnju8Uzocya_s/s1600/Verificon.png);
}
.icon.user {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_cOh9_F5JyO8DyVh9hooNknLFTG4mf3UX92PzipqPQIyvgLZamkf31ElwdeDHnYqVV-s4JnjwLaPeIAdVCdbbUceSNr9QEAXDhUHXxLcLqKjGa1Wh54vUUSaaZEDNniDXy74bV8MKsgn/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.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 .comment-thread.inline-thread .user a {
font-size: 13px;
margin: 0px;
padding: 0px;
}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img {
width: 36px;
max-width: 36px;
height: 36px;
border: 0px;
max-height: 36px;
margin-right: 5px;
}
.comments .continue {
border-top: 0;
width: 100%;
}
#comment-editor {
width: 98%!important;
}
.comment-form {
width: 100%;
max-width: 100%;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}

4- اضغط حفط

طريقة التعديل

تغير اللون الأحمر لشريط ولون زر رد ابحث عن #f34246 
هناك أتنين واحد لتغير لون الشريط و التأني لتغير لون زر رد

هناك 10 تعليقات:

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *