Popular Post dengan 2 collum effect label

popular-post-dengan-new-2017-2-collum-effect-label


Hoje vamos apresentar um widget diferenciado esse widget tem um diferencial que tem mais exposição para suas postagens do Blog isso é em 2 colunas dividido com uma sidebar de 300 px isso vai ficar bom além de ser numerado e quando passamos o mouse encima isso esconde o titulo e da um zoom na imagem se deseja adicionar o widget a seu template siga os passos abaixo

Para adicionar o widget siga os passos abaixo:

Faça login no template do blogger va no menu modelo então 
editar HTML com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e vamos adicionar o seguinte código CSS acima de umas das tags citadas: 


#PopularPosts1{width:300px}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;counter-reset:popcount}
.PopularPosts .widget-content ul li{padding:0;height:90px;overflow:hidden;position:relative;width:calc(50% - 5px);float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.PopularPosts .widget-content ul li:nth-child(odd){margin:0 5px 10px 0;}
.PopularPosts .widget-content ul li:nth-child(even){margin:0 0 10px 5px;}
.PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:12px;font-weight:500;}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0}
.PopularPosts .widget-content ul li:hover img{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
.PopularPosts .widget-content ul li img{width:100%;height:90px;padding-right:0;transition:all .6s ease-in-out;}
.PopularPosts .item-thumbnail{float:none;margin:0 0 -4px}
.PopularPosts .item-title{padding:5px 5px 5px 33px;position:absolute;bottom:0px;left:0;right:0;text-align:left;background:rgba(0,0,0,.5);transition:all .3s ease-in-out;line-height: 1;}
.PopularPosts .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5px;top:50%;margin-top:-10px;color:#fff;font-size:20px;font-weight:900;line-height:1;z-index:2}
.PopularPosts .item-title a:hover{color:yellow}
.PopularPosts .item-snippet{display:none}
.PopularPosts .widget-content ul li:hover .item-title{bottom:-200px}


Salve isso agora va no menu layout e deixe o widget popular post com as configurações conforme a figura abaixo: 

save popular widget

Salve e veja o resultado



Click to comment