إشترك في القائمة البريدية.

تغيير شكل التعليقات إلى شكل أخر جميل وجذاب (للبلوجر)



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


لنبدأ على بركة الله


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

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


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

المرحلة الثانية: إضافة الكود إلى القالب 

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

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

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

4-الأن قم بالبحث مرة أخرى عن :
]]></b:skin>
وقم بإضافة الكود قبله :

.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=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.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=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.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=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.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;
}
إنتهى الدرس أتنمى أن أكون قد وفقت في الشرح وأي مشكلة ضعها في التعليقات 

إشترك في مدونتنا وتوصل بأخر المواضيع.

إشترك في القائمة البريدية

32 تعليق

نموذج تعليقات رائع
بارك الله فيك

25 مايو، 2012 11:06 م

وعليكم السلام ورحمة الله وبركاته
جزاك الله خيراً
وتم التركيب بنجاح
http://muslimcd.blogspot.com/2012/05/blog-post_06.html

28 مايو، 2012 1:28 م

جميل اخي ماشاء الله

بارك الله فيك

4 يونيو، 2012 5:08 ص

السلام عليكم..ما زلنا في انتظارك اخي !!

4 يونيو، 2012 11:13 ص

@Charaf Eddin Atj

السلام عليكم يا أخي لقد حدثت لي مشاكل كثيرة وأنا أعتذر ولحد الأن فأنا غارق فيها وإن شاء الله عندما أنتهى من هذه المشاكل سوف أنجز لك ما تريد ولكن في هذه الظرفية فأنا أعتذر

سلام عليكم
اخي انا كنت اريد نمذج تعليقات مثل الذي عندك وهذه مدونتي
http://araby-egy.blogspot.com/
وحدث لي خطاء كبير

11 يونيو، 2012 3:12 ص

@مدونة بيت البلوجر
مو مشكل اخي فقد قمت بالتعديلات الضرورية لم يتبقى فقط بعضها جزاك الله خيرا واعانك الله

11 يونيو، 2012 6:11 ص

تم بنجاح:

http://newsinfo12.blogspot.com/2012/06/blog-post_09.html

غير معرف
22 يونيو، 2012 4:37 م

تم تركيبه لاكن كان يوجد عندى صوره تقول اترك بصمتك وشاركنا برئيك من يوم ما ركبت ذات الاضافه والصوره اختفت ارجو حل مشكلتى

غير معرف
22 يونيو، 2012 4:42 م

واريد ايضا كود التحكم فى حجم صوره المعلقين ولك جزيل الشكر

غير معرف
1 يوليو، 2012 3:51 م

جزاك الله خيرا أخي

8 يوليو، 2012 4:26 ص

حد يرد عليا عاوز اعرف التحكم فى حجم صور المعلقين لانها ظاهره عندى مش كامله

8 يوليو، 2012 10:04 ص

@Alfrsan-Tvالسلام عليكم يا أخي ممكن تعطينا رابط المدونة

11 يوليو، 2012 4:19 ص

انا شلت الاضافه عشان المشاكل الى كانت فيها انا كان عندى صوره بتقول ..
اترك بصمتك وشاركنا رئيك ول ما حطيت الاضافه دى اتشالت الصوره
وصور المعلقين مبقتش ظاهره كامله لو عوزنى اركب الاضافه تانى وتشوفها قولى !

14 يوليو، 2012 6:14 ص

رائع .. شكراً لك أخي الحبيب

islam
14 يوليو، 2012 7:16 م

الإضافة تتعارض مع متصفح إنترنت إكسبلوور مما سيفقد من يركبها جزء من الزوار ,,, وجب التنبيه

مدونة بيت البلوجر
15 يوليو، 2012 3:27 م

@islam
السلام عليكم
يا أخي أود أن أقول لك أنه بخصوص التعارض فبخصوص متصفح أنترنت إكسبلور فهي تتعارض مع المتصفحات القديمة وليست الجديدة وهذا ينطبق على جميع المتصفحات القديمة
وشكرا

16 أغسطس، 2012 7:50 ص

السلام عليكم اضافة جميلة ....
انا لدى استفسار عن خاصية اضافة رد الموجودة فى تعليقات مدونتكم بيت البلوجر
اريد ان اضع هذه الاضافة فى مدونتى لو سمحتم

غير معرف
25 أغسطس، 2012 2:07 م

حلو

5 سبتمبر، 2012 12:47 م

اضافه جميله شكرا لك
http://news-cool.blogspot.com/

8 سبتمبر، 2012 8:16 م

اخي الكريم ممكن كيف اميز لون رد المدير عن الزوار وشكرا جزيلا

8 سبتمبر، 2012 8:20 م

اخي الكريم خاصية الحدف ايضا غير موجودة ارجو ذكرها بالرد وشكرا

29 سبتمبر، 2012 4:02 م

شكرا لك إنت حليت لي مشكلة كبيييييييييييييرة جدا جدا كانت في التعليقات
شكرا شكرا شكرا

21 أكتوبر، 2012 1:40 م

اخي الكريم اترجاك تحل مشكلة صورة كاتب الرد تظهر نصفها

يمكنك زيارة مدونتي لترى المشكلة http://aliraqia.blogspot.se/

غير معرف
7 ديسمبر، 2012 2:23 ص

@A.M.A.M.S
السلام

غير معرف
7 ديسمبر، 2012 2:24 ص

السلام

14 ديسمبر، 2012 2:59 ص

مشكور أخي العزيو و ما رأيك في مدونتي
http://AbdouBatna.blogspot.com

غير معرف
27 ديسمبر، 2012 2:24 ص

شكرا

23 يناير، 2013 12:56 ص

لقد استفدت من الموضوع وتم اضافته لمدونتي
وشكرا

غير معرف
16 فبراير، 2013 12:28 م

مشكور

11 أبريل، 2013 6:58 م

مشكوور يا غالي

إرسال تعليق

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

أضف موقعك أو مدونتك إلى جوجل شرح بالصور

أرسل موقعك أو مدونتك إلى محرك البحث الشهير شرح كامل وبالصور ...

إقرأ الموضوع

أضف مدونتك إلى 40 دليل لكسب المزيد من الترافيك

نقدم لكم في هذا الموضوع مجموعة من المواقع ذات الترافيك العالي لإضافة مدونتك فيها وتحسين تقييمك...

إقرأ المزيد

شرح كامل لإضافة تعليقات الفايسبوك إلى البلوجر

شرح كامل ومفصل بالصور لطريقة إضافة تعليقات الفايسبوك إلى مدونتك بلوجر...

إقرأ المزيد

شرح إضافة ترقيم الصفحات لمدونات بلوجر

نتطرق في هذا الموضوع إلى شرح لطريقة إضافة ترقيم الصفحات لدى مدونات البلوجر ...

إقرأ المزيد

تحميل سكربت ووردبريس 3.3.1

حمل أحدث وأخر نسخة من السكربت الرائع ووردبريس مجانا...

إقرأ المزيد

شرح عمل مدونة بلوجر بالفيديو

شرح كامل وبالفيديو لطريقة عمل مدونة بلوجر رفقة الواجهة الجديدة للبلوجر...

Read More

إضافات