Saiba como é feito esse modelo: "Lista de Postagens Populares na Horizontal"

Este presente post, vem a ser referente a um belíssimo e funcional tutorial, feito por por Ariane, do blog   templatesparanovoblogger,
...considero bem feito e funional, e bonito, por conseguinte, quero tê-lo sempre por perto! 

"Lista de Postagens Populares na Horizontal"

 
...widgets..." 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 considerada por Ariane, do blog   templatesparanovoblogger
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 exemplo de Ariane, 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...
...  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, 
...Ariane fez " 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>

 

fonte e créditos: 
templatesparanovoblogger

Saiba Como se Faz:: » Sidebar »" Expandindo cada widget do blog"

Aqui neste espaço... 

Apenas divulgo e indico... 

Posts, notícias, dicas etc. 

...com devidas fontes  e créditos:    

Expandindo cada widget do blog

..." ter widget do seu blog "expandível"

...primeiro copie o título do widetg

que você quer expandir."

Agora,

vá até o HTML do seu blog e

..."e, em seu teclado,

clique na tecla F3

e cole aí o título do widget






..."Encontrando...

...agora,

um pouco abaixo

você verá um código assim:

<b:includable id='main'>

"  Cole abaixo dele este código"
▼

<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

*Preferindo uma imagem, troque o código em roxo por este código abaixo e coloque aí o endereço da imagem.

<img src="ENDEREÇO DA IMAGEM"/>

..."   um pouco mais abaixo, procure por este código:

<div class='widget-content'>

"  Agora, embaixo dele

...cole este código abaixo

▼

<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

..."    mais abaixo procure por este outro código"

<b:include name='quickedit'/>

..."   cole acima dele este código:"

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>

..."   visualize,

se deu tudo certo,

é só salvar."

"    Exemplo de como o código

deverá ficar"

"   O código em preto

é o que deverá ter no HTML do seu blog,

e a parte em vermelho

é a que você  irá inserir."

Deverá ficar assim:                                                                                      

<b:widget id='Text1' locked='false' title='Do coração' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

fonte e créditos:

templateseacessorios

Obrigada Elke