20 يناير، 2016

مدون محترف اضافات بلوجر نصائح للمدونين CSS إضافة نجوم التقييم إلى المشاركات الشائعة

إضافة نجوم التقييم إلى المشاركات الشائعة

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


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


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

اولاً يجب إضافة الكود التالي فوق الوسم </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

مُلاحظة: إذا كان الكود موجود في مدونتك لا تقوم بإضافته
ثانيًا: قُمّ بالدخول إلى لوحة تحكم بلوجر ثم اضغط على تبويب قالب، ثمّ تحرير HTML واضف الكود التالي فوق الوسم ]]></b:skin>

الشكل الاول
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثاني
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثالث
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{float:right;margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

قمّ بإضافة أحد هذه الاشكال، ثُمّ قم بحفظ القالب.
اتمنى ان يكون الموضوع أعجبكم.


مواضيع ذات صلة
إضافة نجوم التقييم إلى المشاركات الشائعة
4 / 5
بواسطة

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

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

    ردحذف
    الردود
    1. نعتذر منك لا ننشر روابط إشهار

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

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      ولكن اعذرني لا ننشر روابط اشهار

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

    ردحذف
    الردود
    1. اعتذر لمسح التعليق بسبب الرابط
      المشكلة الان صدقًا مشغول كثيرا
      لذلك لا يوجد وقت من اجل ان اقوم بتعريبه
      اتمنى ان تعذرني

      حذف
  4. ممكن طلب اخي من فضلك

    ردحذف
    الردود
    1. تفضل اخي لو بقدر من عيوني

      حذف
    2. اريد ازالة حقوق طبع ونشر من قاب موجود في مدونتك لك انا لا اريد ان اضيف اسمي أو شيئ من هدا فقط اريد ازالتها

      حذف
    3. صديقي ولكن لماذا تريد إزالتها
      فهي مجرد كلمة برابط فقط
      ولن ينظر إليها احد على ما اعتقد
      وهي عبارة عن تقدير لجهودنا في التعريب

      حذف
  5. اضافة جميلة =q =r

    ردحذف
    الردود
    1. شكراً لك مرورك الجميل

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

    ردحذف
    الردود
    1. إن شاء الله اقوم بتعريب مثل هذه القوالب
      واعتذر لمسح التعليق بسبب الرابط

      حذف
  7. شكرا على الدرس
    " حملة شاركنا لندعمك - تم نشر موضوع في مدونتي "

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      ولكن الهاشتاغ لا يتم نشره هنا
      وتم لدخول لمدونتك
      لم اجد نظام التعليقات

      حذف
  8. اخى الشكل التانى مكرر

    ردحذف
    الردود
    1. لا صديقي يوجد اختلاف ولكنه بسيط جدًا

      حذف
  9. اتخى انا عندى المشاركات مكان النجوم هل يمكن وضع النجوم الناحية الاخرى ؟

    ردحذف
    الردود
    1. نعم صديقي
      في اكواد css
      ابحث عن right واجعلها left
      ابحث عن left واجعلها right
      وتغير ال padding , margin

      حذف
  10. فى الكود ذاته ولا فى القالب ؟

    ردحذف
    الردود
    1. في الكود ذاته
      الكود الخاص بالشكل

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r