Painel de Usuario
Mensagens: 0
-
Alterar
-
Ver
-
Tópicos e mensagens
Menu
- Planeta Tutorial
- Ajuda e suporte
- Serviços para usuários
- Entretenimento
- Game zone
- Outros serviços
Procurar
Translate
Últimos assuntos
Estatísticas
Temos 26 usuários registradosO último membro registrado é kaironborges
Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Visitou
Postagem expansível com miniatura da imagem
Página 1 de 1
Postagem expansível com miniatura da imagem
Fazer aparecer somente um resumo da postagem e no final escrito leia mais… para clicar e ver a postagem completa encontramos um código que faz isso e ainda mostra uma miniatura da imagem junto com esse resumo do texto, ou seja, é um dos melhores jeitos de mostrar um link leia mais para postagens expansíveis. Além disso, não é necessário fazer alteração alguma nos texto que você já publicou quando colocar os códigos todas as postagens mudam automaticamente para o sistema expansível. Uma coisa indispensável para esse código funcionar é verificar se nas configurações, guia arquivamento a opção Ativar páginas de postagem? tem que estar habilitada(selecionado o sim). Caso contrário não será possível fazer as postagens expansíveis. Outra coisa necessário é deixar as configurações do feed na opção completa para que esse código funcione perfeitamente.
Entre na pagina editar html(não clique para expandir o modelo) e procure pela tag </head> e coloque esse código antes dessa tag.
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] type='text/javascript'/>
Clique para salvar depois clique para expandir o modelo e procure por < data:post.body/ > apague essa linha e cole esse trecho no lugar:
Clique para visualizar o blog e se estiver tudo certo salve as alterações no modelo e já está tudo pronto, agora seu blog mostra apenas um resumo da postagem e uma miniatura da imagem e quem gostar pode clicar para ver o texto inteiro.
Se quiser podemos personalizar esse código mudando a quantidade de caracteres que aparecem no resumo e o tamanho da miniatura da imagem, veja abaixo:
summary_noimg = número de caracteres do resumo se o texto não tiver imagens
summary_img = número de caracteres do resumo se o texto não tiver imagens img_thumb_height = Altura da miniatura da imagem
img_thumb_width = Largura da miniatura da imagem
Na segunda parte do código tem escrito 'data:post.url'>Leia mais...</a> esse leia mais é o texto que aparece para clicar e expandir a postagem então você pode escrever o que desejar aqui, mas cuidado para não apagar os sinais do código, modifique deixando o trecho assim 'data:post.url'>Texto aqui</a>. Para formatar esse texto entre na pagina editar html e coloque junto com os estilos CSS isso aqui:
.rmlink a{border: 1px solid #666666}
.rmlink a:hover{border: 1px solid #000000}
aqui coloquei apenas bordas para dar um exemplo, mas pode usar qualquer tipo de formatação que desejar.
Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem.
Fizemos uma atualização do código para ele mostrar o resumo das postagens somente na pagina inicial do blog, assim não gera mais conflito(problemas) com as paginas extras do blogger
Entre na pagina editar html(não clique para expandir o modelo) e procure pela tag </head> e coloque esse código antes dessa tag.
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] type='text/javascript'/>
Clique para salvar depois clique para expandir o modelo e procure por < data:post.body/ > apague essa linha e cole esse trecho no lugar:
- Spoiler:
- <p><b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href=post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType != "index"'><data:post.body/></b:if></p>
Clique para visualizar o blog e se estiver tudo certo salve as alterações no modelo e já está tudo pronto, agora seu blog mostra apenas um resumo da postagem e uma miniatura da imagem e quem gostar pode clicar para ver o texto inteiro.
Se quiser podemos personalizar esse código mudando a quantidade de caracteres que aparecem no resumo e o tamanho da miniatura da imagem, veja abaixo:
summary_noimg = número de caracteres do resumo se o texto não tiver imagens
summary_img = número de caracteres do resumo se o texto não tiver imagens img_thumb_height = Altura da miniatura da imagem
img_thumb_width = Largura da miniatura da imagem
Na segunda parte do código tem escrito 'data:post.url'>Leia mais...</a> esse leia mais é o texto que aparece para clicar e expandir a postagem então você pode escrever o que desejar aqui, mas cuidado para não apagar os sinais do código, modifique deixando o trecho assim 'data:post.url'>Texto aqui</a>. Para formatar esse texto entre na pagina editar html e coloque junto com os estilos CSS isso aqui:
.rmlink a{border: 1px solid #666666}
.rmlink a:hover{border: 1px solid #000000}
aqui coloquei apenas bordas para dar um exemplo, mas pode usar qualquer tipo de formatação que desejar.
Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem.
Fizemos uma atualização do código para ele mostrar o resumo das postagens somente na pagina inicial do blog, assim não gera mais conflito(problemas) com as paginas extras do blogger
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Ter 28 Jun 2011 - 17:31 por Admin
» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin
» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin
» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin
» Efeito Varinha Mágica no Photoshop
Sáb 25 Jun 2011 - 15:20 por konan
» Montagem multicolorida com tintas e efeitos diversos
Sáb 25 Jun 2011 - 15:18 por konan
» Linhas luminescentes no Photoshop
Sáb 25 Jun 2011 - 15:17 por konan
» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan
» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan