الاثنين، 27 يناير 2014

تعليقات بلوجر بشكل احترافي رائع

نقدم لكم اليوم إن شاء الله درس حول تغيير شكل تعليقات بلوجر، بحيث سوف نجعله بشكل رائع و جميل كما توضح الصورة أسفله. 
و بطبيعة الحال، لِمن لديه دراية جيدة بخصوص الـــ CSS و الــHTML، يمكنه تغيير نوع الخط و ألوان الخطوط كما يشاء. 
المرحلة الأولى : ضبط إعدادت التعليقات المترابطة من لوحة التحكم.
قم بتسجيل الدخول إلى لوحة التحكم الخاص بمدونتك بلوجر.
ثم توجه إلى إعدادت.
بعد الدخول إلى إعدادات في القائمة الجانبية أنقر على أخرى. 
في السماح بخلاصات المدونة إجعلها كامل (كما في الصورة أسفله)، بعدها قم بحفظ.
بعد حفظ الإعدادت توجه إلى المشاركات و التعليقات و المشاركة . 
الآن موقع التعليقات إجعلها مضمن. (كما في الصورة أسفله)

أولا و قبل كل شيء، قم بحفظ نسخة احتياطية من قالب مدونتك.

المرحلة الثانية: إضافة الكود إلى القالب
في لوحة التحكم الخاصة بمدونتك توجه إلى قالب بعدها تحرير الـــــ HTML ثم أنقر على متابعة.
ثم إعمل علامة على توسيع قوالب عناصر واجهة المستخدم.

الآن قم بالبحث عن رمز الكــــــــــــود:
<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>

ملاحظة : إذا وجدت كودين او اكتر استبدلهم جميعا 

المرحلة الثالثة: إضافة خصائص الـــCSS: 
الآن قم بالبحث مرة أخرى عن الكــــــــــــود:
]]></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 1px1px rgba(0,0,0,.3);color:#FFF;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2pxrgba(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, leftbottom, from(#009999), to(#0099FF));background: -moz-linear-gradient(top, #009999, #0099FF);filter:progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#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 01em;}.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: 10px16px;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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;)  no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow {background:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/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;}

هذا كل شيء و أتمنى أن يعجبكم الموضوع.
و إذا واجهتكم أية مشاكل أو لديكم أي استفسارات، نحن رهن الإشارة و دائما في الخدمة. 
نرجو لكم كل التوفيق. 

الموضوع السابق
الموضوع التالي

0 التعليقات: