Widget Blogger Popular Post com efeito hover colorido diferente cores

.

.

Widget Blogger Popular Post com efeito hover colorido diferente cores


Hoje vamos compartilhar com vocês  um widget  popular post com efeito hover colorido de direferente cores isso é bem legal uma vez que passamos o mouse encima isso mostra a cor normal da foto uma vez que também isso é uma das estratégias para chamar atenção do visitante ao clique para conferir a postagem se deseja adicionar isso no seu template siga os passos abaixo.


Adicionando o widger no template:

Faça login no blogger então va no meu layout procure a sidebar do blogger se você não tem o widget popular post adicione clique em adicionar novo gadget procure por popular post se você ja tem ignore essa etapa mas veja se esta configurado como a figura abaixo:

popular post widget com efeito hover de diferente cores
Apos isso va no menu tema então editar HTML com as teclas combinadas CTRL+F busque por
]]></b:skin>  e antes disso procure por popular post então exclua o código CSS  e substitua por esse abaixo:


/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:50px 15px 0;transition:all .4s}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a { color: rgba(255,255,255,0); font-family: 'Oswald', sans-serif; font-size: 120%; text-shadow: 0 0 5px rgba(0,0,0,0); }
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:120px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background: rgba(243, 133, 135, 0.61);}
.PopularPosts ul li:nth-child(2) .item-title {background: rgba(182, 230, 185, 0.61);}
.PopularPosts ul li:nth-child(3) .item-title {background: rgba(127, 200, 249, 0.59);}
.PopularPosts ul li:nth-child(4) .item-title {background: rgba(203, 212, 83, 0.58);}
.PopularPosts ul li:nth-child(5) .item-title {background: rgba(122, 131, 212, 0.57);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(7) .item-title {background:rgba(223, 124, 241, 0.5)}
.PopularPosts ul li:nth-child(8) .item-title {background:rgba(121, 228, 165, 0.5);}
.PopularPosts ul li:nth-child(9) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(10) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover,.PopularPosts ul li:nth-child(7) .item-title:hover,.PopularPosts ul li:nth-child(8) .item-title:hover,.PopularPosts ul li:nth-child(9) .item-title:hover,.PopularPosts ul li:nth-child(10) .item-title:hover{background:rgba(0,0,0,0.2);}


Salve e pronto.