Postagens populares com cor de fundo e design decrescente

 DEMO

Esse gadget de Postagens populares do Blogger é muito importante e fundamental para atrair seus leitores a ajuda-los a encontrar outras postagens e com isso passar mais tempo em seu blog, já que é isso que importa para os indexadores do Google: leitores de qualidade. Você pode tira-lo do trivial e acrescentar a ele um  cores de fundo, dando assim mais destaque. Proceda da seguinte forma



Vá até o Modelo de seu blog e clique em "Personalizar"

 

Cole o código abaixo:

/*Mais populares colorido ---------------------------------------------------------------------*/
.mostpopular {
    list-style: none outside none;
    margin: 0.3em 0 !important;
    padding: 0;
}
.mostpopular a{
color: #000; text-shadow: black 0.1em 0.1em 0.2em
}
.mostpopular_li {
    background-image: none !important;
    border: 0 none;
    list-style: none outside none !important;
    margin: 0 0 -7px !important;
    padding: 13px 0 8px 8px !important;
    position: relative;
    width: 100%;
}
.mostpopular_li.color0 {
    background-color: #EF9B1C !important;
    width: 100%;
}
.mostpopular_li.color1 {
    background-color: #DA9A34 !important;
    width: 93%;
}
.mostpopular_li.color2 {
    background-color: #C5964D !important;
    width: 89%;
}
.mostpopular_li.color3 {
    background-color: #AC8F62 !important;
    width: 84%;
}
.mostpopular_li.color4 {
    background-color: #B1AA9F !important;
    width: 80%;
}
.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {
    background-color: #888888 !important;
    width: 74%;
}
a.barlinko {
    background: none repeat scroll 0 0 transparent;
    display: block;
    font: italic 13px georgia,serif;
    margin: 0 6px 0 0;
    padding: 0;
    text-decoration: none !important;
}
a.barlinko:hover {
    color: #FFFFFF;
}
.barco {
    display: block;
    right: 0;
}
.mostpopular_li img {
    margin-top: 15px;
    position: absolute;
    right: 5px;
}
a.thethingwithc {
    border: 0 none !important;
    color: #FFFFFF !important;
    display: block;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 0 9px 0 0;
    text-align: right;
    text-decoration: none !important;
}

Salve !

Agora volte em Modelo. Clique em "Editar HTML"

Procure então por um destes trechos:

<b:section-contents id='sidebar-leftt-1'>

ou

<b:section-contents id='sidebar-right-1'>

ou

<b:section-contents id='sidebar-left-2-2'>

ou

<b:section-contents id='sidebar-right-2-2'>



E abaixo dele cole o seguinte trecho:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>                      
                                     <div id='sidebartitlewrapper'>
                                         <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if>                                      
                                     </div>                                   
                                     <div class='sectioncont'>
                                         <ul class='mostpopular'>
                                             <script type='text/javascript'>
                                                 //<![CDATA[                                               
                                                 var i=0;
                                                 //]]>
                                             </script>
                                             <b:loop values='data:posts' var='post'>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                               
                                                         document.write ('<li class="mostpopular_li color'+i+'">');
                                                         var i= i +1;
                                                     //]]>
                                                 </script>
                                                  <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                                 <span style='display: inline-block;width:100%;'>
                                                     <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>                                                      
                                                     <span class='cb'/>
                                                 </span>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                               
                                                          document.write ('</li>');
                                                      //]]>
                                                 </script>                                          
                                             </b:loop>
                                         </ul>
                                     </div>                                   
                                     <b:include name='quickedit'/>
                                   </b:includable>
</b:widget>

Salve.




Agora vá em Layout, clique então no widget "Popular Posts", que você acabou de instalar.