Postagens populares com classificação Score

A plataforma blogger disponibiliza o gadget de postagens populares para ser utilizado como uma ferramenta de navegação para que os seus leitores não só conheçam mais do seu trabalho, como também permaneçam mais tempo em seu blog.

No entanto, essa ferramenta não dispõe de recursos nativos, como por exemplo, um score – classificação por estrelas- mas mesmo não sendo nativo do blogger é possível adicionar esse recurso, de maneira bem simples.

Esse recurso chama à atenção para suas postagens, fazendo com que seus visitantes naveguem por mais tempo em seu blog e conheça mais do seu trabalho.

Fonte da imagem: franquias5estrelas

Em primeiro lugar, vá ao Layout do blogger - adicione um novo gadget – “adicionar Postagens Populares;

Na janela de configuração, selecione Últimos 30 dias e miniatura de imagem.

E Exibir até no máximo - para que o score com estrela funcione – 10 postagens.

Logo após a configuração do widget, vá em Tema >> Editar HTML >> E colo acima da tag </head> esse código:

Acima da Tag </head> ****

Salve. Agora cole acima da tag ]]></b:skin> o código de sua preferência:

Para o SCORE na cor azul:

Score na Cor Azul ****

/* Popular Post with Blue Star Rating by http://www.bloggerspice.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\f005\f005\f005';display:inline-block;position:absolute;color:#30AEE1;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:'\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}

Para o SCORE na cor amarela:

Score na Cor Amarela ****

/* Popular Post with Yellow Star Rating by http://www.bloggerspice.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\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}