تغيير شكل التعليقات إلى شكل احترافية سوف نقدم لكم اكواد تعمل على تغيير شكل التعليقات الذي في بلوجر الشكل الافتراضية إلى شكل احترافي حيث ان تعليقات بلوجر الافتراضية تعرض التعليقات بشكل بدئي أو كلاسلكي لأكن في هده الموضوع سوف نقوم بتغيره عبر اكواد 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
هناك أتنين واحد لتغير لون الشريط و التأني لتغير لون زر رد
لتبلتبت
ردحذفمش بيشتغل
ردحذفممكن رابط المدونة
حذفازاي اشيل تعليقات disqus
ردحذفبحث في html المدونة لكنني لم اجد الكود skin
ردحذفما اشتغلت
ردحذفتحياتي على هذا الموقع الرائع و شكرا لك على المواضيع المنشورة
ردحذفسلام عليكم
ردحذفشكرا
ردحذفمشكور على المحتوى
ردحذفبامكانك الاطلاع على المحتوى الطبي الذي ننشره