Layout Style

Full Width Boxed

Background Patterns

Color Scheme

Top Ad unit 728 × 90

آخر التدوينات

random

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

[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}
و أخيرا قم بحفظ القالب و استمتع بالنتيجة
اذا أعجبكم الموضوع قم بعمل كومنت و قول رأيك

تغيير شكل التعليقات فى مدونات بلوجر الى شكل احترافى جدا Reviewed by Unknown on 9:46 م Rating: 5

هناك 8 تعليقات:

  1. شكرا على التدوينة الرائعة واصل اثراء المحتوى العربي
    http://tknielantrnat.blogspot.com/

    ردحذف
  2. رائع أخي واصل مشوارك
    http://infospaace.blogspot.com/

    ردحذف
  3. محتوى مدونة جيد ومظهرها جميل متمنى لك ايضآ النجاح والتوفيق ^^

    http://tech7yatak.blogspot.com

    ردحذف
  4. السلام عليكم
    شكرا على هذا الموضوع المميز
    أخي قمت بتطبيق شرحك لكن للأسف لم تظهر لدي الأيقونات كما أنه لدي مشكل بتداخل الصورة مع كلمة ( صاحب التعليق )
    رجاءا تفقد ذلك و أخبرني عن السبب
    http://www.dz-sat.com/

    ردحذف
  5. لاصحاب الخبرة مارايكم في قالب مدونتي، انا لا اتكلم من ناحية جمالية انا اتكلم من ناحية سيو

    http://mo3awindz.blogspot.com

    ردحذف

All Rights Reserved by الموسوعة الشاملة © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.