segunda-feira, 1 de agosto de 2016

New Popular Post count number Blogger 2016



Esse novo widget é elegante e pode ser uma opção de skin para seu popular post para isso basta adicionar no seu Blogger e ver o resultado é um widget diferente para que seu Blogger passe a ser diferente dos demais então se deseja instalar veja o tutorial abaixo.

Para Adicionar no Blogger siga os passos

Faça login no Blogger
se você ja tem popular post no seu Blogger basta adicionar o código CSS
va no menu modelo então editar HTML/JavaScript então
com as teclas combinadas CTRL+F Busque por popular post  isso pode ser encontrado acima de
]]></b:skin>  ao localizar substitua todo código por esse abaixo salve e pronto veja o resultado


/* POPULAR POST WIDGET */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:10px 20px 10px 0px !important;
counter-increment:num;
position:relative;border-bottom:1px dashed #ddd;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
bottom:0px;
right:0px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #07ACEC;
}
.PopularPosts ul li:nth-child(1) {background-color:#fff;
}
.PopularPosts ul li:nth-child(2) {background-color:#fff;
}
.PopularPosts ul li:nth-child(3) {background-color:#fff;
}
.PopularPosts ul li:nth-child(4) {background-color:#fff;
}
.PopularPosts ul li:nth-child(5) {background-color:#fff;
}
.PopularPosts ul li:nth-child(6) {background-color:#fff;
}
.PopularPosts ul li:nth-child(7) {background-color:#fff;
}
.PopularPosts ul li:nth-child(8) {background-color:#fff;
}
.PopularPosts ul li:nth-child(9) {background-color:#fff;
}
.PopularPosts ul li:nth-child(10) {background-color:#fff;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}

Nota: deixe desmarcado opção mostrar imagem e resumo.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner