الأحد, أبريل 15, 2012

إضافة شكل جذاب لتعليقات بلوجر الموضوعيه الجديده ( threaded comments ) عن طريق السى إس إس

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

ولكن ينقص هذا النظام التعليقى الجديد شكلا جذابا, وهو الأمر الذى دفع الكثير من المدونين إلى التخلى عن منصة التعليقات الجديده هذه.
وأنا الآن أدعو كل المدونين ومستخدمى منصة بلوجر للتدوين أن يراجعوا رأيهم فى بإستخدام نظام بلوجر الجديد للتعليقات وذلك لأنى قد أحضرت لكم تعديلا على أكواد سى إس إس ( CSS ) سيوفر ظهور هذه التعليقات بشكل جذاب جدا, كما يمكنك من التعديل على هذا الشكل على حسب إختياراتك.
فقط كل ما عليك هو أن تبحث عن الكود التالى
]]></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbXpMXbrWHEF3kTbmj2XStYfTLY8EK16wsHjh86t7-z03FtKuUvFJmyhuWueDOkrX_xI02RH5oTzyFq_0f1kZ0HjuTBmChVmDlCKEWAu9uJBGAjnW5_Dc0bOUc4SEXSwL6qdxNtiPAdY/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}}
ثم قم بحفظ القالب وإستمتع بالشكل الرائع للتعليقات.
ومن يريد عمل اى تعديلات على هذا الشكل برجاء وضع تعليق هنا.
من فضلك اضغظ لايك لمشاهدة لينك التحميل

30 تَعْلِيق:

  1. السلام عليكم

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

    ردحذف
    الردود
    1. لقد جربتها انا للتو ونجحت معى ... تأكد من دقة التنفيذ وتأكد من اتباع خطوات الاكواد فى التدوينه الاخرى

      حذف
    2. الحمدلله نجحت اخيرا

      المشكله كانت في كود لاداة ثانيه و قمت بحذفه الف شكر .

      حذف
  2. لقد جربتها انا للتو ونجحت معى

    ردحذف
    الردود
    1. ايوه بقى ... ماهو انا كمان جربتها وهى اللى انتوا بتعلقوا عليها دى !!!

      حذف
  3. العفو .. نورت المدونه

    ردحذف
  4. ياسو . . جاوبلي على إستفساري إلي في التدوينة دي :
    10 ﺃﻛﻮﺍﺩ ﺇﺗﺶ ﺗﻰ ﺇﻡ ﺇﻝ HTML ﻳﺠﺐ ﻳﻌﺮﻓﻬﺎ ﺍﻟﻤﺪﻭﻥ

    أرجوك ضروري:) عشان تعبت من البحث و مش لاقي الحل .

    خاصة موضوع الthumbnail لما بشير رابط ع الفيس من مدونة بتستخدم قالب بلوجر تيوب .

    ردحذف
    الردود
    1. للأسف انا مش عندى حل للمشكله دى ... انا اسف ومكنتش بارد لانى كنت باحاول ادور على حل لكن مش لقيت اى حل

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

    ردحذف
  6. جااااااااااااااامد جدي

    ردحذف
  7. بعد السلام عليكم

    كنت جربت الكود فى الموضوع " نظام تعليقات جديد موضوعى" و اشتغلت الاكواد تمام
    لكن الموضوع هذا لم يشتغل على الاطلاق ارجو الحل لان الشكل جميل جدا و اريد تطبيقه عندى فى المدونة .
    sandy

    ردحذف
    الردود
    1. برجاء ارسال قالب مدونتك لى ليتم عمل التعديلات اللازمه عليه وذلك لانى متأكد من ان الاكواد تعمل لأنى مجربها بنفسى والكثير من الزوار قاموا بتجربتها واشتغلت

      حذف
  8. بارك الله فيك أخي تم إضافة الكود بنجاح

    ردحذف
  9. شكراً جداً و انشاء الله هجرب

    ردحذف
  10. أنا جربت وهي أضافة جمداااا
    هو يا تري لو غيرت كود الألوان هيحصل حاجة

    ردحذف
    الردود
    1. لا طبعا براحتك ,,, انا غيرت كود الالوان وحصلت على الشكل اللى انا عاوزه

      حذف
  11. شكرا لك أخي الكريم
    لقد تم التطبيق في مدونتي

    ردحذف
  12. السلام عليكم
    اين ساجد هادا الكود ]]> b:Skin

    ردحذف
  13. السلام عليكم ورحمة الله وبركاته
    جزاك الله خيراً أخي ياسر
    وتمت التجربة بنجاح

    ردحذف
  14. اضفته و لا شيء تغير www.foot-on-live.blogspot.com
    شكرا

    ردحذف
  15. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  16. تم التطبيق ؛ اكثر من ممتاز جزاك الله كل خير

    ردحذف
  17. جزاك الله خيرا أخي الغالي

    ردحذف
  18. اخي الإضافة لا تظهر عندي
    .. فما الحل ؟؟؟ :(

    ردحذف
  19. شكراااااااااا
    http://abda3design.blogspot.com

    ردحذف
  20. أزال المؤلف هذا التعليق.

    ردحذف
  21. انا عوز من حضرتك اعرف ازاى اضيف الكومنت للفيس اللى حضرتك عامله ده

    ردحذف
    الردود
    1. تابع تدوينتى القادمه وإن شاء لله ستجد فيها الطريقه بالتفصيل ... نورت المدونه ونتمنى زياراتك المتكرره وتفاعلاتك بتعليقات هادفه .

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

    ردحذف