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.

Click to comment