Popular post 2017 widget for blogger

new popular post 2017 widget for blogger


Popular post 2017 widget for blogger é inovativo isso é o inverso do tradicional uma vez que  primeiro vem o titulo depois a figura é uma forma de captar mais atenção do visitante, conteúdo visual geralmente é lido da esquerda para direita o que vai melhorar a experiencia para instalar isso no seu template é simples siga os passos abaixo.


Instalando popular post widget 2017 

Faça login no blogger, va no menu modelo então editar HTML 
com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e acima disso copie e cole o seguinte código: 

/* CSS Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 0px 10px;overflow:hidden;border-radius:0 0 5px 5px;border-top:none;}
.PopularPosts li,.PopularPosts li amp-img,.PopularPosts li a,.PopularPosts li a amp-img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color: #474747;}
.PopularPosts ul li amp-img {display: flex;align-items:center;display:block;width:auto;height:100%}
.PopularPosts ul li .item-thumbnail {display:block;margin:0 0 0 10px;width:95px;height:65px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius:5px ;background-position:center;transition:all 0.5s ease-out}
.PopularPosts ul li .item-thumbnail:hover{-webkit-filter:brightness(0.4);transition:all 0.5s ease-out}
.PopularPosts ul li {background-color:#fff;margin:0;padding:10px 0;padding-right:5px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;display:block;min-height:67px}
.PopularPosts ul li:first-child {border-top:none;}
.PopularPosts ul li:last-child {border-bottom:none;}
.PopularPosts ul li a:hover {color:#4285f4;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color: #474747;transition:all .3s;display:block;height:100%;}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#4285f4;}
.PopularPosts .item-snippet{display:none}
.profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}
.PopularPosts .item-title {padding-bottom:.2em;padding:0 5px;}


salve isso

Se você ja possui o widget popular post é só atualizar para ver os resultados caso não possua va no menu modelo na sidebar do Blogger clique em adicionar um gadget, procure por popular post então deixe configurado como a figura abaixo:

popular post config 2017






Click to comment