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

السلام عليكم ..

التعليقات .. التعليقات هي وسيلة التواصل بين أصحاب المواقع والمدونات وزوارهم وهي من أهم ما يحتويه أي موقع أو أي مدونة ... فمن خلالها يمكن للزائر وضع ردوده إما استفسارات عن مشكل أو تشجيع ,شكر أي شيء ...

ومن المهم جدا الإهتمام بشكل التعليقات داخل موقعك وإعطائها تنسيقا إحترافيا يجعله لافتا للإنتباه ويجعل الزائر محبا لوضع التعليق فيه فقط لأن شكله أعجبه ..

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

الشكل الدي ستظهر به هو كما بالصورة أعلاه :

طريقة الإضافة هي كالتالي :

بعد تحرير القالب إبحت مستعينا بالأزرار ctrl+f

عن الكود التالي : ]]></b:skin>

تم أضف قبله مباشرة هذا الكود :

/*--- comments By bloggxp.com ----*/
.comments h2 {
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    margin: 0px;
    padding: 5px;
    background: none repeat scroll 0% 0% #E74C3C;
    color: #FFF;
    font-family: GESSTwoMediumRegular;
}
 .comments .comment-block {
background: #F9F9F9;
color: #555;
box-shadow: 0 4px 10px #EEEEEE;
position: relative;
margin-top: 10px;
margin-right: 89px;
padding: 10px;
border: 4px solid #E74C3C !important;
border-radius:10px;
font-family: droid arabic kufi;
font-size: 14px;
}
.comment-thread li .comment-block:before {
position: absolute;
display: block;
right: -28px;
color: #E74C3C;
content: "\25C4";
font-size: 30px;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0px 0px 0 -28px;
padding: 0px;
border: 7px solid #E74C3C;
border-radius:60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}
.comments .comment-thread.inline-thread {
background: none;
}
.comments .continue {
border-top: 0px solid transparent;
}
.comments .comments-content .datetime {
float: left;
font-size: 11px;
}
.comments .comments-content .user a{
font-size: 18px;
color: #498EC9;
}
.comments .comments-content .datetime a:hover{
color: #777;
text-decoration: none;
}
.comments .comments-content .comment:first-child {
padding-top: 0px;
}
.comments .comments-content .comment {
margin-bottom: 0px;
padding-bottom: 0px;
}
.comments .continue a {
padding: 0px;
}
.comments .comments-content .icon.blog-author {
background-image: none;
}
/*--- comments By bloggxp.com ----*/

الآن قم بحفظ القالب وقم بمعاينة النتيجة

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

الردود لا تزيدني إلا حماسا على وضع المزيد من اجلكم :)

مدونة نجوم الويب

بحث هذه المدونة الإلكترونية

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

تعليقات

إرسال تعليق