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

السبت، 9 أبريل 2016

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

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

]]></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/AVvXsEgp7OOlsESj_1RVZVJzP4oc0xXuTbLpV8l7p5l1MPlCxxHK0YOGt3Tyx1wPlFJTok9u0Dur3S7K0o4zOzRy-GxyM8TYsQyCagi-ZmVZRwHot6VHPBw0Fr69O7P-0u7eaI-xJXmZMoptrG4/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}

و أخيرا قم بحفظ القالب

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