Виджет Популярных постов Blogger c звёздным рейтингом

Виджет Популярных постов, представленный сегодня, выглядит обычно, единственное его украшение — у каждого сообщения будут проставлены звёздочки от 1 до 5. Звёзды проставлены в виджете по ранжиру от первой статьи — 5 звёзд и последняя  будет с одной звёздочкой. Затем идут звёзды в обратном порядке. Рейтинг — это не больше чем украшение, какую-либо функциональность он не несёт, но смотрится гаджет привлекательно.
Устанавливаем гаджет "Популярных сообщений" из самого Блоггера, если он у вас ещё не стоит.
Заходим в Дизайн/Добавить гаджет/Популярные сообщения.
Популярных сообщений
Делаем нужные вам настройки:
настройки
  1. Если статей много, то выбираем любую строку из четырёх. Если мало — за всё время или за последний год.
  2. Должна быть картинка в виджете или нет — выбор за вами
  3. Показывать фрагмент статьи или нет — выбираете сами.
  4. Максимальное количество статей в гаджете прописываете сами.
Виджет в трёх видах:
Виджет в трёх видах
Разные только звёзды и их расположение.
1) Звёзды тёмные и контурные. Контурные расположены впереди строки.
2) Звёзды тёмные и контурные. Но расположены контурные в конце строки.
3) Все звёзды тёмные.

Первый стиль виджета

Заходим в шаблон, находим с помощью клавиш клавиатуры ctrl+F тег <head> и ниже него добавляем скрипт шрифта:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Затем переходим к тегу ]]></b:skin> и выше него добавляем код виджета.
.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 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;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:'\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: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}

Второй стиль

Меняем в коде выделенное красным на такой отрезок:
.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\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}

Третий стиль

Так же меняем в коде выделенное красным цветом на такой отрезок:
.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}
Ещё в коде можно изменить цвет звезды — выделила в коде синим цветом.
Розовым выделила размер звёзд.

Ваши комментарии:

Комментарии со спамом удаляются.