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

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

يوجد الآن مشاهدة التعليقات : 20

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

إضافة نجوم لأداة المشاركات الشائعة، حقا هذه الاضافة تعطي منظر جميل ومختلف للمشاركات الشائعة وتصنف أعلى زيارة لموضوع عبر منحه خمسة ⭐ ومع كل موضوع أقل تنقص النجوم على حسب اختيارك لعرض المشاركات إما كل الوقت أو آخر 7أيام.
إذا كنت تريد تطبيقها على مدونتك فانصحك باختيار ما بين 5 و 6 مواضيع في الأداة ويمكنكم المعاينة عبر مدونتنا مباشرة ما يبقى إلا متابعة هذا الشرح البسيط
شرح طريقة التركيب
1. إذا كنت تتوفر على الكود التالي خاص بأيقونات Font Awesome فلا داعي لإضافته، يضاف فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
2. ضع الشكل المختار فوق ]]></b:skin> أو ضعه بين <style> </style> فوق </head>

الشكل الأول

/* Popular Post S1 */
.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 10px 0 0;width:60px;height:60px;overflow:hidden;float:right;    margin-left: 10px;}
.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:'\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: 12px; font-family: tahoma;}
.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 S2 */
.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 10px 0 0;width:60px;height:60px;overflow:hidden;float:right;margin-left:10px;}
.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:12px;font-family:tahoma}
.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}
3. قم بحفظ العمل وشاهد النتيجة
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. رائع وشكرا لك

    ردحذف
  2. رائعة شكرا لك ممكن اعرف كود لون النجوم لأغيره؟

    ردحذف
    الردود
    1. شكرا لمروركم إخواني
      @ Ahmed Elnagamy
      @ Yassine Bansliman : اللون محدد بالأحمر

      حذف
  3. اضافة جميلة اخي

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

    ردحذف
  5. رائع وجميل اخي حسام

    ردحذف
  6. نورتمونا اخواني
    @ مروان فوان
    @ يوتيوب الاردن :أرسل لي القالب حتى أركبها لك info@ar1web.com
    @ Emad Eyad

    ردحذف
  7. اخي لو ممكن تضفني فيس لو سمحت :)
    https://www.facebook.com/sayed.nabi1997

    ردحذف
  8. رووعة اخى

    تسلم

    ردحذف
    الردود
    1. تسلموا اخواني
      @ seif gamal
      @Ðáñbø Ñábî : لا أستعمل الفيسبوك اخي لذا لن ينفعك حسابي بشيء إذا أردت شيء يمكنك مراسلتي عبر الصفحة أو على المدونة:
      http://www.ar1web.com/p/contact-us.html

      حذف
  9. سلام عليك اخي الكريم
    اضافة جميلة ولكن مشكلة صور الموضوع تظهار مع النجوم كيف اقوم بتعدلها

    ردحذف
    الردود
    1. عليكم السلام، يبدو أن الستايل السابق تداخل مع هذا لذا ما عليك فعله هو حذفه ابحث عن .PopularPosts واحذف كل شيء له نفس الإسم إحذر أن تحذف الذي به النجوم، فهمت؟

      حذف
    2. سلام عليكم شكرا على الرد
      و اسف عن ازعاجك ولله لم افهم

      حذف
    3. عليكم السلام، أرسل قالبك للبريد وسيتم معالجة الأمر
      info@ar1web.com

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

    ردحذف
    الردود
    1. أهلا بك توجد هذه الإضافة :
      http://www.ar1web.com/2015/07/change-label-style.html

      حذف
  11. السلام عليكم اخي حسام اريد اضافة النجوم لقالب تواصل بدل الشكل الموجود

    ردحذف
    الردود
    1. ارسل قالبك وسأضيفها لك : info@ar1web.com

      حذف
  12. جميل أضافة حلوة و روعة شكرا :)

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

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم