PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

08/12/2010

Como mostrar apenas títulos nas páginas dos Marcadores do Blogger…

Blogger

 Marcadores do Blogger

Marcadores são fundamentais para a organização e a navegabilidade do seu blog. Para quem não conhece ainda, eles são responsáveis pela classificação de suas postagens em Categorias. Estas categorias então, poderão ser facilmente colocadas na lateral do seu blog, servindo como um menu aos seus visitantes…

lightbulb_48

Se você ainda não usa marcadores, leia o artigo do Dicas Blogger que ensina passo a passo como criar e colocar marcadores no blog: Como inserir marcadores nos posts.

Como vimos anteriormente, os marcadores são importantes para facilitar a busca de artigos do blogger. Mas dependendo do template utilizado, os marcadores quando acionados exibem postagens inteiras ou a introdução dos artigos publicados, o que torna a busca difícil e demorada.

Para contornar isso, podemos alterar a forma de apresentação das postagens, mostrando apena os links dos títulos dos artigos…

image

Help

Nota1: O hack apresentado neste artigo funcionará também para páginas de arquivo e pesquisas do blog…

Nota2: Em alguns templates a listagem é apresentada de forma parcial, obrigando o leitor a clicar em [Mostrar postagens mais antigas], o que prejudica  um pouco a funcionalidade do hack.

Hack para exibir títulos da postagem

Veja abaixo o exemplo de uma lista de postagens do marcador Cursos (do blog Visual Dicas Informativo).

 image

Observe que no template original do nosso exemplo, a página do marcador mostra apenas a introdução da postagem e uma imagem, um pouco diferente de outros templates que mostram o artigo completo.

Mesmo com uma formatação mais enxuta como no exemplo, o usuário poderá ter dificuldades para encontrar o artigo de interesse. E se existirem muitos artigos, os leitores poderão desistir e sair do seu blog.

Uma lista só com títulos pode rapidamente mostrar todo o conteúdo de um marcador, facilitando bastante a busca e prendendo mais os seus leitores…

como fazer a alteração

Para transformar a apresentação da página de marcadores, será necessário alterar o código HTML do template do blog…

1- Editor HTML

Acesse o blogger.com e clique no link [Design].

No menu superior, clique em [Editar HTML].

Selecione a caixa [Expandir modelos de widgets], como na figura abaixo:

image

warning_48

Atenção:

Recomendamos que salve uma cópia do template antes de qualquer alteração no modelo do blogger. Para isto clique no link [Baixar modelo completo]. Se algo der errado, faça o upload do modelo em [Fazer upload].

Se puder, avalie primeiro o hack em um blog de teste…

2 – Alterar o código

warning_48

Atenção:

Obviamente que para fazer isto, você já deverá ter ativo uma lista de marcadores no seu blog. <<<

Após ter selecionado a caixa [Expandir modelos de widgets] utilize a tecla de atalho [CTRL+F] e localize o termo: <b:include data='post' name='post'/>

image
Agora substitua todo o código:

cross_48

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


Por este:

lightbulb_48

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a>
</li></ul>
</div>

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

image

Visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo]. (As modificações não aparecem na visualização do blog, é necessário salvar o modelo para que o hack funcione)

Agora teste as alterações. Observe que aparece as datas acima ou ao lado dos títulos, conforme a configuração do template.

image

As datas podem deixar a listagem um pouco confusa. Se desejar retirá-las, faça a alteração conforme mostramos abaixo:

3- Excluir datas dos títulos

Volte para o edito HTML do blogger e Selecione a caixa [Expandir modelos de widgets].

Utilizando a tecla de atalho [CTRL+F] localize : <b:if cond='data:post.dateHeader'>

image

Substitua todo o código:

cross_48

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


Por este:

lightbulb_48

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

image

Visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo].

Observe agora que a lista aparece sem as datas, com apresentação menos confusa e com uma aparência mais profissional.

image

Se você ainda quiser, poderá acrescentar estilo a sua listagem, veja como:

4- Acrescentando estilo a sua lista

Para incrementar ainda mais a sua listagem de posts, você poderá inserir estilos em CSS. Abaixo mostraremos um exemplo, mas que você poderá mudar a vontade, dependendo do seu conhecimento em CSS.

Volte para o edito HTML do blogger e selecione a caixa [Expandir modelos de widgets].

Utilizando a tecla de atalho [CTRL+F] localize : ]]></b:skin>

image

Insira o código CSS antes (acima) da tag  ]]></b:skin>

lightbulb_48

#titulos{ /*espaço da lista */
margin:10px 0px;
background:#f8f8f8;
padding: 1px;
border:1px solid #e4e4e4}

#titulos ul{ /*espaço do item */
margin:0px;
list-style-type:none;
background:#e4e4e4;
padding:1px;}

#titulos li{ /* item da lista */
background: #f8f8f8 ;
padding: 5px 0px 10px 30px;
font-weight:bold}

Visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo].

Obs.: Isto é apenas um exemplo… Você poderá alterar o código CSS da maneira que desejar. Veja como ficou o nosso exemplo abaixo:

image Para completar, você poderá colocar ícones ilustrativos na frente dos títulos. Veja como:

5- Inserindo bullets ilustrativos

Acesse o site supertrafego.com e escolha um bullet que achar que combine melhor com a sua lista (são mais de 1600 bullets):

ATENÇÃO: o site supertrafego.com não está disponível atualmente – utilize como opção o site : Free bullet  e proceda de forma similar ao que está apresentado a seguir…

image

Copie o URL (endereço) da imagem (clique sobre a imagem com o botão direito). No nosso exemplo escolhi o bullet: http://www.akimesmo.com/images/Bullets/000000032.gif

Volte para o edito HTML do blogger e selecione a caixa [Expandir modelos de widgets].

Utilizando a tecla de atalho [CTRL+F] localize : <div id='titulos'><ul><li>

Imediatamente após as tags <div id='titulos'><ul><li> acrescente o código abaixo:

lightbulb_48

<img src='http://www.akimesmo.com/images/Bullets/000000226.gif' style='margin-right:5px;text-align:center;'/>

Substitua o link em laranja pelo o URL do bullet que você escolheu…Você também poderá inserir qualquer outra imagem, desde que hospedada na rede da internet…

Obs.: Recomendo que você salve a imagem (bullet) escolhido em um servidor de hospedagem ou em um site especializado em armazenamento de arquivos, como o ImageShack, por exemplo.

image Veja agora como ficou o nosso exemplo de marcadores mostrando apenas títulos das postagens com estilo e bullets…

image

warning_48

Atenção:

Se você não gostar do resultado ou se o hack não funcionar corretamente, refaça todo o processo e volte na condição original…

Se o hack causar algum erro no seu template, utilize o backup que você criou e clique em Fazer Upload


Veja também:

Aprenda a criar e exibir listas personalizadas dos seus posts (apenas para o Blogger)

Como criar um menu suspenso para Marcadores no Blogger

Como colocar gifs animados no “Blogger”

14 comentários:

Christiano Augusto disse...
Este comentário foi removido pelo autor.
Christiano Augusto disse...

E se eu quiser aumentar a font para que o título fique maior? como faço?

Visual Dicas - Cursos e Treinamentos disse...

Christiano,

Para alterar o tamanho da fonte, basta acrescentar a propriedade "font-size" em #titulos li (CSS).

No exemplo abaixo, colocaremos uma fonte com tamanho 16px...

#titulos li{ /* item da lista */
background: #f8f8f8 ;
padding: 5px 0px 10px 30px;
font-weight:bold;
font-size:16px;}

Christiano Augusto disse...

Muito Obrigado, é que eu havia me esquecido de um detalhe.Mas com um pouquinho de atenção corrigi.

Obrigado mais uma vez, me ajudou muito,
Christiano Augusto - www.heroisdanet.com

Laís disse...

E como eu faço para aparecer apenas a primeira postagem e o resto apenas os titulos??

Obrigada

TioKratos disse...

opa blz? ai aqui deu tudo certinho, só queria saber como que eu faço para mudar a cor do titulo da postagem'-'


obrigado!

Wandy Cassoma disse...

Olá ...utilizei este código e ficou muito bem no meu blog, então só passei pra agradecer e para lhe parabenizar pelo trabalho, parabéns e sucessos.

Túlio Athélio disse...

olá estou com um problema eu usei um hacker de paginar as postagens e agora e este hack esta funcionando nas paginas dele

Xande Cientista disse...

Oi
Eu queria muito conseguir colocar o título com uma imagem da postagem.
tem alguma maneira?

Atitude e Ousadia BR disse...

Amigão uma dúvida como ter um marcador e tambem o titulo das postagens saindo deles.

Tipo:
Marcador X → postagem XYZ
Marcador Y → postagem ABC

Angelo Luis Ferreira disse...

Olá atitude,

Quando você define um marcador para uma postagem, você considera que esta postagem fará parte de uma categoria (grupo) referente ao marcador definido. Dessa forma, o marcador X terá sempre as postagens x,y e z, desde que você já tenha definido estas postagens previamente para o marcador em questão.

Abraços!

Atitude e Ousadia BR disse...

Isso entendi, o que eu quero saber é, por exemplo eu tenho um menu que foi feito apartir dos marcadores e nesse menu sair minhas postagens associadas aos marcadores?

Tipo se vc for no meu blog vc vai ver um menu ele foi feito apartir de marcadores só que eu quero que saia as postagens ligadas a eles.

Angelo Luis Ferreira disse...

Olá Atitude,

Acho que entendi o que você quer....


Acesse o link Como criar um menu no seu “blogger” utilizando apenas uma lista

Encontre o item sobre marcadores....

Abraços!

Auto-hemoterapia Dr. Luiz Moura disse...

Olá.
Muito grato pelas dicas.
Funcionou perfeitamente.
Forte abraço

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More