Destacar o artigo mais popular do blog

Temos costume de mostrar os artigos mais populares do nosso blog, e destacamos em diversos lugarem em nosso blog, tanto na sidebar, quanto no rodapé e varios outros lugares, no meu caso aqui no TB tenho o Widget de artigos populares com cores diferentes e me ajuda bastante não só na divulgação deste artigo mas tambéns diminuindo a minha taxa de rejeição.por isso hoje mostrarei como colocar o artigo mais popular acima das postagem do blog,

OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

Vamos ao tutorial

1º- Clique em Editar HTML e expandir modelos de widgets.
2º- procure por <div id='content-wrapper'> e abaixo cole o código seguinte.

<b:section class='destacados' id='destacados' showaddelement='no'>
<b:widget id='PopularPosts7' locked='true' title='Lo más popular' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <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/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
<a id="leermas" expr:href='data:post.href'>Leia mais</a>

            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>

3º- Procure por ]]></b:skin> e logo acima cole:

#destacados ul { /*NO TOCAR*/
list-style:none;
}

/*ENLACES*/
#destacados a:link {color:#fff;}
#destacados a:visited {color:#fff;}
#destacados a:hover {color:#fff;}

/*IMAGEN*/
#destacados .item-thumbnail img {width:64px;height:64px;background:#316b94;border:1px solid #c0c0c0; padding:6px;}

/*TÍTULO*/
#destacados .item-title {font-size:28px;}

/*RESÚMEN*/
#destacados .item-snippet {font-size:14px;}

/*BOTÓN LEER MÁS*/
#leermas {color:#2d2d2d; border:1px solid #c0c0c0; padding:5px;border-radius:5px;float:right;}

Obs: Certamente aparecerar um Gadget de postagem popular acima das postagem caso não aparece basta adicioná-lo e para configurar o numero de postagem a ser mostrada troque o 10 pelo numero que deseja, no caso abaixo coloquei 1.

Por ultimo salve.