05 janeiro 2017

Postagem Popular personalizada no blogger

Postagem popular

Você quer adicionar o "Postagem popular" ou "Popular post" no seu blog mais sem ser aquele feinho que o blogger disponibiliza e não sabe como? Então hoje eu vou ajudar você! Editei 4 modelinhos de postagem popular e você pode personalizar da maneira que achar melhor, espero que gostem!
Este tutorial é muito simples, rápido e fácil de fazer, então vamos lá?
      Este modelinho de postagem popular está no Layout Free que disponibilizei aqui e você pode vizualizar aqui.
Para colocar a postagem popular no seu blog vá primeiramente em: Layout > adicionar um gadget > desmarque a opção de miniatura de imagem e desmarque o snippet > Clique em salvar e coloque este gadget na sidebar como mostra na imagem:
Post Popular

Agora vá em: Modelo > Editar HTML > pesquise por </b:skin> e acima de  ]]></b:skin> cole o código do modelo da postagem popular que você preferir.

  4 modelos de Postagem Popular para seu blog


MODELO 1:

popular post
/* Postagem Popular - pronto-postei.blogspot.com
------------------------------------------------------------------------*/
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #e4918a; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
    position: absolute;
    content: "";
    left: -2px;
    margin-top: -0.7em;
    top: 57%;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 7px solid #e4918a;
}
#PopularPosts1 ul li a{
    color: rgb(189, 203, 213);
    text-decoration: none;
    font-size: 12px;
    font-family: verdana;
    text-transform: uppercase;
}
#PopularPosts1 ul li {
    position: relative;
    display: block;
    padding: 0.4em 0.4em 0.4em 0.8em;
    margin: 0.5em 3px 0.5em 0.4em;
    text-decoration: none;
    transition: all 0.1s ease-in-out 0s;
    border: 1px solid rgb(189, 203, 213);
}
#PopularPosts1 ul li:hover{
    border: solid 1px #E4918A;

#PopularPosts1 ul li a:hover{
color:#E4918A; /* Link color on mouseover */
margin-left:3px;
}

.popular-posts{width: 92%;}


MODELO 2:

Postagem popular
/* Postagem Popular - pronto-postei.blogspot.com
------------------------------------------------------------------------*/
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#000; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #000; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ccc;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: "";
left: -2px;
margin-top: -0.7em;
top: 57%;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 7px solid #000;
}
#PopularPosts1 ul li a{
color: #000;
text-decoration: none;
font-size: 12px;
font-family: verdana;
text-transform: uppercase;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
margin: 0.5em 3px 0.5em 0.4em;
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
border: 1px solid #000;
}
#PopularPosts1 ul li:hover{
border: solid 1px #ccc;
}
#PopularPosts1 ul li a:hover{
color:#ccc; /* Link color on mouseover */
margin-left:3px;
}
.popular-posts{width: 92%;}

MODELO 3:


Postagens populares
/* Postagem Popular - pronto-postei.blogspot.com
--------------------------------------------------------*/
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#ffa4fa; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #ffa4fa; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ffF;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: "";
left: -2px;
margin-top: -0.7em;
top: 57%;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 7px solid #ffa4fa;
}
#PopularPosts1 ul li a{
color: #ffa4fa;
text-decoration: none;
font-size: 12px;
font-family: verdana;
text-transform: uppercase;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
margin: 0.5em 3px 0.5em 0.4em;
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
border: 1px solid #ffa4fa;
}
#PopularPosts1 ul li:hover{
border: solid 1px #fcd0f9;
}
#PopularPosts1 ul li a:hover{
color:#fcd0f9; /* Link color on mouseover */
margin-left:3px;
}
.popular-posts{width: 92%;}

Modelo 4:

populars post

/* Postagem Popular - pronto-postei.blogspot.com
--------------------------------------------------------*/
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#ffa4fa; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #0009bc; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ffF;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: "";
left: -2px;
margin-top: -0.7em;
top: 57%;
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 7px solid #0009bc;
}
#PopularPosts1 ul li a{
color: #0009bc;
text-decoration: none;
font-size: 12px;
font-family: verdana;
text-transform: uppercase;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
margin: 0.5em 3px 0.5em 0.4em;
text-decoration: none;
transition: all 0.1s ease-in-out 0s;
border: 1px solid #0009bc;
}
#PopularPosts1 ul li:hover{
border: solid 1px #9297ff;
}
#PopularPosts1 ul li a:hover{
color:#9297ff; /* Link color on mouseover */
margin-left:3px;
}
.popular-posts{width: 92%;}

Então é isso gente, muito fácil né? Espero que vocês tenham gostado! Dê sugestão para próximos posts e comente aqui abaixo o que você achou deste tutorial. Beijão 😘

10 comentários:

  1. Adorei *O* muito bonito!

    http://meubaudeestrelas.blogspot.com.br/

    ResponderExcluir
  2. muito bacana mais essa dica de lay!

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  3. Simplesmente amei . Bjs Talita Reis

    ResponderExcluir
  4. Boa dica, vou colocar seu blog na minha pasta de favoritos pois achei bem útil agora que estou tentando personalizar alguns modelos dos novos templates do blogger.

    - Thicoss

    ResponderExcluir
    Respostas
    1. aaa que bom que gostou! Se quiser algum tutorial específico pode me pedir que eu farei o possível para postar aqui no blog! Muito obrigada pela visita <3

      Excluir
  5. Muito obrigada! Estava há um tempão querendo encontrar um tutorial como esse. Queria saber se há como colocar as postagens lado a lado (horizontal) pra posicionar no footer. Será que tem como? Mais uma vez, agradeço imensamente! <3

    ResponderExcluir
    Respostas
    1. Fico feliz em ter te ajudado! Me explica melhor essa "postagem lado a lado" você quer tipo a que tem no meu blog ou com uma linha maior na horizontal? Se tiver alguma foto de exemplo pode me mandar por e-mail, talvez eu possa te ajudar! Obrigada pelo comentário <3

      Excluir