Postagem Expansível com Miniatura da Imagem

Muitas pessoas perguntam sobre como 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 (Miniaturas das Imagens não aparecem) 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='http://acessoriosparablogs.com.br/scripts/resumopost.js' 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:

<p><b:if cond='data:blog.pageType == &quot;index&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'><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 formação CSS que desejar.

Acho que essa é uma maneira bem melhor do que usar aquela outra explicação que precisa fazer alterações em cada postagem, mas se quiser ver o outro jeito tem na Ajuda do Blogger.

Se quiser veja o blog Meu Jornal estou usando esse código nele para demostração.

Fizemos uma atualização (05/10/2010) 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(Paginas extras para o Blogspot).

Veja também:

Mostrar resumo das Postagens
Fazer menu com submenu
Formatar o texto usando CSS
Imagem seguindo o ponteiro do mouse
Mostrar o número total de postagens e comentários
Colocar imagem na barra de endereços