21 de jul de 2011

Mostrar apenas o título das postagens


Este pode ser um recurso bem interessante. Ele pode ser implementado tanto no Blogger novo quanto no antigo.

Vá até o HTML do blog, clique em "Expandir modelos de widget e procure pelo código:



Se o seu blog é o novo Blogger, clique em Expandir modelos de widget, e depois procure por:




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


Agora substitua por este se quer sem os comentários.:

 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'> 
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>
 


ATENÇÃO: Se você quer deixar o número de comentários junto ao título o código então será esse:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<span class='numComments'><a expr:href='data:post.url'>
<data:post.numComments/></a>
</span>
<b:include data='post' name='post'/>
        <b:include data='post' name='comments'/>
      <b:else/><b:if cond='data:blog.pageType != "item"'>
         <span class='posth2'><a expr:href='data:post.url'> 
         <data:post.title/></a></span>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if></b:if>

Para personalizar os títulos

Procure por:

]]></b:skin>


E cole o código abaixo acima dele.


/* PostH2-----------------------------------------------*/
.posth2 a:link{
display:block;
font-size:24px;
border-left: 6px solid #000;
border-bottom:1px solid #808080;
color: #808080;
margin: 0 1px 1px 0;
padding: 4px 0 2px 6px;
}

.posth2 a:visited{
border-left: 6px solid #ccc;
color:#ccc;
border-bottom:1px solid #ccc;
margin-left:1px;
display:block;
}
.posth2 a:hover{
display:block;
border-left: 6px solid #cc0000;
color:#cc0000; /* letra preta */
border-bottom:1px solid #cc0000;/* borda preta */
}



Imagens de setinhas AQUI.
Código de cores AQUI




Clique agora em "Expandir modelos de widget" e procure pelo seguinte código:

<b:if cond='data:post.title'>

Cole então o código abaixo dele:

<span class='numComments'>
<a expr:href='data:post.url'>
<data:post.numComments/></a></span>


Para personalizar os comentários


/* Numcomments-----------------------------------------------*/
.numComments {
  background: url(http://1.bp.blogspot.com/_BaCxSD9NFn8/TFm1xEBt4pI/AAAAAAAABxw/gJUBdowTIuQ/s320/comment.png) no-repeat bottom;/*balão azul*/
  float:right;
  padding: 1px 2px;
  font-size: 12px;/*tamanho do número*/
  width: 20px;
  height:16px;
  color: #fff;/*cor do número*/
}
.numComments a:link{
  margin: 13px 6px;
  color: #ffffff;
}
.numComments a:visited{
  margin: 13px 6px;
  color: #000000;
}
.numComments a:hover{
  margin: 13px 6px;
  color: #FAD62C;
}





Para personalizar a data, preste atenção pois tem dois modos. Um é colocando a data junto aos títulos e outra é colocando as datas acima dos títulos do mesmo dia. Veja as fotos com os exemplos.



Data junto aos títulos




Para que a data fique na mesma linha do título substitua o código abaixo:

h2.date-header {
  margin:1.5em 0 .5em;
  }

 Por este:

h2.date-header { float: right;text-align: right; margin: 1px 0 3px 0;padding: 5px 0px 0 0;}

Salve.

Agora clique em  "Expandir modelos de widget" e procure pelo seguinte código:


<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>

E substitua por:

<b:if cond='data:post.dateHeader'>
<script>var lastDate= '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(lastDate);</script>
</h2>
</b:if>

Salve e está pronto.


Data acima de todos os posts do mesmo dia.




Se você prefere  que a data fique acima de todas os posts do mesmo dia  basta substituir:

h2.date-header {
  margin:1.5em 0 .5em;
  }

Por:



.date-header {
margin:20px 0 3px 0;
padding: 3px 0 3px 4px;
color: #FF4040;/*cor da fonte*/
font-size: 10px; /*tamanho da fonte*/
background: #cccccc;/*cor de fundo*/
}

Vi essa dica no Ice Breaker

19 comentários:

  1. Puxa, realmente isto me serviu! Já que estou criando um blog de notícias e customizando um template para o mesmo.
    Parabéns!!!

    ResponderExcluir
  2. elke, tem uma maneira mais fácil agora com o jump break do blogger, dai n precisa mexer nos códigos (p/ quem eh burrinho como eu rss)
    aqui o link http://www.dicasblogger.com.br/2009/09/jump-break-o-leia-mais-do-blogger.html

    ótimo o seu post e seu blog, sempre acompanho

    abraços
    :]

    ResponderExcluir
  3. @Felipe Guedes PinheiroOi Felipe, muito obrigada pela preocupação e por ajudar com essa dica mas veja a diferença:
    O jump-break serve para, dentro de um post, colocar o "Leia mais" e este post ensina a deixar seu blog mostrando apenas e somente os títulos das postagens, sem mostrar conteúdo, entende ? Mas mesmo assim agradeço. Beijos, seja bem vindo e obrigada por colaborar.

    ResponderExcluir
  4. Como faço para mostar somente o Titulo, Comentários, Data e o Marcador abaixo?

    ResponderExcluir
  5. Não conseguir achar o código para colocar a data ao lado da notícia????

    ResponderExcluir
  6. Gostaria de usar esse hack de mostrar apenas o título das postagens, só que em um marcador de minha escolha, e não na página inicial, teria como ?

    ResponderExcluir
  7. Fiz algumas adaptações neste tutorial, ficou igual ao sitema de um blog de noticias, mostrando a data a cima, e a hora ao lado. tenho o tutorial pronto aqui.. precisa mudar alguns códigos.. se vcs se interessarem aqui esta o resultado pronto http://www.vilavargas.blogspot.com/ . se quiserem o tutorial é só pedir.

    ResponderExcluir
  8. @Osmar Jr claro meu chapa, pode mandar. Os leitores agradecem. Beijos.

    ResponderExcluir
  9. @Elke di Barros

    Arquivo enviado neste email templateseacessorios2@gmail.com

    esta num PDF em anexo. qualquer duvida.. só dizer

    ResponderExcluir
  10. Olá irmão. Você sabe como colocar o título oculto nas pastagens? De modo que eles sejam definidos e existam, mas não apareçam acima do post.

    Desde já, grato pela atenção. =)

    Victor...

    ResponderExcluir
  11. Muito bom o tutorial. Muito obrigado!

    ResponderExcluir
  12. Parabéns pelo tutorial eu estava apanhando nesse novo modelo do blogger mais você ajudou muito.Muito obrigado sou seu fã \o/

    ResponderExcluir
  13. Gente, pelo amor de Deus me ajude! fiz tudo como você ensinou e os títulos não mudam! aparecem na pimeira pagina como antes, eu preciso somente dos títulos
    Grata
    Debora

    ResponderExcluir
  14. Débora, acabei de instalar este hack e está funcionando perfeitamente.

    ResponderExcluir
  15. Fala parceiro! Tem como botar imagem nisso? Digo, botar imagem embaixo do título?

    ResponderExcluir
  16. O que estou procurando há mais de mês, e não achei em lugar nenhum, é mostrar apenas as imagens das postagens na página inicial do blogger, e se der o título embutido (mostrado apenas quando passa o mouse em cima da imagem). Meu Deus, será que um dia vai sair um tutorial desse aqui no T&A?? Esperando ansiosamente!!!!

    ResponderExcluir
  17. A data aqui não aparece em postagens que foram postadas no mesmo dia, alguém me ajuda a resolver isso.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube