عرض مشاركة واحدة
قديم 01-23-2013, 07:29 PM   #1
saheralialy
مدون مميز
 
الصورة الرمزية saheralialy
 
تاريخ التسجيل: Jul 2012
المشاركات: 389
افتراضي تغيير شكل التعليقات إلى شكل أخر جميل وجذاب



المرحلة الأولى : ضبط إعدادت التعليقات المترابطة من لوحة التحكم

1 - قم بتسجيل الدخول إلى لوحة التحكم الخاص بمدونتك بلوجر.
2 - الأن توجه إلى إعدادت.
3 - بعد الدخول إلى إعدادات في القائمة الجانبية أنقر على أخرى.
4 - في السماح بخلاصات المدونة إجعلها كامل كما في الصورة بعدها قم بحفظ.

5 - بعد حفظ الإعدادت توجه إلى مشاركات وتعليقات .
6 - الأن موقع التعليقات إجعلها مضمن .
المرحلة الثانية: إضافة الكود إلى القالب

1-في لوحة التحكم الخاصة بمدونتك توجه إلى قالب بعدها تحرير HTML ثم أنقر على متابعة.
2- ثم إعمل علامة على توسيع قوالب عناصر واجهة المستخدم.
3- الأن قم بالبحث عن :
كود بلغة HTML:
 <b:include data='post' name='comments'/>

قم باستبداله بـهذا الكود
كود بلغة HTML:
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/></b:if>

ملاحظة : إذا وجدت كودين أو فقم كذلك بإستبدالهم .

4-الأن قم بالبحث مرة أخرى عن :
كود بلغة HTML:
 ]]></b:skin>
وقم بإضافة الكود قبله :
كود بلغة HTML:
  .comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 14px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:right;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF',  endColorstr='#009999');
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999',  endColorstr='#0099FF');
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF',  endColorstr='#0099CC');
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 6px -4px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 12px;
float: left;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background:  url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc  AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;)  no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background:  url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA  AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB  JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: right;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-right: 48px;
  position: relative;
padding: 20px 15px 20px 15px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}
إنتهى الدرس أتنمى أن أكون قد وفقت في الشرح وأي مشكلة ضعها في التعليقات

منقول للفائدة


الدعم العربي

saheralialy غير متواجد حالياً   رد مع اقتباس