أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

إضافة شكل جذاب لتعليقات بلوجر

بسم الله الرحمان الرحيم 
قامت بلوجر مؤخرا بعمل نظام تعليقات جديد يتيح العديد من الخيارات الإضافيه لمستخدمى بلوجر, وكان ذلك شيئا جميلا, لكن تخلل ذلك التطوير فى البدايه بعض العيوب والأخطاء ولكن سرعان ما تغلبت بلوجر على كل هذه الأخطاء لتصل بنا إلى نظام تعليقات جميل جدا.
ولكن ينقص هذا النظام التعليقى الجديد شكلا جذابا, وهو الأمر الذى دفع الكثير من المدونين إلى التخلى عن منصة التعليقات الجديده هذه. وأنا الآن أدعو كل المدونين ومستخدمى منصة بلوجر للتدوين أن يراجعوا رأيهم بإستخدام نظام بلوجر الجديد للتعليقات وذلك لأنى قد أحضرت لكم تعديلا على أكواد css سيوفر ظهور هذه التعليقات بشكل جذاب جدا, كما يمكنك من التعديل على هذا الشكل على حسب إختياراتك.
  

لنبدأ الشرح على بركة الله
  
أولا وكالعادة نذهب إلى
للوحة التحكم >> تصميم>> تحرير html

و ما عليك فعله هو أن تبحث عن الكود التالى
]]></b:skin>

وقبله مباشرة قم بوضع الكود التالى
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px} .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right} .comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer} .comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none} .comments .comments-content .inline-thread{padding:0} .comments .comments-content .comment-thread{margin:8px 0} .comments .comments-content .comment-thread:empty{display:none} .comment-replies{margin-top:1em;margin-right:40px;background:#fff} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .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:normal} .comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none} .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px} .comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none} .comment-content{margin:0 0 8px;padding:0 5px} .comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px} .comments .comments-content .owner-actions{position:absolute;left:0;top:0} .comments .comments-replybox{border:none;height:230px;width:100%} .comments .comment-replybox-thread{margin-top:0} .comments .comment-replybox-single{margin-top:5px;margin-right:48px} .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:0} .comments .comments-content .loadmore.loaded{max-height:0;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-left: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} .avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important} .comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important} .comments .comment-block{margin-right:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px} @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}

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

آخر مقالات المدونة

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

  1. بالمناسبة لمن لديه استفسار فل يضعه بتعليق ةشكرا

    ردحذف
  2. عندي التعليقات تظهر يسار كيف أجعلها تصطف جهة اليمين؟

    ردحذف
  3. يجب عليك اولا تطبيق اللغة العربية بمدونتك
    إذهب للوحة التحكم ثم أساسي ثم اللغة والتنسيق إختر اللغة العربية لو كانت مفعلة سابقا فهاته الأكواد هي التي تستطيع مساعدتك
    float:right
    او
    text-align:right
    رد علي إذ نجحت معك

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن