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

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله و بركاته

أهلا و سهلا بكم زوار أنس للمعلوميات

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

لذلك أحبابى محبى أنس للمعلوميات أقدم لكم كود لتغيير شكل التعليقات الى شكل احترافى جدا و جذاب

* غير شكل واستايل تعليقات بلوجر الى شكل جذاب والوان رائعه تناسب جميع الاذواق

* شكل التعليقات عامل كبير فى جذب الزوار للتعليق على مشاركاتك واذا كنت تملك تعليقات بلوجر بهذا الشكل الجميل فسوف تجذب كل من يدخل الى مدونتك للتعليق

1. للمعاينة قم باضافة تعليق اسفل الموضوع 

كل ما عليك فعله لتركيب شكل التعليقات بلوجر الجديد

•  اذهب الى لوحة تحكم مدونتك اختر قالب اختر تحرير HTML
• أولا عليك التركيز لأنك سوف يكون عليك أستبدال أكواد من مدونتك
• وعليك أن تقوم بأخذ نسخة من مدونتك أولا

1. الأن قم بأستبدال كود أستايل التعليقات الخاص بمدونتك

• بهذا الكود الخاض بالتعليقات css 
• او بامكانك وضعه فوق  ]]> مباشرة

#comments{
margin-top:15px;
padding:15px;
background-color:#fff;
margin-bottom:30px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
#comments h4{text-align: right;font-weight: 500;font-size: 16px;padding-bottom: 10px;border-bottom: 2px solid #ccc;line-height: 24px;position: relative;color: #0099ff;margin-bottom: 20px;}
#comments h4::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #0099ff;bottom: -2px;left: initial!important;right: 0;}
#comments h4:after {content: "\f0e5";display: block;background-color: #0099ff;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
.paging-control-container{text-align:center;width:100%;float:right;margin-bottom:20px;margin-top:10px}
.paging-control{background-color:#3B5998;color:#fff;padding:10px;height:40px;line-height:13px;display:inline-block}
.unneeded-paging-control{color:#FFFFFF;background-color:#343434;padding:10px;height:40px;line-height:13px;display:inline-block}
.comment_inner.comment_admin{margin-top:10px}
.comment_header{float:right}
.comment_avatar{width:65px;height:65px;float:right;margin-left:15px}
.comment_avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #0099ff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}
.comment_body{
overflow: hidden;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    background-color: #eee;
    margin-right: 80px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}
.comment_name{
border-bottom: 1px solid #ccc;
    padding: 5px 10px 0px 5px;
    background-color: #fff;
    overflow: hidden;
line-height: 32px;
}
.comment-content{font-size:15px;color:#555;padding:20px;text-align:justify;background-color:#ddd}
.deleted-comment{font-size:15px;color:#555;display:block;padding:10px 20px 20px 20px}
.comment_author_flag{display:inline-block;width:initial;margin:2px 12px 0 0;color:#FFF;font-size:13px;background:#DD4B39;padding:0 5px 0px 5px;border-radius:2px}
.comment_service{float:left}
.comment-delete{
    padding: 2px 10px;
    display: inline-block;
    border-radius: 2px;
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
    color: #FFFFFF;
    background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
    line-height: 26px;
    margin-top: 2px;
    font-size: 13px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}
#comments .comment_reply{
font-size: 18px;
display: inline-block;
    margin-top: 10px;
    padding: 0;
    color: #fff;
    text-align: center;
width: 100%;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19);
    background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
}
.comment_avatar_wrap{width:65px;background:#fcfcfc;text-align:center}
#comments .comment-form p{background:#ddd;padding:0 15px 10px 15px;margin:5px 0 15px;color:rgba(0,0,0,.8);font-size:15px;line-height:normal;border-radius:3px;position:relative;max-width:100%;border:1px solid #ccc}
#emo-box,#hide-emo{display:none}
.small-button a,.small-button1 a{
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
color:#fff;font-size:13px;cursor:pointer;margin:15px 5px 5px 0;text-decoration:none;text-transform:none;text-shadow:none;border-radius:3px;display:inline-block;padding:5px 10px;box-shadow:0 1px 2px rgba(0,0,0,0.1)
}
.comment_emo_list .item{
float:right;
display:block;
text-align:center;
margin:5px 5px 0 0;
width:50px;
border-radius:2px;
height:65px
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
-moz-transition: -moz-transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
transition: transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
}
.comment_emo_list span{display:block;margin:5px 0 5px 0;letter-spacing:1px;color:#fff}
.comment_emo{width:25px;height:25px;margin-bottom:-10px}
.comment_wrap{
    background: #fafafa;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #0099ff #0099ff #0099ff #0099ff;
    padding: 10px;
    margin-bottom: 10px;
}
.comment_wrap:before {
    text-align: center;
    position: relative;
    content: 'الردود';
    left: 8px;
    top: -6px;
    font-size: 18px;
    padding: 5px 20px;
    padding-left: 8px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent;
}
#comment_block {
    overflow: auto;
    background: #f5f7f7;
    overflow-x: hidden;
}
.comment_inner.comment_admin {
    margin-top: 10px;
}
.comment_date {
    font-size: 14px;
    color: #555;
}
.comment_inner.comment_admin .comment_avatar img {
    border-radius: 0;
    border: 3px solid #375e97;
}
.comment_inner.comment_admin .comment_reply {
    background: #375e97!important;
}
.comment_inner.comment_admin .comment_body {
    border: 1px solid #fff;
}
.comment_inner.comment_admin .comment_name {
    border-bottom: 0 solid #ccc;
    background: #0099ff -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.05) 25%,transparent 25%,transparent 50%,#2dabff 50%,rgba(255, 255, 255, 0) 75%,rgba(230, 70, 70, 0) 75%,transparent);
}
.comment_inner.comment_admin .comment_name a {
    color: #fff;
}
.comment_inner.comment_admin .comment_author_flag {
    background: #385e95;
}
.comment_inner.comment_admin .comment-delete {
    background: #375e97;
}
.comment_inner.comment_admin .comment-content {
    color: #fff;
    background: -webkit-linear-gradient(left, rgba(45, 69, 98, 0.65) 0%, #2d4562 100%), -webkit-linear-gradient(left, #4d90fe 0%, #666 100%);
}

1. الأن عليك التركيز فى الأكواد الأتيةعليك الأن أن تقوم بالبحث عن هذا الكود فى مدونتك
2. ثم تقوم بتحديد الكود كامل كما فى الصورة التالية

1. ثم تقوم بأستبدال الكود فى مدونتك بالكود التالى

 
   
 
   
 
   
 

1. الأن قم بالبحث عن الكود التالى هذا
2. الأن تقوم ايضا بتحديد الكود كامل كما فى الصورة أعلى
3. ثم تقوم بوضع بدل منه الكود هذا

1. الان مع اخر كود وهو نفس ما سبق
2. تقوم بالبحث عن هذه الكود
3. وايضا تقوم بتحديده كامل كما فى الصورة فوق
4. وتقوم بوضع بدل منه الكود التالى