» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Recurso Leia Mais do Blogger




Como eu faço templates e desde 2007 os disponibilizo aqui para download, com certeza a maioria deles não possui este recurso que o blogger disponibilizou recentemente.

Já li em vários blogs amigos - os quais indico na sidebar "Vale um Click" - como fazer para ativar o recurso "Leia Mais" do blogger.

Aprendi com meus amigos e vou ensinar a quem usa algum template que criei a ativar este recurso e utilizá-lo em seu blog.
Antes leia este aviso:
► Se você usa algum template que criei que já possui o recurso "Leia Mais" instalado não precisa incluir o recurso do blogger. Se você quiser fazer isso será por sua conta e risco.

Ativando o recurso em templates mais antigos.
1º Passo:
» Use o Ctrl+F e encontre a linha: <data:post.body/>

» Logo abaixo desta linha coloque o código:
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
</div>
</b:if>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.
2º Passo:
Como utilizar o recurso:
1ºAtivando o editor atualizado de posts

♦ Clique em SALVAR ALTERAÇÕES.

2º Crie o seu post e aplique o jump break


3º Observação:
Se você não usa o novo Editor de postagens é só inserir a tag:
<!-- more -->
Antes da palavra que você quer que fique oculta no seu post.

4º Configure as palavras "Mais informações" indo em Elementos de página » Em Postagens no blog » Clique em Editar e Altere o campo que mostra na figura abaixo:

Você pode alterar "Mais informações »" por "Leia mais" ou "Continue lendo", etc.

5º Altere o lado, cor e o aspecto que as palavras "Leia Mais" vão aparecer em seus posts utilizando o CSS:
Para isso:
» Cole o código abaixo acima da tag ]]></b:skin>
.jump-link {
text-align: right; /*Alinhamento do "Leia mais"*/
font-size: 95%; /*Tamanho*/
font-weigth: bold; /*Fonte em negrito*/
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited {
color: blue;
text-decoration: none;
}
.jump-link a:hover {
color: red;
text-decoration: none;
}
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.

♦ Clique em Visualizar blog para se certificar que deu tudo certo.



Para aprender de formas diferentes sobre este recurso veja os posts abaixo que serviram como fonte para eu criar este tutorial:
Tutorial para “Leia mais…” do Blogger - Sem complicações!
Leia Mais como Recurso do Blogger
Novo Resumo de Postagens do Blogger – Hack “Leia mais”
Jump Break – o hack “Leia mais” do Blogger

Template PinkA3 Atualizado




Continuando a série de atualizações dos Templates para VOCÊ.

O template que atualizei desta vez foi o lindo PinkA3.
Acho este template lindo, além de ser pink né, é um charme. Rsss...

Como utilizei o Mínima como base para refazer o template, então...
♦ O recurso Jump Break (“Leia mais”) do Blogger já funciona normalmente;
♦ As fotos nos comentários do blogger também já funcionam, basta configurar na aba Configurações ► Comentários ►Em Mostrar imagens de perfil nos comentários? ►Marque a opção Sim;


Clique na imagem para ampliar.

DOWNLOAD | DEMO

NÃO SE ESQUEÇAM, NÃO RETIREM OS CRÉDITOS.
Nem REDISTRIBUAM SEM A MINHA PRÉVIA AUTORIZAÇÃO.
Hack instalado:
  1. Link de Comentários Corrigido
QUALQUER DÚVIDA SOBRE OS HACKS CLIQUE NO LINK PARA ENTENDER MELHOR!
Observações:
♦ Apliquei apenas um hack para não mudar a essência do template. Veja as sugestões no final do post.

♦ Para alterar os links da barra de navegação!
Encontre o seguinte código: (Use Ctrl+F)
<ul class='solidblockmenu'>
<li><a class='current' href='URL do Link'>Home</a>/li>
<li><a href='URL do Link' title=''><b>Ítem2</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem3</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem4</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem5</b></a>/li>
<li><a href='URL do Link' title=''><b>Ítem6</b></a>/li>
</ul>
1- Substitua 'URL do Link' pelo endereço do Link que você quer colocar;
2- Em title=' ' » coloque entre as aspas '____' o título do link;
3- Ítens e Home » Substitua os Ítens pelo título do link para que apareça na barra de navegação.
A Pasta de Download Contém
  • Código XML;
  • Imagens usadas no template.
Sugestões de hacks para você usar em seu template:
Aproveitem :P
Template Atualizado em 15/09/2009

Caso algum dos hacks novos do blogger não funcionem você pode consultar meus amigos:
♦ Ativando foto nos comentários e Correções
♦ Jump Break – o hack “Leia mais” do Blogger

15 Feed Icons Super Legais




Clique na imagem para ir até o link destes Ícones Super Legais


Templates Cute





Para você que gosta de templates cute, com muita arte e bom gosto. Encontrei este site com vários templates lindos para o blogger e wordpress e são grátis.

Vá até lá clicando na imagem ao lado.
Além de templates lindos a autora posta sobre vários assuntos sobre design.
Muito legal.
Vale um click!











Atualizando este post...

Encontrei também este blog com vários templates de fundos decorados, muito interessante.

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger