Estilos para o gadget Postagens Populares

Resolvi brincar um pouco mais com o CSS e acabei decobrindo outros estilos que podem ser aplicados ao gadget Postagens Populares, criando assim uma continuação do  post Personalizando o gadget Postagens Populares.
Pelo que pude notar, as miniaturas de imagens só funcionam em posts que começam com uma imagem. Se a imagem estiver no meio do post, por exemplo, sua miniatura não vai aparecer no gadget. Como eu quase não usava imagens no topo dos meus posts, precisei pegar o blog do meu irmão “emprestado”, para realizar os testes.
Sabendo que a maioria  não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.

#PopularPosts1 .widget-content{  /*estilo para o conteúdo*/ padding: 3px;
}
#PopularPosts1 a {  /*cor do título*/ color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/ color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/ color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/ border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/ color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo da fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 2– conteúdo com fundo transparente e com borda
Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 3 – conteúdo com fundo preto e borda cinza
No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
background: #333;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #fff; font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Para adequar ao template de vocês, mudem as cores em color e background. Talvez seja necessário mexer nas margens (margin) e preenchimentos (padding).
Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:

#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}

Para manter o ícone e acertar o espaçamento com o texto, acrescente:

#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}

Mais completo que isto, impossível, né? Usem a criatividade e boa diversão o/

Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.
No post Novo gadget – Postagens populares, ensinei como colocar o gadget na barra lateral (sidebar) do blog.
O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. Vejam um exemplo na imagem abaixo:

Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger e fiz as alterações necessárias para o meu template.
Acredito que o código deve variar de template para template, mas vamos lá.
Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo:

#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}

A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.

Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:

#PopularPosts1 li{
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{
border: 1px solid #ccc;
background: #efefef;
}

Para mudar a cor do resumo dos posts, acrescente este trecho:

.item-content{
color: #1d85dd;
}

Mude as cores a seu gosto. Se não sabe os códigos , acesse uma tabela de cores
O CSS final seria este, com as devidas modificações de acordo com cada template:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}
#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/
border: 1px solid #ccc;
background: #efefef;
}
.item-content{ /*Estilo para o resumo dos posts*/
color: #1d85dd;
}

ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/
padding-left: 15px;
padding-top: 3px;
}

por este outro código:

#PopularPosts1 li{ /*Estilo para retirar o ícone*/
background-image:none;
}

Este post foi criado à pedido de querida leitora Lucy – Amor e Paz Sem Fronteiras
Créditos de parte do código CSS ao Mundo Blogger, um dos meus blogs favoritos

Menu Horizontal no Designer do Modelo

O menu horizontal ou linkbar, é aquela barra que aparece, geralmente, embaixo do cabeçalho do blog, onde colocamos links para destacar posts e páginas importantes. 
Os modelos mais antigos do Blogger (tipo o Mínima), não vinham com esse recurso; então, nós usuários é que tínhamos que implementá-lo em nossos blogs, através de HTML e CSS, como é o caso dos templates do Dicas Blogger.
Relembrando, atualmente contamos com três opções de templates para Blogger/Blogspot. Vejam detalhes em Opções de templates para Blogger
Se você usa um modelo customizado que possui linkbar, já deve saber como  colocar os links em destaque, certo? Se não sabe, acesse: Como inserir links na linkbar
No Designer do Modelo, o menu horizontal ou linkbar, recebeu o nome de guia. Para quem está começando a usar o Blogger agora, pode ser um pouco complicado  colocar os links nessas guias. Existem 2 formas pra fazer isso:

1. através do gadget páginas
2. através do gadget lista de links

O gadget páginas exibe o título de cada página criada no blog, em diversas áreas do template e ainda permite que o usuário escolha quais os links que serão exibidos.
Inserindo links através do gadget páginas
Antes de mais nada, é preciso criar as páginas que vão compor a guia:

• Páginas estáticas no Blogger/Blogspot

Entre em design>elementos de página. No  espaço que fica logo embaixo do título do blog, clique em adicionar gadget e escolha o gadget páginas.

Marque as páginas que deverão aparecer na guia horizontal e clique em salvar.


Inserindo links através do gadget lista de links
Siga o mesmo procedimento anterior, mas escolha o gadget lista de links.
Coloque a URL no local indicado, dê um nome e clique em adicionar link.
Repita esse passo para cada novo link que você quiser adicionar na guia, movimente-os de acordo com a sequência que deseja exibi-los e salve.
Apesar da praticidade do gadget páginas, eu prefiro usar a lista de links, pois com ela eu posso colocar, além das páginas, links de posts e até links de outros sites.

Como colocar share buttons do Blogger

Este é um post que estou devendo há tempos, já que o recurso foi lançado em junho. Trata-se de como ativar os botões de compartilhamento ou share buttons oficiais do Blogger.
Esses botões servem para enviar os posts por email e/ou para o Twitter, Facebook e Google Buzz, com apenas 1 clique.
Como ativar os share buttons nos templates do Designer do Modelo
Entre em design>elementos de página. Em postagens do blog, clique em editar

Irá abrir uma janela pop-up. Marque a caixa Mostrar botões de compartilhamento

Clique em salvar e pronto! Os botões de compartilhamento serão ativados.

Os botões aparecem com fundo cinza e, ao passar o mouse, ficam coloridos.
Como ativar os share buttons em templates personalizados
Entre em design>editar HTML. Marque a caixa expandir modelos de widgets.
Cole este código de acordo com o local onde você quer exibir os botões:

<div class='post-share-buttons'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

Embaixo do título do post
Colar antes de <div class='post-body'> ou de <div class='post-body entry-content'>
No final do post
Colar antes da linha <div class='post-footer'>
No rodapé dos posts
Colar antes de <p class='post-footer-line post-footer-line-3'> ou de <div class='post-footer-line post-footer-line-3'>
Clique no botão visualizar e se tudo estiver ok, salve o template.

Personalizando os links de navegação do Blogger

Os links de navegação, são aqueles 3 links que aparecem no final de cada página dos blogs do Blogger. Eles servem para auxiliar o visitante a “navegar” pelo arquivo do blog, avançando e retrocedendo as postagens do arquivo.


Considero obrigatório, o uso dos links de navegação, já que sem eles ficaria muito complicado ter acesso a todos os posts que não se encontram na página inicial.

• Como recuperar os links de navegação do Blogger

Muito bem. Com um pouco de CSS e com algumas mudanças no código original do Blogger, podemos fazer maravilhas com os links de navegação.

Primeiramente, irei ensinar como mudar o código original. Antes de começar, faça um backup completo do template ou use um blog de testes.

Entre em design>editar HTML, marque a caixa expandir modelos de widgets  e, usando o comando Crtl+F do teclado, procure por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Substitua tudo por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='posts mais antigos'>próxima página &#187;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Salve o template.
Agora iremos aplicar o CSS.  Procure por este trecho:

#blog-pager-newer-link {  
float: $startSide;
}

#blog-pager-older-link {
  float: $endSide;
}

#blog-pager {
  text-align: center;
}

**Para blogs com template do Designer do modelo, o trecho é este:

.blog-pager { 
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

Substitua tudo por:

#blog-pager a {
font-family: Arial;
color: #333; /*Cor da letra*/ font-size: 13px; /*tamanho da letra*/
padding: 5px;
text-decoration: none;
background: #e6e6e6; /* cor do fundo*/ border: solid #ccc 1px; /*cor da borda*/ }
#blog-pager a:hover {
color:#fff;  /*Cor da letra ao passar o mouse*/ background-color:#0071bb;  /*Cor da fundo ao passar o mouse*/ }
.blog-pager-older-link {
float: right;
}
.blog-pager-newer-link {
float: right;
}

Os ítens em vermelho, podem ser modificados livremente. Veja a tabela de cores.
Para colocar numeração nos links, vá até o Mundo Blogger: Numerar Páginas no Blog

Resultado do sorteio–livro Google Analytics

O sorteio valendo 1 exemplar do livro Google Analytics, oferecimento na @novateceditora, foi realizado às 13:59, através do site Sorteie.me e o grande vencedor foi Silvio Reis (@o_silvio).
Para ver o resultado, acessem: http://sorteie.me/1tC2
Confesso que fiquei impressionada com o alcance dessa promoção. Foram 766 RTs, 6.366 cliques e 561 RTs únicos em 72 horas.

fonte: http://kingo.to/mjG+

Deixo os meus parabéns ao Sílvio e um agradecimento a todos que participaram!
Lembro ainda que, para comprar o livro Google Analytics com 25 % de desconto, é só clicar aqui e informar o código promocional dicasblogger (válido até 30/11)

Novas fontes no Designer do Modelo

O blog oficial do Blogger in Draft (página de testes do Blogger), anunciou a chegada de 40 novas fontes para os templates do Designer do Modelo - More Fonts Means More Choice.
As fontes ou fontes tipográficas, nada mais são do que o tipo de letra que usamos em nossos blogs.
Para acessar as novas fontes, entre no painel do Blogger in Draft, procure por design>designer do modelo> avançado.
Na guia avançado, encontre a área do layout onde a nova fonte será aplicada.
No exemplo abaixo, escolhi mudar a fonte da guia (também conhecida como  linkbar).

ATENÇÃO! Este recurso ainda não está disponível na página padrão do Blogger.