terça-feira, 19 de fevereiro de 2013

Resumo de postagem automático com imagem

Veja o exemplo abaixo de como fica, usando uma imagem junto ao texto e o título do artigo:

-->

Hack Leia Mais
Eu particularmente acho que dá uma estética melhor á pagina inicial, evitando que a pagina inicial fique extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Características do Hack “Leia Mais”

- Sem javascript
- Carregamento rápido
- Amigável para motor de busca
- Bom para SEO
- Funciona em todos browser, incluindo Internet Explorer 6


-->


Com estes recurso suas postagens serão resumidas automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem.
Passo 1. Aplicar estilos CSS:
Entre no modo → ‘editar html’ do seu template (não precisa clicar em ‘expandir modelo de widget’) e procure pela tag:
]]>
Passo 2. Cole esse código que segue imediatamente ANTES dessa tag:
.post-thumbnail{float:left;margin-right:20px} // Para imagem a esquerda
ou
.post-thumbnail{float:right;margin-left:20px} // Para imagem a direita
Passo 3. Clique em ‘expandir modelos de widgets’ e procure por:
<data:post.body/>
Passo 4. Substitua o código acima pelo código abaixo:
Escolha uma das opções de modelo que melhor funcione no seu Blog.

1. Resumo de Postagem Automático com imagens na Página Inicial

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Resumo de Postagem Automático com imagens na Página Inicial para posts sem imagem

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Salve o modelo e veja o resultado em seu blog abrindo a página principal. Isso deve aplicar a mudança em todo o seu Blog. Pode ser que alguns templates não aceitem essa mudança, por isso é importante fazer testes antes de aplicar em seu Blog principal.

Nenhum comentário:

Postar um comentário