Olá pessoal, resolvi utilizar o recurso do blogger de mostrar as postagens
resumidas na página inicial com um botão para continuar lendo, é bom
organizado.
Tem muitos metodos de se fazer o "Leia mais", mas eu recomendo o proprio recurso do blogger, pois é mais compatível e muito mais leve.
Vamos começar...
Vamos começar...
Como fazer um botão de "Leia mais..."?
Eu gosto de facilidade, nada de muito trabalho, então o programa que eu recomendo para editar imagens é o PhotoScape, se vc não tem este programa clique aqui para fazer o download, e instale ele em seucomputador.
1º Procure alguma imagem para colocar no seu botão, depois abra ela no PhotoScape e vá se familiarizando com o programa.
Como eu fiz o botão aqui do qualo:
2º Feito o botão, salve em seu computador, e agora vamos hospedar nainternet. Para isto entre no http://imageshack.us/, este é um site onde podemos hospedar imagens gratuitamente, clique em Browse:
3º Na janela que se abre selecione o imagem do seu botão e clique em"Abrir" e depois em "Carregar agora";
4ºDepois de terminar de carregar, copie o endereço dentro da linha "Link direto", este é o endereço de sua imagem;
5º Cole o endereço de sua imagem em um documento de Bloco de notas ou deixe a página do ImageShack aberta;
Ativar o recurso "Leia mais" no blogger
1º Acesse sua conta no blogger e vá em "Configurações", na aba"básico" na parte de baixo da página em "Configurações Globais", veja se esta marcada a opção "Editor atualizado", se não estiver marque e clique em "Salvar configurações";
2º Agora clique em "Postagem" veja se já aparecem as novas ferramentas:
3º Escreva uma postagem de teste, e logo abaixo do paragrafo que vc quer que apareça na página inicial, vc clique no botão indicado na imagem acima. Repare que aparece uma linha cinza, é neste ponto que aparecerá o "Leia mais";
4º Poste e veja na PÁGINA INICIAL se apareceu a opção "Mais informações>>", se não apareceu é porque não está ativado em seu template (templates antigos), então vamos ativar:
O recurso do LEIA MAIS não aparece, veja como fazer:
1º Faça um BACKUP de seu modelo de template;
2º Vá em "Design" e em "Editar HTML", marque a opção "Expandir modelos de widgets";
3º Aperte "Ctrl + f" e procure pelo código abaixo:
4º Logo abaixo cole este código:
5º Pronto agora já irá aparecer.
Como colocar imagem no lugar de "Mais informações>>"
1º Em "Design" e "Editar HTML" com a opção "Expandir modelos de widgets" marcada, aperte "Ctrl + F" e procure pelo código:
e troque por:
Substitua a parte vermelho pelo endereço do seu botão, aquele que hospedamos no começo do tutorial.
ou se preferir colocar imagem e texto substitua por:
É isso ai pessoal, salve e faça isto nas postagem que vc quiser.
Não esqueçam de comentar!
1º Procure alguma imagem para colocar no seu botão, depois abra ela no PhotoScape e vá se familiarizando com o programa.
Como eu fiz o botão aqui do qualo:
3º Na janela que se abre selecione o imagem do seu botão e clique em"Abrir" e depois em "Carregar agora";
4ºDepois de terminar de carregar, copie o endereço dentro da linha "Link direto", este é o endereço de sua imagem;
5º Cole o endereço de sua imagem em um documento de Bloco de notas ou deixe a página do ImageShack aberta;
Ativar o recurso "Leia mais" no blogger
1º Acesse sua conta no blogger e vá em "Configurações", na aba"básico" na parte de baixo da página em "Configurações Globais", veja se esta marcada a opção "Editor atualizado", se não estiver marque e clique em "Salvar configurações";
2º Agora clique em "Postagem" veja se já aparecem as novas ferramentas:
3º Escreva uma postagem de teste, e logo abaixo do paragrafo que vc quer que apareça na página inicial, vc clique no botão indicado na imagem acima. Repare que aparece uma linha cinza, é neste ponto que aparecerá o "Leia mais";
4º Poste e veja na PÁGINA INICIAL se apareceu a opção "Mais informações>>", se não apareceu é porque não está ativado em seu template (templates antigos), então vamos ativar:
O recurso do LEIA MAIS não aparece, veja como fazer:
1º Faça um BACKUP de seu modelo de template;
2º Vá em "Design" e em "Editar HTML", marque a opção "Expandir modelos de widgets";
3º Aperte "Ctrl + f" e procure pelo código abaixo:
<data:post.body/>
4º Logo abaixo cole este código:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
5º Pronto agora já irá aparecer.
Como colocar imagem no lugar de "Mais informações>>"
1º Em "Design" e "Editar HTML" com a opção "Expandir modelos de widgets" marcada, aperte "Ctrl + F" e procure pelo código:
<data:post.jumpText/>
e troque por:
<img src='endereço da sua imagem'/>
Substitua a parte vermelho pelo endereço do seu botão, aquele que hospedamos no começo do tutorial.
ou se preferir colocar imagem e texto substitua por:
<img src='endereço da imagem' style='vertical-align:middle;border:0'/>Leia mais...
É isso ai pessoal, salve e faça isto nas postagem que vc quiser.
Não esqueçam de comentar!
eu ja vi essa postagem em outro site http://www.qualo.com.br/2011/01/como-colocar-botao-de-leia-mais-ou.html
ResponderExcluir