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







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

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

1-الذهاب الى القالب تحرير HTML

2- قم بالبحت عن ]]></b:skin>

3- ضع الكود التالي فوقه /اعلى

رمز Code:
/*----------- التعاليق ----------*/
#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(http://3.bp.blogspot.com/-oXtMYI4_PL4/UbCYKeISeSI/AAAAAAAABWk/Zx8WKou8CkU/s1600/Verificon.png);
}
.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 .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;
}

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


المنقوشي : http://www.traidnt.net/vb/traidnt2544414