19‏/01‏/2016

إضافة نجوم لأداة المشاركات الشائعة، حقا هذه الاضافة تعطي منظر جميل ومختلف للمشاركات الشائعة وتصنف أعلى زيارة لموضوع عبر منحه خمسة ⭐ ومع كل موضوع أقل تنقص النجوم على حسب اختيارك لعرض المشاركات إما كل الوقت أو آخر 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. قم بحفظ العمل وشاهد النتيجة
إضافة نجوم لأداة المشاركات الشائعة، حقا هذه الاضافة تعطي منظر جميل ومختلف للمشاركات الشائعة وتصنف أعلى زيارة لموضوع عبر منحه خمسة ⭐ ومع كل موضوع أقل تنقص النجوم على حسب اختيارك لعرض المشاركات إما كل الوقت أو آخر 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. قم بحفظ العمل وشاهد النتيجة
20 Blogger تعليقات
Disqus
20 التعليقات
المشرف
avatar

رائع وشكرا لك

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

اضافة جميلة اخي

المشرف
avatar

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

المشرف
avatar

رائع وجميل اخي حسام

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

رووعة اخى

تسلم

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة