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

[full_width]

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

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

أهلا و سهلا بكم زوار الموسوعة

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

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

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

للاضافة

قم بالبحث عن الكود التالى

 ]]></b:skin>

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

.comments-tabs.simpleTab .tab-content{background-color:transparent;padding:0;margin-top:20px}

.comments-tabs.simpleTab{border:1px solid #EEE;padding:15px;margin-top:25px;margin-bottom:25px}

.comments-tabs.simpleTab .tab-wrapper li a{border-radius:3px;text-transform:uppercase;background-color:#BBB}

.comments-tabs.simpleTab .tab-wrapper li a.activeTab{background-color:$(main.color)}

.comment-form p{background:#fff;padding:5px;width:98%;border:1px solid #f1f1f1;color:#777;font:14px Droid Arabic Naskh;margin:0 auto;margin-top:10px;line-height:21px;}

.comment-form p:before{content:'\f05a';float:right;font:39px fontawesome;width:41px;color:#ccc;height:41px;margin:0 5px;}

.comments-content{background:#f9f9f9;padding:5px;border:1px solid #DDD;margin:5px;position:relative;}

.comments .avatar-image-container{float:right;max-height:50px;overflow:hidden;width:50px;padding:2px;background:#fff;border:1px solid #eee;margin:0 7px;}

.comments .avatar-image-container img{width:100%;max-width:100%;}

.comments .comment-block {

background: none repeat scroll 0% 0% #F6F6F6;

margin: 0px 73px 0 14px !important;

position: relative;

border: 1px solid rgba(200, 200, 200, 0.54);

color: #818F96;

}

.comment-header a {

color: #999;

text-shadow: 1px 1px #FFF;

font-size: 13px;

font-weight: 100;

line-height: 1.6;

font-family: ge_hiliregular;

}

.comments .comment-block:after {

content: "";

position: absolute;

bottom: -3px;

right: 0px;

color: #468847;

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLP81lqR-GpBcmeHfKPvLFkC9Q8DEKQHt2Zba0Gp623UmVsjP7QE40ngIKGUUcxBTFd3VWWn5h4QFqazK5nWk325I1Y-VGea39qwnLr7wt9GlvfSRR7JKaXioXlv54foUsDgIGVbAcfak/s1600/bg_color.png') repeat scroll 0% 0% transparent;

height: 3px;

width: 100%;

}

.comments .comments-content .comment:first-child {

padding-top: 0px;

}

.comments .comments-content .comment {

margin-bottom: 3px;

padding-bottom: 0px;

}

.comment-header{display:inline-block;border:1px solid #eee;border-right:0;border-top:0;padding:1px 10px 0 10px;}

.comments .comment-block:before{content:'\f0da';position:absolute;font:30px fontawesome;top:15px;right:-11px;color:#E8E8E8;}.comment-content{padding:20px;}

.comment-actions a{

background:#fff;

color:#6F6F6F;

padding:0 10px;

padding-top:2px !important;

padding-left:10px !important;

font-size:12px !important;

-webkit-border-radius:5px;

-moz-border-radius:5px;

border-radius:5px;

margin:2px;

border:1px solid #eee;

display:inline-block;

}

.comments .comments-content .user a {

float: right;

margin: -1px -10px 0px 10px;

padding: 0px 5px;

height: 23px;

color: #468847;

background-color: #DFF0D8;

border-color: #D6E9C6;

}

.comments .comments-content .user a:before{

content:'\f0d9';

font: 19px fontawesome;

float: left;

position: relative;

left: -12px;

top: 2px;

color: #DFF0D8;

text-shadow: none;}

.comments .comments-content .user a:after{

content:'\f14b';

font: 17px fontawesome;

float: right;

margin: 0px 0px 0px 8px;

position: relative;

top: 2px;

padding: 0px 2px;

color: #468847;

text-shadow: none;

}

.comments .item-control {

display: inline-block;

}

.comments .continue a {

font-family:normal 14px GESSTwoMediumRegular,tahoma, arial;

font-size:12px;

font-weight:normal;

color:#888888;

}

.comments .comment-actions a,.comments .comment-replies .comment-actions a {

margin-top:8px;

margin-bottom:8px;

}

.comments .comment .comment-actions a,.comments .comment .comment-replies .comment-actions a {

font-weight: normal;

padding: 3px 15px;

background: #fff;

color: #6F6F6F;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin: 2px;

border: 1px solid #eee;

display: inline-block;

font-family: ge_hiliregular;

font-size: 15px;

}

.comments .comment-actions a:before {

font-family:FontAwesome;

font-style:normal;

font-weight:normal;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

line-height:11px;

font-size:11px;

color:#888;

}

.comments .comment-actions a:before {

content:"\f112";

margin: 0 0 0 5px;

color: #888 !important;

}

.comments .continue a:before {

font-family:FontAwesome;

font-style:normal;

font-weight:normal;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

line-height:11px;

font-size:11px;

color:#888;

}

.comments .continue a:before {

content:"\f112";

color: #888 !important;

}

span.item-control.blog-admin a:before{content:'\f014';font:14px fontawesome;margin:0 0 0 5px;color:#ccc;}

.comments .continue a{background:#fff;color:#6F6F6F;padding:3px 10px!important;font-size:15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-weight:500!important;border:1px solid #eee;display:inline-block;font-family: ge_hiliregular;}

.comments .continue a:before{content:'\f124';font:12px fontawesome;margin:0 0 0 10px;display:inline-block;color:#ccc;}

.comments .comment .comment-actions a:hover,.comments .continue a:hover{

text-decoration:none;background:#eee;}

.comments {

background: none repeat scroll 0% 0% #F9F9F9;

padding: 15px;

border: 1px solid #DDD;

margin: 5px 0 0 0;

position: relative;

}

.feed-links {

display: none;

}

.top-comment-widget-menu {

background: none repeat scroll 0px 0px #FFF;

border-color: #DDD;

border-style: solid;

border-width: 1px 1px 5px;

float: right;

margin: 20px 0px;

width: 953px;

}

.top-comment {

float: right;text-align: center;

font-family: "ge_ss_threeregular";

font-size: 14px;

list-style: none outside none;

margin: 10px 0;

text-transform: uppercase;

width: 50%;

cursor: pointer;

}

.top-comment.selected {

cursor: pointer;

}

#comments h4 {

display: inline;

padding: 4px 8px;

line-height: 45px;

}

#comments h4,.comments.comment-header,.comments .comment-thread.inline-thread .comment{position:relative}#comments h4{background:#73C4D1}

#comments h4{font-size:17px}

#comments h4{font-weight:normal;color:#fff}

#comments h4:after {

content: "";

position: absolute;

bottom: -10px;

right: 10px;

border-top: 10px solid #73C4D1;

border-left: 20px solid transparent;

width: 0px;

height: 0px;

line-height: 0;

}

.icon.blog-author:after {

content: "الكاتب";

background: #f66;

color: #FFF;

padding: 2px 16px;

border-radius: 1px;

position: absolute;

left: 0px;

margin-top: -3px;

font-size: 14px;

font-family: ge_hiliregular;

}

.comment-content {

padding: 20px;

font-family: ge_hiliregular;

}

.top-comment.blogico:before {

content: "\f0d5";

font-family: fontawesome;

font-size: 18px;

margin-left: 15px;

color: #F66;

}

.top-comment.faceico:before {

content: "\f09a";

font-family: fontawesome;

font-size: 18px;

margin-left: 15px;

color: #627AAC;

}

.comments .comments-content .comment:first-child{padding-top:0}

و أخيرا قم بحفظ القالب و استمتع بالنتيجة

اذا أعجبكم الموضوع قم بعمل كومنت و قول رأيك