Postagem Popular personalizada no blogger

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:

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:

/* 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 - 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:

/* 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:

/* 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 😘