Lista de Postagens Populares na Horizontal
Um dos novos widgets que eu mais gosto (e uso nos meus outros blogs) é o de Postagens Populares. É uma maneira interessante de atrair seus visitantes para outros textos que talvez não se apresentem na página inicial, além de mostrar os assuntos que mais agradam seus leitores. No entanto, por padrão, a lista aparece na vertical, limitando a possibilidade de mostrá-la em outras áreas do blog que não a sidebar, além de ocupar bastante espaço da coluna lateral, mesmo que se escolha poucos posts a serem mostrados.
Uma maneira que considerei interessante foi mostrar esta mesma lista na horizontal, dentro de alguma div que ocupe toda a largura da página, como a div #crosscol-wrapper (e neste caso, apareceria abaixo do cabeçalho, como neste blog).
Também é possível arrastar o widget para o Footer, por exemplo, e a apresentação dos Posts Populares ficaria no final da página
Tutorial para quem usa os Modelos de Layout(2006)
A primeira coisa que se deve fazer é se certificar da largura total de #outer-wrapper (a div que engloba todas as outras). Procure no CSS do seu template por #outer-wrapper e veja o valor que está em width. Se no seu template este valor for 100%, será preciso então definir um valor para #content-wrapper (a div que engloba #main-wrapper e #sidebar-wrapper). Se o valor de width em #outer-wrapper for algo como 980px, não será preciso definir #content-wrapper.
Para definir uma largura para content-wrapper, acrescente no CSS (imediatamente acima da tag ]]></b:skin> ):
#content-wrapper{margin: 0 auto; width: 990px}
o valor de width deve ser alterado conforme a largura que você desejar.
Tendo definido uma largura para content-wrapper, acrescente também este trecho (ainda acima da tag ]]></b:skin> ):
#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 1px dotted #fff} /*estilo para o título do widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
.PopularPosts .widget-content li {margin: 0px 6px 10px 6px;width: 182px;padding: 0px;height: 180px; overflow:hidden;list-style:none; float:left; border: 1px solid #fff;} /*estilo para cada item da lista. Altere os valores de width, height, border, etc, para que se encaixem na largura total. */
.item-content{font-size: 12px; text-align:left; padding: 5px 10px} /* estilo para o resumo do post */
.PopularPosts img{margin: 0px 0px;padding: 4px; background: #fff; float:right} /*estilo para a imagem */
.PopularPosts .item-title{line-height:1.3em} /* estilo para o titulo de cada post */
Salve a modificação. Em Elementos de Página, arraste o widget Postagens Populares para sob o cabeçalho (ao arrastar, deve aparecer um retângulo onde se deve encaixar o widget), ou para #footer.
Se você desejar, poderá também colocar no início ou final da coluna dos posts, mas deverá modificar as medidas para que se encaixem na largura da coluna. No meu exemplo, as medidas são ideais para #content-wrapper com width: 990px; mostrando cinco posts populares por 'linha'.
Se quiser mostrar os posts populares apenas na primeira página, vá em Editar HTML, clique em Expandir Modelo de Widget e encontre o widget PopularPosts expandido. É um código bastante extenso e a condicional (em vermelho) deve ser colocada logo após <b:includable id='main'> e seu fechamento logo antes de </b:includable> como mostrado abaixo:
<b:widget id='PopularPosts1' locked='false' title='Populares' type='PopularPosts'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
......... mais código .........
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>
Para os que usam os Modelos de Designer
Para os que usam os novos modelos, fiz este teste mas é necessário fazer algumas aterações no HTML. Primeiro vá em Designer do Modelo => Avançado e em Adicionar CSS, acrescente os códigos passados acima (aqui, a única diferença será que você deve especificar uma medida exata de largura e altura para #crosscol-wrapper, como na imagem abaixo - clique para ampliar -):
Salve a modificação e vá em Editar HTML e procure por:
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>
E acrescente depois de </div>:
<div id='crosscol-wrapper'>Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho.
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
Se quiser mostrar os posts populares apenas na primeira página, deixe desta maneira:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
</b:if>
Como sempre, acho muito mais fácil fazer do que explicar, por isso, se tiverem dúvidas, não hesitem em deixar nos comentários.
