[درس] تغيير شكل تعليقات بلوجر الإفتراضية إلى شكل إحترافي

[درس] تغيير شكل تعليقات  بلوجر الإفتراضية إلى شكل إحترافي

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

طبعا بعد قيامنا بتطوير هذا الصندوق وذلك عن طريق أكواد CSS و HTML قررنا أن نعطيكم هذا الكود المطور من طرفنا لتستعملوه في مدوناتكم .

ملحوظة مهمة : هذا الكود قد لا يعمل مع بعض القوالب إما لإختلاف بنيتها أو لعدم توافق الكود مع CSS مع كود التعليقات HTML 

طريقة التركيب:

1- إذهب إلى لوحة التحكم بلوجر ثم إلى تحرير القالب .

2- بعد ذخولك لتحرير القالب احرص على أخد نسخة احتياطية تفاديا لوقوع مشكل .

3 - ابحث عن .comment باستخدام Ctrl+F.

نظرا لتعدد الأكواد المشابهة لـ .comment فإن الكود المطلوب يكون غالبا على هذا الشكل:

4- قم بتحديد الكود كله واستبدله بالكود التالي .

.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 14px; margin-bottom: 16px; font-family:DroidKufi-Regular; text-align:right; line-height: 1.4em; } .comments .continue a, .comments .comment .comment-actions a { display:inline; font-family:DroidKufi-Regular; 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; 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(startCo lorstr='#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(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(startCo lorstr='#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:13px; } .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; font-size:17px; font-family:DroidKufi-Regular; } .comments .comments-content .user a { color: #0099FF; } .comments .comments-content .user a:hover { text-decoration: none; color: #CCC; } .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-size: 12px; font-family:DroidKufi-Regular; float: left; } .comments .comments-content .comment-content { font-family:DroidKufi-Regular; 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: 500px; } .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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: right; } .comments .avatar-image-container img { width:50px; hieght:50px; } .comments .comment-block { margin-right: 48px; position: relative; padding: 20px 15px 20px 15px; background: #F7F7F7; border: 1px solid #000; overflow: hidden; border-image: initial; width:500px; }

الأن ماعليكم سوى حفظ القالب طبعا تستطيعون تغيير الألوان لتناسب مدوناتكم

إذا وقعتم في مشكل أو لم يعمل معكم الصندوق بشكل جيد ضعوه المشكل في التعليق وسيتم حله بإذن الله

By glok

Similiar tagsحصرياتbloggerinternet