Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

10 agosto 2011

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'>
<b:section class='crosscol' id='crosscol-wrapper' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
Salve as modificações e em Elementos de Página, arraste o widget Posts Populares para o espaço abaixo do cabeçalho.

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.

Artigos Relacionados

16 comentários:

adesivado@gmail.com disse...

Boa tarde Ariane, tudo bem? Então, desculpa estar pertubando, é que eu tinha um blog com template seu, mas perdi o acesso, poderia me dar uma luz somente me dizendo que template que é? Segue o link do blog?

http://psp-dvd.blogspot.com/

Muito obrigado!

edilene - amor disse...

massarolk!
estava precisando disto!
Obrigada!

edilene - amor disse...

adesivado@gmail.com

é o
Template Setembro

maycon disse...

Bom dia seu blog eh exepcional mas tive uma duvida ai voce mostrou para ter 5 postagems populares para ter 7 oque eu deveria fazer? no codigo porque eu colocando 7 no blogger nas configuracoes la nao adianta em nada no max mostra 5, desde ja agradeco obrogado

Carucioare disse...

Great article!

Maycon disse...

Bom dia tudo bem? Gostaria de saber como deichar 7 mensagems populares e nao 5 pois mudo no gatjet e nao da certo, e alguma coisa no codigo? Obrigado

Ariane disse...

Maycon como expliquei no tutorial, as medidas estão para mostrar 5, se quiser que apareça mais posts populares, você deve ir alterando as medidas de .PopularPosts .widget-content li , diminuindo a largura para que apareçam mais.

Elke di Barros disse...

Já estou fazendo um template com essa dica. Beijos phoderosa.

ECOMMERCE LEGAL disse...

Como eu escrevi agora a pouco eu preciso muito de sua ajuda mas, gostaria de tambem contribuir. É o seguinte: o que normalmente de cara dá erro é o
Fecha-lo corretamente é difícil para quem nada sabe de html, como eu. Eu investi mais e 4 horas para descobrir na raça o que eu NÃO descobri em lugar nenhum da internet, que esse tipo de elemento precisa simplesmente de um colchete anterior!!!
Acreditem quando der a mensagem:
The element type "b:skin" must be terminated by the matching end-tag "
SIMPLESMENTE procurem o colchete } que deve haver antes dessa tag se não houver é isso que está dando problema, ele deve ficar assim:

}
]]>
-

Ok. Mas, olha Ariane eu estou aguardando sua ajuda para arrumar a desconfiguração da listagem popular na horizontal, ele posta os dois itens que coloquei como teste mas, a figura de um aparece, de outro não, e o pior que é o principal problema, é que ele encavala um no outro pela lateral ok.
Aguardo e muuito obrigada, Ecommercelegal

lilih disse...

i like your blog. but i don't understanding anything about your posting, because i don't understanding your language.

Ariane disse...

Ecommercelegal desculpa, não entendi seu comentário. Você já havia comentado aqui antes? Não encontrei outro comentário seu. Para ver onde está o erro você precisa deixar o link da página com o teste que está fazendo, só assim posso ver.

ECOMMERCE LEGAL disse...

Olá Ariane preciso muito de sua ajuda com LISTA DE POSTAGENS POPULARES NA HORIZONTAL, como pode ver no http://ecommercelegal.blogspot a postagem popular está desconfigurada, copiei um trecho do html e colei aqui:
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
#content-wrapper{margin: 0 auto;width: 990px}
#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 */
}
]]>
-




(SÓ COPIEI 2 TRECHOS PORQUE FOI O QUE COUBE AQUI OK)








Espero que possa me ajudar OBRIGADA!!!

Ariane disse...

ECOMMERCE LEGAL na verdade não encontrei a lista de posts populares no seu blog. Você usa os Modelos de Designer e deve seguir os passos para este modelo, acrescentando o CSS pelo painel 'Designer do Modelo' e depois a parte do HTML diretamente no código do template. O código como você colocou aqui não está igual ao que eu passei no tutorial.

ECOMMERCE LEGAL disse...

Oi Ariane, o codigo que esta identico porque eu só copiei e colei. Gostaria de um email onde eu possa postar o html inteiro porque por aqui não dá pela limitação de espaço do comentário, assim poderá ver do que falo. Tudo o que quero é uma lista de postagem popular na horizontal ou como chamam "posts com imagem na horizontal". Agradeço desde já sua atenção!!!!

Isabela Sanches disse...

Oi, Ariane!

Apesar de não saber praticamente nada de html, tenho conseguido fazer meu blog graças a você!
Implantei o blogroll horizontal mas fiquei com duas dúvidas:
1-) Como faço para os posts abrirem na mesma janela da página inicial, e não em outra?
2-) Como faço para transformar o thumbnail da imagem em link para o post? Atualmente está só o título do post...

Muito obrigada!

☼_YaHoO_☼ disse...

Adesivado o template e o template Template Setembro pelo menos e oque está na css.

Postar um comentário

Os comentários são moderados.