Colocando postagens populares personalizas no blogger. (+10 modelos)



Essa publicação eu tenho certeza que vai ajudar muita gente, mas muita gente mesmo. Hoje eu quero ensinar para vocês como personalizar o gadget de postagens populares do blogger. Bom, acho que todos sabem como personalizar né? A duvida da maioria são os códigos que irão ajudar na façanha de fazer um bom design, e deixar o blog mais bonito.

E reunindo uma infinidade de códigos que eu tinha guardados aqui, resolvi fazer essa publicação e dividir com vocês, já que eu não uso eles aqui no meu espacinho. Vamos lá? A sequência é: Print, e abaixo o código.

Mas, antes de mais anda vamos aprender a coloca-los, né? Faça os seguintes passos:


  • Acesse a opção "modelo" do seu menu e clique em personalizar, como mostra o print abaixo:

Depois clique em avançado, e adicionar CSS, cole o código do widget escolhido lá e depois clique em aplicar ao blog. Feito!


Para copiar os códigos passe o mouse sobre as caixinhas abaixo de cada print e aperte CTRL+C do seu teclado e cole com CTRL+V na área desejada.


#01 




</i></b></span><span style="font-size: 13px; line-height: 22px;">*--- LOUCOS POR UM ESTILO Popular Posts --- */ </span><br style="font-size: 13px; line-height: 22px;"><span style="font-size: 13px; line-height: 22px;">.popular-posts ul { </span><br style="font-size: 13px; line-height: 22px;"><span style="font-size: 13px; line-height: 22px;">padding-left: 0px; </span><br style="font-size: 13px; line-height: 22px;"><span style="font-size: 13px; line-height: 22px;">counter-reset: popcount; </span><br style="font-size: 13px; line-height: 22px;"><span style="font-size: 13px; line-height: 22px;">}</span></font><p style="font-size: 13px; line-height: 22px;"></p>

See the Pen WbZrgL by Vitor (@vitorlimaicm) on CodePen.


#02



</i></b></span><span style="font-size: 14px; line-height: 18px;">/*--- Vitor Lessa, publicações populares--- */</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    </span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">.popular-posts .item-thumbnail img:hover {</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">   opacity: 1;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">   /*Reflection*/</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">   /*Glow*/</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">-webkit-transform: rotate(-7deg);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -moz-transform: rotate(-7deg);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -o-transform: rotate(-7deg);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">}</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">.popular-posts .item-thumbnail img {</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">  </span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    border-radius: 100px 100px 100px 100px;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    border: 5px solid #eee;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    /*Transition*/</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -webkit-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -moz-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -o-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;"> }</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">.popular-posts ul li {</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">margin: 12px;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    opacity: 0.8;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    border: 5px solid #eee;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;"> border-radius: 100px 100px 100px 100px;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    /*Transition*/</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -webkit-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -moz-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    -o-transition: all 0.5s ease;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">    /*Reflection*/</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">}</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">.popular-posts a{</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">font-size: 13px solid;</span><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><br style="position: relative; word-wrap: break-word; margin: 0px; padding: 0px; font-size: 14px; line-height: 18px;"><span style="font-size: 14px; line-height: 18px;">}</span><span class="Apple-style-span" style="white-space: pre-wrap;">

See the Pen gbGPde by Vitor (@vitorlimaicm) on CodePen.



#03


</i></b></span><span style="font-size: 15.3999996185303px; line-height: 24.6399993896484px;">.popular-posts ul{padding-left:0px;}</span><span style="font-size: 15.3999996185303px; line-height: 24.6399993896484px;"> </span></font></blockquote>

<p style="padding: 0px 0px 15px; font-size: 15.3999996185303px; line-height: 24.6399993896484px;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">.popular-posts ul li {background: #FFF url(<strong>http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif</strong>) no-repeat scroll 5px 10px; <br>list-style-type: none; <br>margin:0 0 5px 0px; <br>padding:5px 5px 5px 20px !important; <br>border: 1px solid <strong>#dddddd</strong>; <br>border-radius:10px; <br>-moz-border-radius:10px; <br>-webkit-border-radius:10px;</font></p>
<p style="padding: 0px 0px 15px; font-size: 15.3999996185303px; line-height: 24.6399993896484px;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">}</font></p>
<p style="padding: 0px 0px 15px; font-size: 15.3999996185303px; line-height: 24.6399993896484px;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">.popular-posts ul li:hover { <br>border:1px solid <strong><font>#6BB5FF</font></strong>; <br>}</font></p>
<p style="padding: 0px 0px 15px; font-size: 15.3999996185303px; line-height: 24.6399993896484px;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">.popular-posts ul li a:hover { <br>text-decoration:none; <br></font></p>
<blockquote style="font-size: 11.5699996948242px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 15.3999996185303px; line-height: 24.6399993896484px;">}</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen jEGWvJ by Vitor (@vitorlimaicm) on CodePen.



#04

</i></b></span><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;"> .popular-posts ul{padding-left:0px;}</span><br></font><pre class="code" style="border: 1px solid rgb(220, 220, 220); font-size: 16px; margin-bottom: 18px; outline: 0px; padding: 15px; vertical-align: baseline; font-stretch: normal; line-height: 1.5; overflow: auto; white-space: pre-wrap; word-wrap: break-word; width: 545.1875px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">    .popular-posts ul li {

    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
   
</font></pre>
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">    }</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen KwXVxY by Vitor (@vitorlimaicm) on CodePen.



#05

</i></b></span><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;"> .popular-posts ul{padding-left:0px;}</span><br></font><pre class="code" style="border: 1px solid rgb(220, 220, 220); font-size: 16px; margin-bottom: 18px; outline: 0px; padding: 15px; vertical-align: baseline; font-stretch: normal; line-height: 1.5; overflow: auto; white-space: pre-wrap; word-wrap: break-word; width: 545.1875px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;

    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
</font></pre>
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">    }</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen zxErmv by Vitor (@vitorlimaicm) on CodePen.



#06
</i></b></span><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">.popular-posts ul{padding-left:0px;}</span><br></font><pre class="code" style="border: 1px solid rgb(220, 220, 220); font-size: 16px; margin-bottom: 18px; outline: 0px; padding: 15px; vertical-align: baseline; font-stretch: normal; line-height: 1.5; overflow: auto; white-space: pre-wrap; word-wrap: break-word; width: 545.1875px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;

    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {
    
    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
</font></pre>
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">    }</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen xbXZyO by Vitor (@vitorlimaicm) on CodePen.


#07 
</i></b></span><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">.popular-posts ul</span><br></font><pre class="code" style="border: 1px solid rgb(220, 220, 220); font-size: 16px; margin-bottom: 18px; outline: 0px; padding: 15px; vertical-align: baseline; font-stretch: normal; line-height: 1.5; overflow: auto; white-space: pre-wrap; word-wrap: break-word; width: 545.1875px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">{

padding-left:0px;
    -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
 border: 1px solid #dcdcdc;

}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
   border-bottom:1px dashed #dcdcdc;
       background:#ffffff;
    }

  .popular-posts ul li a
{

text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}

    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#333333;
</font></pre>
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 16px; line-height: 1.5; white-space: pre-wrap;">    }</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen ogGbaZ by Vitor (@vitorlimaicm) on CodePen.


#09


</i></b></span><span style="font-size: 11.5699996948242px;"> .PopularPosts h2{</span><br></font><pre><font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);">padding-right:.4em;

padding-left:1em
}
.popular-posts ul { padding-left: 0;
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li { 
border-bottom: 1px solid #ffffff; 
list-style: none outside none !important; 
margin-left: 0 !important; 
overflow: hidden; 
padding: 10px 0 !important; 
transition: all 0.25s linear 0s;
counter-increment: trackit;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #ffffff;
float:left;
margin-right:10px;
} /* creates counter before lists */


.PopularPosts li:first-child{
border-top:1px solid #000000
}


.PopularPosts li:nth-child(even)
{background:#0099ff
}/*define background color for even number lists*/


.PopularPosts li:nth-child(odd)
{background:#00FF00
}/* define background for odd number lists */


.PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet { 
display: true!important}/* Hides Thumbnail and Snippet */


.PopularPosts a, .PopularPosts a:hover{
color:#ffffff;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}

</font></pre>
<font face="Verdana, sans-serif" style="background-color: rgb(255, 255, 255);"><span style="font-size: 11.5699996948242px;"></span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen YPrwJx by Vitor (@vitorlimaicm) on CodePen.



#09
</i></b></span><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">/*Popular Post CSS ------------------------------------------------------------------------------*/</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child{background:#ff4c54;width:91%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child:after{content:"1"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li{background:#ff764c;width:88%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li:after{content:"2"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:85%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li:after{content:"3"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:82%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:79%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:76%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#f6993d;width:73%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{background:#EDB0EE;width:70%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li  + li + li:after{content:"8"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#C0C0FF;width:67%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li {background:#C0C0C0;width:64%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li +li{background:#C0C0C0;width:61%}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after{content:"11"}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li +  li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li  + li + li:after,</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li .item-thumbnail{ float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li a{ font-size:12px;color:#444;text-decoration:none}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts  ul  li {list-style-type:none; }</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 img{width: 40px; height:40px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}</span><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><br style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;"><span style="font-size: 13.1999998092651px; line-height: 18.4799995422363px;">#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen GgMoYQ by Vitor (@vitorlimaicm) on CodePen.
#10
</i></b></span><span style="font-size: 16px; line-height: 18px;">/* Popular Post Customization by AllBloggerTricks.com */</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li a {</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    background: none repeat scroll 0 0 #DDDDDD;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    color: #444444;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    display: block;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    margin: 0 0 0.5em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    padding: 0.4em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    position: relative;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    text-decoration: none;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    transition: all 0.3s ease-out 0s;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li a:before {</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    background: none repeat scroll 0 0 #CCCCCC;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    font-weight: 700;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    height: 2em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    left: -2.5em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    line-height: 2em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    margin-top: -1em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    position: absolute;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    text-align: center;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    top: 50%;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    width: 2em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li a:after {</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    border: 0.5em solid transparent;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    content: "";</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    left: -1em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    margin-top: -0.5em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    position: absolute;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    top: 50%;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    transition: all 0.3s ease-out 0s;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li a:hover {</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    background: none repeat scroll 0 0 #CCCCCC;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li a:hover:after {</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    border-left-color: #CCCCCC;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">    left: -0.5em;</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li + li a:before{content:"4"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li + li a:before{content:"3"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child + li a:before{content:"2"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">.popular-posts ul li:first-child a:before{content:"1"}</span><br style="font-size: 16px; line-height: 18px;"><span style="font-size: 16px; line-height: 18px;">/* Popular Post Customization by AllBloggerTricks.com */</span><span class="Apple-style-span" style="white-space: pre-wrap;">
See the Pen wBrMYE by Vitor (@vitorlimaicm) on CodePen.

Tecnologia do Blogger.