أضف بعض اللمسات الجمالية على صندوق تعليقات مدونتك

عدد مشاهدات الموضوع:

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

1- الدخول على لوحة التحكم ثم القالب Template ثم اختر تخصيص Customise
2- اختار متقدم Advanced ثم Add CSS وضع هذا الكود فى المستطيل

@font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; } .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;background-image:url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);wid



لاحظ : اذا لم يتم تفعيل كلمة Apply to Blog قم بالنقر أخر الكود وخذ مسافة ومن ثم اضغط على Apply to Blog لاتمام المهمة. اذا اعجبك الكود قم بمشاركته على مواقعك المفضلة :)

مصدر الكود: spiceupyourblog

هناك 13 تعليقًا:

  1. شكرا على هذه الإضافات الجميلة
    و جزاك الله خبرا

    ردحذف
  2. لا شكرا على واجب سعيد بتواجدكم وتفاعلكم

    ردحذف
  3. شكرا على التفسيرات والمعلومات وسيهل علي كثيرا

    http://magazine-ar.blogspot.com/

    ردحذف
    الردود
    1. الشكر موصول لك ومرحبا بك :-)

      حذف
  4. غير معرف3:01 ص

    ;;;

    ردحذف
    الردود
    1. اهلا وسهلا اتمنى ان تكون أعجبتك الإضافة؟

      حذف
  5. الردود
    1. اهلا بك اتمنى ان تكون الإضافة رائعة على مدونتك

      حذف
  6. بقلم محمد جلال

    مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى ومهتم بالاعلان عن الشركات الناشئة عبر مدونته الشخصية (مدونة راصد تقني), كاتب سابق على مدونة عالم الإبداع ومشرف سابق فى موقع نقطة التطوير ومنتدى الديوان -تم اغلاقه-. أحب القراءة والترجمة للمستجدات التقنية والتكنولوجية. المالك الحالي لمدونة أبو إياد.
    جمب الكلام ده موجوده صورتك انا عندى نفس التصميم ده ومكان الصوره موجود بس نفسى احط صورتى عليه مش عارف وشكرا

    ردحذف
  7. شكرا لك جاري التجريب

    ردحذف
  8. لم يظهر التعليق بالألوان كما وضحت أخي

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

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية