Pesquisar

Mostrando postagens com marcador designer. Mostrar todas as postagens
Mostrando postagens com marcador designer. Mostrar todas as postagens

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
Share:

"Designer de modelo do Blogger"

"Designer de

 modelo do

 Blogger"

O Designer de modelo do Blogger é uma maneira nova e fácil de personalizar a aparência de seu blog. Ele fornece uma variedade de modelos, imagens, cores e layouts de coluna para deixar o blog com a sua cara. Para acessar o Designer de modelo, clique no menu suspenso ao lado do ícone cinza "Lista de postagens" e selecione Modelo. A partir desse menu, você pode escolher e personalizar seu modelo.
Enquanto você experimenta o Designer de modelo, será exibida uma visualização de como ficará o blog com base nas suas escolhas. Para expandi-la, pressione a opção Expandir visualização entre o painel do Designer de modelo do Blogger e a visualização. Quando estiver satisfeito com o visual do seu blog, pressione Aplicar ao blog no campo superior direito do Designer de modelo para aplicar as alterações.
Para começar a usar o Designer de modelo do Blogger, selecione um dos modelos disponíveis criados por profissionais. Cada modelo é exibido como uma miniatura grande. Quando você clica em um modelo, diferentes variações do original são exibidas. Clique para selecioná-las. Observe que ao clicar em um novo modelo você excluirá todas as personalizações feitas em um modelo anterior.
Depois de escolher um modelo, você pode continuar personalizando o visual do seu blog.
Não importa qual modelo é exibido no Designer de modelo, você pode ver todos eles no seu blog usando a miniatura Agora no blog no painel de controle do Designer de modelo. Outra alternativa é clicar nessa miniatura para redefinir o modelo no Designer de modelo para a versão atual do seu blog.

Plano de fundo

É possível alterar a aparência de um modelo mesmo depois de escolhê-lo. Com o Designer de modelo do Blogger, você pode escolher a cor ou a imagem do plano de fundo do seu blog e alterar o esquema de cores. Para começar a personalizar o seu plano de fundo, clique na miniatura em Imagem de plano de fundo.
Um dos novos recursos do Designer de modelo permite alterar a cor da sua imagem de plano de fundo. Isso é possível quando essa imagem tem transparência. Um plano de fundo transparente possui um quadriculado no canto superior direito da imagem.
Para alterar a cor do plano de fundo, selecione a imagem, clique em Cor de tema principal e selecione a cor de sua preferência.
Só é possível alterar a cor do plano de fundo se ele for transparente. Além disso, se o modelo escolhido possui plano de fundo cinza, não será possível alterar sua cor.
Além de selecionar e personalizar a imagem de plano de fundo do seu blog, também é possível selecionar um tema de cor para aplicar aos aspectos do seu blog, incluindo textos e links. Para fazer isso, experimente a Cor de tema principal ou escolha um dos nossos Temas sugeridos. Alterar a cor do tema do seu blog mudará as cores de todos os aspectos do modelo de blog que podem ser modificados.
Observação: se a imagem de plano de fundo não for transparente, os temas alterarão o esquema de cores de texto do blog
Para obter informações sobre como fazer upload de sua própria imagem de plano de fundo personalizada, consulte nosso artigo sobre como adicionar CSS a seu blog.

Layout

É possível escolher várias opções de layout para o seu blog, com até três colunas. 
Esses layouts permitem arrastar e soltar gadgets na página. 
Também há várias opções de layout para o rodapé do blog.
O Designer de modelo do Blogger não permite adicionar, remover ou editar gadgets. Para fazer isso, use a guia geral Layout.

Ajustar largura

Você pode ajustar a largura do blog e as colunas da esquerda e da direita arrastando o controle deslizante para diferentes partes do layout.  
As opções mostradas aqui correspondem ao tipo de layout escolhido. 
Se, por exemplo, você escolher um layout com colunas dos dois lados, você verá controles deslizantes à esquerda e à direita. Se você escolher um blog com apenas uma coluna à esquerda, somente essa opção será exibida aqui.

fonte:
support.google.com/blogger/
Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares