مساحة اعلانية

موضوع عشوائي

آخر المواضيع

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

 في هذا المنشور ، سأشارك معكم اضافة المشاركات الشائعة ذي تصنيف نجوم والذي سيعرض لك إضافة المشاركات الشائعة مع تصنيف النجوم.
إضافة نجوم التقييم إلى المشاركات الشائعة
 من أفضل ما لدي من المعرفة الإصدار الأول هذه القطعة بواسطة Arlina ، لكن اضافة المشاركات الشائعة تعاملها لديه قيود رئيسية واحدة لن يتمكن تصنيف النجوم من عرضها على أكثر من 5 مشاركات ، لذلك قمت بتطوير هذه الإضافة وجلبت بعض التغييرات ، على الرغم من أن Blogger يسمح بعرض 10 منشورات على أداة النشر الشهيرة ، لذا فإن هذه الأداة المصممة صممت لـ 10 منشورات ، وكذلك يمكنك عرض تصنيف النجوم بإختيارك الألوان التى تناسب مدونتك.

كيفية إضافة أداة المشاركات الشائعة فى Blogger؟

قبل إضافة تصنيف النجوم في أداة المشاركات الشائعة ، يجب إضافته في موقع Blogger الخاص بك. لذلك فقط اتبع الخطوات التالية:
الخطوة رقم 1: سجّل الدخول إلى " حساب Blogger " وانتقل إلى " لوحة تحكم Blogger".
الخطوة رقم 2: انتقل إلى علامة التبويب "تخطيط".
الخطوة رقم 3: انقر فوق " إضافة أداة" ثم حدد " المشاركات الشائعة".

إضافة ملف الخط رائع في القالب الخاص بك:

نحن نعلم أن #بلوجر لا يدعم تصنيف النجوم ، لذا سنقوم بعرض النجوم باستخدام البرنامج النصي Font Awesome. إذا كان القالب يحتوي بالفعل على ملف Font Awesome ، فعليك فقط تخطي هذه الخطوات. ولكن إذا لم يكن الأمر كذلك ، يرجى اتباع الخطوات التالية لإضافة ملف Font Awesome في قالب Blogger.
الخطوة رقم 1: سجّل الدخول إلى " حساب Blogger " وانتقل إلى " لوحة بيانات Blogger".
الخطوة رقم 2: من لوحة معلومات Blogger ، انقر فوق -> قالب -> تحرير HTML.
الخطوة رقم 3: الآن حدد موقع <head> بالضغط على Ctrl + F (في نظام Windows) أو CMD + F (في نظام Mac).
الخطوة رقم 4: الصق الخط أدناه رمز ممتاز أدناه / بعد <head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

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

الخطوة رقم 1: سجّل الدخول إلى " حساب Blogger " وانتقل إلى " لوحة بيانات Blogger".
الخطوة رقم 2: من لوحة معلومات Blogger ، انقر فوق -> قالب -> تحرير HTML.
الخطوة رقم 3: الآن ابحث عن هذا الرمز ]]> </ b: skin> بالضغط على Ctrl + F (في Windows) أو CMD + F (في Mac).
الخطوة رقم 4: الصق الكود أدناه قبل / أعلاه ]]> </ b: skin> .

/* Popular Post with Blue Star Rating by http://www.flammainfo.com/ */
.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:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#e74c3c;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\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.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:13px;}
.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}
يمكتك تغيير اللون كما يتناسب مع ألوان مدونتك بتغيير كود اللون التالى e74c3c#

الكــاتــب

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©