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

مرحبــــاً متابعين، 👈حقا هذه اضافة بلوجر تعطي منظر جميل ومختلف للمشاركات الشائعة وتصنف أعلى زيارة لموضوع عبر منحه خمسة ⭐⭐⭐⭐⭐ ومع كل موضوع أقل تنقص النجوم على حسب اختيارك لعرض المشاركات إما كل الوقت أو آخر 7 أيام.

إذا كنت تريد تطبيق علي بلوجر نجوم فانصحك باختيار ما بين 5 و 6 مواضيع في الأداة ويمكنكم المعاينة عبر مدونتنا مباشرة ما يبقى إلا متابعة هذا الشرح البسيط.

شرح تركيب 

1. إذا كنت تتوفر على الكود التالي خاص بأيقونات Font Awesome فلا داعي لإضافته علي بلوجر html، يضاف فوق </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>

2. ضع الشكل المختار فوق ]]></b:skin> أو ضعه بين <style> </style> فوق </head>

هنا الكود اضافة  نجوم للمشاركات الشائعة

< pre>< code> /* 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:#1a73e8;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} < pre/>< code/>