 |
| تغيير شكل التعليقات الى شكل احترافى مثل تعليقات مدونة موسوعة بلوجر |
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته
أهلا و سهلا بكم زوار و متابعى مدونة سمارت المعلوماتية فى هذه التدوينة أحبابى فى الله أقدم اضافة رائعة جدا من اضافات بلوجر حيث تقوم هذه الاضافة باعطاء مدونتك الكثير من الجمال الذى لا يوصف انها اضافة تعمل على تغيير مدونتك من مدونة عادية الى مدونة احترافية و أنيقة جدا تعمل على جذب الزوار الى مدونتك و تجعل هذه الاضافة شكل مدونتك يرسخ فى عقل الزائر نظرا لما فيها من جمال و بساطة هذه الاضافة هى تغيير شكل تعليقات بلوجر الى شكل جميل و أنيق كما هو الحال فى مدونة موسوعة بلوجر الخاصة بى أو ما يعنى هذه المدونة و لكى تعلم أخى الزائر حقيقة الاضافة و ترى جمالها قم بالتعليق على الموضوع و ستجد و سترى شكل التعليقات بنفسك و بالتالى ستكون واثقا من الاضافة و اعلم اخى الزائر أن مدونة موسوعة بلوجر تقدم مواضيع حصرية جدا جدا أى أنك لن تجد هذه الاضافة الا فى مدونة موسوعة بلوجر فقط و ليست فى أى مدونة أخرى و هناك من يقوم بنقل المواضيع من المدونة و لكن مونة موسوعة بلوجر تعمل على كل ما هو جديد فى عالم بلوجر.
مميزات التعليقات الجديدة
- شكل أنيق و جميل و رائع.
- مريح جدا للعين و بالتالى الزائر لا يمل منها.
- اختلاف شكل تعليقات صاحب المدونة أو أدمن المدونة عن تعليقات الزوار و ذلك عن طريق و ضع كلمة الكاتب بجوار التعليق الخاص بالأدمن.
- شكل التعليقات احترافى و لن تجده الا فى مدونة موسوعة بلوجر.
معاينة الاضافة
لكى تقوم بمعاينة الاضافة أخى الزائر و أحبابى فى الله كل ما عليك هو أن تقوم بوضع تعليق أسفل الموضوع و شاهد بنفسك جمالية و احترافية و أناقة شكل التعليقات الجديدة.
طريقة الاضافة الى مدونتك
قم بالذهاب الى قالب و من ثم تحرير html
و بعد ذلك قم بالبحث عن الكود التالى
]]></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/AVvXsEhOuD2O7aAycL_DFNFGbAVKWeAlgSpZbo2cA4WIWNS9kqXM6cvHQb9EPXMOCHWeQUYbboJ_1TlBM1uH64SEndEumlSjxIlbFL1a6SAbUdO-AbeI0YcT3NYyw9SHrt9nk6igI8MlaQbKdHI/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}
و بعد ذلك قم بحفظ القالب و شاهد النتيجة بنفسك
.
.
.
.
.
.
.
.
و فى الختام سلام و قبل السلام اترك تعليق تشجيعا للقائمين على المدونة.
ببب
ردحذفنمتنمنم
ردحذف