Modelo pronto para personalizar as postagens mais vistas do blog

Views:
CÓDIGO CSS
(colar acima de ]]></b:skin>)
/*Posts mais vistos personalizado*/
#PopularPosts1{
width:100%;
}
.PopularPosts .widget-content ul{
width:100%;
padding:0;
list-style-type:none;
counter-reset:popcount;
}
.PopularPosts .widget-content ul li{
padding:0;
height:90px;
overflow:hidden;
position:relative;
width:calc(50% - 5px);
float:left;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.PopularPosts .widget-content ul li:nth-child(odd){margin:0 5px 10px 0;}
.PopularPosts .widget-content ul li:nth-child(even){margin:0 0 10px 5px;}
.PopularPosts .widget-content ul li a{
color:#fff; /*COR DO TÍTULO DOS POSTS*/
text-decoration:none;
font-size:12px; /*TAMANHO DA FONTE DOS TÍTULOS DO POST*/
font-weight:500; /*ESPESSURA DA FONTE*/
}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0}
.PopularPosts .widget-content ul li:hover img{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);}
.PopularPosts .widget-content ul li img{
width:100%;
height:90px;
padding-right:0;transition:all .6s ease-in-out;}
.PopularPosts .item-thumbnail{
float:none;
margin:0 0 -4px;
}
.PopularPosts .item-title{
padding:5px;
position:absolute;
bottom:-200px;
left:0;
right:0;
text-align:left;
background:rgba(0,0,0,.5); /*COR DE FUNDO DO TÍTULO DOS POSTS*/
transition:all .3s ease-in-out;
line-height: 1;
}
.PopularPosts .item-thumbnail:before{
list-style-type:none;
padding:0;
counter-increment:popcount;
content:counter(popcount);
position:absolute;
width:30px; /*LARGURA DO QUADRADINHO COM O NÚMERO*/
height:30px; /*ALTURA DO QUADRADINHO COM O NÚMERO*/
line-height:30px!important; /*ALTURA DO TEXTO, MANTENHA IGUAL AOS VALORES ALTURA E LARGURA*/
text-align:center;
background:#ff0075; /*COR DE FUNDO DO QUADRADO COM OS NÚMEROS */
left:0;
top:0;
color:#fff;
font-size:16px; /*TAMANHO DA FONTE DOS NÚMEROS*/
font-weight:700; /*ESPESSURA DA FONTE DOS NÚMEROS*/
line-height:1;
z-index:2;
}
.PopularPosts .item-title a:hover{
color:#ff0075;/*COR DO TÍTULO DOS POSTS HOVER*/
}
.PopularPosts .item-snippet{display:none}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0px}
/* Final do código de personalização*/


CÓDIGO HTML
(colar no lugar do código original do gadget)

<b:widget id='PopularPosts1' locked='false' title='Posts mais vistos' type='PopularPosts' version='1'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 300,)                                  : data:post.thumbnail' var='image'>
            <img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' width='300'/>
    </b:with>
         </a>
        </div>
      </b:if>
   <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
           </b:if>
          </div>
         <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>


</b:widget>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage