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.
Anterior
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
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
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!
;)
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?
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¨¨
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¨¨
@nando for fun
Sabe me dizer por que não conseguiu fazer funcionar nas primeiras tentativas?
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
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
@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)
Sérgio,
se de erro na hora de alterar,eu poderia simplismente alterar com o Opera 10?
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
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.
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 ?
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?
????
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
Valeu... não tinha funcionado de início, mas fazendo o que o Fabricio disse deu certinho.
Abço
Não deu certo, nem como o Fabricio falou nem de jeito nenhum. Mas, vlw assim msm...