, , ,

Personalizando a exibição somente-títulos no Blogger

19 comentários
Blogger Hacks 

Se você já aplicou o Hack “Mostrando apenas o título das postagens na página inicial do blog” ou “Mostrando apenas o título das postagens nas páginas de arquivo e marcadores”, pode ter se decepcionado com o resultado final, pois o Blogger formata a lista de postagens como uma lista de marcadores comum. Este Hack vem complementar os anteriores e ajudar você a formatar a exibição somente-títulos no Blogger/Blogspot.

Para personalizar a sua lista de títulos, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.
Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Agora encontre a parte em Laranja do código do hack original (utilizando o Ctrl+F do seu navegador):

     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <li></li><data:post.title/></a><br/><br/>

     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>

Então SUBSTITUA pela parte em Laranja do seguinte código: 

     <b:if cond='data:blog.pageType != "item"'>
         <span class='titulos'><a expr:href='data:post.url'> 
         <data:post.title/></a></span>
 
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>

Por fim, adicione ao seu CSS (ANTES de ]]></b:skin>) o seguinte código:

.titulos a:link {
}

E acrescente entre as duas chaves { } os códigos de acordo com a formatação desejada (sem o texto entre parênteses) – para escolher as cores para os códigos, utilize esta Tabela de Cores CSS:

font-size:12px; (Tamanho da fonte – altere o numero em laranja de acordo com o tamanho desejado)

color:#000000; (Cor da fonte – altere a parte em vinho para definir a cor)

border:1px solid #00000; (Borda ao redor do texto – altere o número em laranja para determinar a espessura e a parte em vinho para definir a cor)

background-color:#CCCCCC; (Cor de fundo – altere a parte em vinho para alterar a cor)

background:url(http://suaimagem.png); (Imagem de dundo – altere a parte em verde pela URL da sua imagem)

margin:5px; (Margem ao redor do texto – altere o número em laranja para determinar o tamanho da margem. Você também pode dar valores separados para cada direção da borda, por exemplo: margin:5px 2px 5px 10px [cima, direita, baixo, esquerda])

display:block; (Exibe o título como um bloco, estendendo a borda, plano de fundo e margem até o fim da linha)

font-weight:bold; (Negrito)

font-style:italic; (Itálico)

text-decoration:underline; (Sublinhado)

Vamos supor que eu queira meu título em negrito, na cor preta e com tamanho 16. O código ficaria assim:

.titulos a:link {
font-weight:bold;
color:#000000;
font-size:16px;
}

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora você terá a exibição de títulos com formatação personalizada.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Comentários (19)
Wander Veroni 02/03/09 21:43

Oi, Sérgio! Ótima dica. Não sei se vc reparou, mas o Blogger não está aceitando novas alterações no layout - sempre acusa erro. Espero que eles resolvam logo esse problema. Conversei com alguns blogueiros e eles me relataram a mesma coisa.

Abraço,

=]

-------------------
http://cafecomnoticias.blogspot.com

jcdigital 02/03/09 22:15

Eu via sua dica para mostrar título quando alguém faz uma busca ou clica nos marcadores, mas quando eu vi o resultado, pensei: putz, ficou feio e agora?. Aí fui ao Firebug do Firefox, procurei as classes e mexi no CSS e ficou do jeito que eu queria.

Mas dicas explicando cada estilo é muito bom, sucesso!

;)

eusoqueriaumcafe.com 02/03/09 23:51

Eu tentei usar, mas o ruim é que no meu pc o link ao invés de ficar com o mãozinha quando se passa o mouse em cima fica com um marcador como se fosse área de texto. No seu fica assim?

wwwskate4fun 05/03/09 00:09

essa segunda parte não deu certo ou deu erro
porque ao trocar a linha de codigo os titulos se apresentarão horizontamente como esse texto...
quando apliquei o estilo não de resultado
o que pode ser ?
gostei muito desse esquema e ficaria mais contente ainda se podessemos conseguir resolver esta parte ...no Ie ficou aceitavel só com a primeira parte já no firefox fico colado no corpo do blog
qualquer coisa da um grito ae abraço ¨¨O¨¨¨¨O¨¨

nando for fun 05/03/09 13:28

consegui depois de algumas tentativas...
dei uma olhada no codigo fonte do nosso amigo jcdigital já que foi unico que manifestou ter conseguido e percebi que no css dele que tinha um nome diferente ai tomei a liberdade de copiar personalizei do meu jeito e coloquei apenas "titulos" como esta ai na class=Titulos
depois retornarei para fazer o css como você mostrou ai ....valeu abraço a todos parabéns pelo post¨¨O¨¨¨¨O¨¨

iceBreakerSérgio Estrella06/03/09 15:07

@nando for fun

Sabe me dizer por que não conseguiu fazer funcionar nas primeiras tentativas?

Fabricio 01/04/09 00:44

Cara, sabe me dizer por que não funcionou em tudo?
Usei a "Mostrando apenas o título das postagens nas páginas de arquivo e marcadores" e personalizei, entretanto, só funcionou pra alguns dos links de postagem, não para todos.
Em todas as páginas "item" sempre tem alguns não formatados.
Veja aqui, por exemplo.
Se puder me ajudar,
ou não,
agradeço desde já.
Abs,
Fabricio

Fabricio 01/04/09 01:39

Cara, já fiz um kochambre aqui. Funcionou que é uma beleza. Inves de eu abrir um span class="titulo" e codigo css. Eu mandei direto um span style="suaformatação" com a mesma formatação que usaria no css. Fica aí a dica, pra quem tiver algum problema.

abs,
Fabricio

iceBreakerSérgio Estrella01/04/09 08:09

@Fabricio: obrigado cara! Realmente é uma alternativa válida usar diretamente a formatação, apesar de que do primeiro modo deveria funcionar para todos (mas o Blogger tem umas bizarrices mesmo)

CarelPinheiro 24/09/09 19:20

Sérgio,

se de erro na hora de alterar,eu poderia simplismente alterar com o Opera 10?

Ivy 26/09/09 21:23

No meu não deu muito certo continuou aparecendo aqueles negossos de mes e ano e não apareceram todos os arquivos só os desse mes

Este comentário foi removido pelo autor.

Não consigo voltar como era antes.E não acho a parte do código indicada - preciso de ajuda...

Não consegui recuperar o layout através de um backup,
e também não consegui achar a parte do código indicada para refazer do jeito que era antes.

Se puderem me ajudar eu agradeço.

Elton Max JG 12/05/10 16:38

Gostaria de saber como eu faço para ter um efeito hover no background .

Para que a cor do background mude quando passar o mouse !

poderia me ajudar ?

Goatkvlt Perversor 20/06/10 17:33
Este comentário foi removido pelo autor.
fabiocd 26/06/10 15:19

Esta é uma boa dica!
Agora como eu faço para personalizar o titulo como esta aqui no site;

Data, Titulo do Post, Quantidade de comentarios?

????

Paulo 25/01/11 11:08

Não tem como fazer tipo um lista não? Como a Clau do Mundo Blogger fez? http://www.mundoblogger.com.br/search?updated-max=2010-12-04T17%3A20%3A00-02%3A00&max-results=8

Wésley Câmara 27/01/11 12:12

Valeu... não tinha funcionado de início, mas fazendo o que o Fabricio disse deu certinho.
Abço

Marlon 01/11/11 18:19

Não deu certo, nem como o Fabricio falou nem de jeito nenhum. Mas, vlw assim msm...

Postar um comentário