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

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



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

معاينة

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

اولاً يجب إضافة الكود التالي فوق الوسم </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:'f005f005';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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f006f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f006f006f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f006f006f006f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f006f006f006f006f005';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:'f005f005';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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f006f006f006f006';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:'f005f005';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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005';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}

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