Que tal mostrar apenas os resumos das postagens no blog com uma miniatura da imagem somente alterando algumas linhas de html no seu blogger e sem usar nenhum código javascript. Isso é muito bom e certamente é bem mais fácil de fazer que as versões anteriores para fazer resumo das postagens:


O procedimento é bem simples, você entra na pagina editar html, marque a opção para expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar deste jeito no seu blog: <data:post.body />

Então apague essa linha e coloque isso no lugar:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

Cuidado para não mostrar duas vezes a mesma coisa no seu blog! Veja se logo após esse trecho se tem o código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Se encontrar apague, pois isso fará que o link para ler a postagem completa apareça duas vezes como na imagem abaixo, mas se retirar esse código não terá problemas.


E já está pronto, agora é só visualizar seu blog e verá que na pagina inicial ou paginas dos marcadores do blog aparecem um trecho do seu texto e uma miniatura das imagens.


Essas imagens foram feitas durante nossos testes em nosso outro blog Sites úteis e interessantes.

Para melhorar o layout podemos adicionar algumas linhas de código CSS e deixar a miniatura da imagem ao lado do texto, volte na pagina editar HTML e coloque esse trecho antes de linha </b:skin> (caso tenha duvidas veja aqui: Onde colocar os códigos no blog):

.thumb img {float: left;margin: 5px;}

A parte float:left é o lado que a imagem ficará caso queira do lado direito então use float: right

E se quiser personalizar o link leia mais, adicione essas linhas no mesmo local que colocou o outro código CSS:
.jump-link {text-align: center;margin:auto}
.jump-link a{font-size:16pt;color:#f00}
.jump-link a:hover{color:#00f}

Colocar os botões flutuantes no blog pode ser uma boa forma de conseguir mais divulgação do seu blog em redes sociais como Twitter, Facebook, Orkut e outros. Nós já mostramos diversas opções de botões de compartilhamento nas redes sociais. Então vamos mostrar hoje um código mais simples para fazer os botões flutuantes ao lado do conteúdo da sua pagina sem ficar fixos no canto da pagina.


Vamos usar o código dos botões de compartilhamento do AddThis para demonstrar o código dos botões flutuantes no blogspot, mas você pode usar com qualquer outro tipo de botão ou código que desejar.

Entre na pagina layout > adicionar gadget > html/javascript e cole esse código.

<div style="position:fixed; bottom:20%; margin-left:-98px; float:left;width:60px;background-color:#ffffdf;padding: 5px;border:1px solid #000;border-right:none"><center><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></center></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>

Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

Veja como editar e escolher a posição dos botões flutuantes das redes sociais no seu blog:

position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, então altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor é negativo ou seja o sinal de menos faz parte do posicionamento.

float:left: lado que aparece a caixa

width:60px: largura da caixa

padding: 5px: margem entre as bordas da caixa e os botões

background-color:#ffffdf: cor de fundo da caixa de botões de compartilhamento, veja o código das cores.

border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botões flutuantes fazem parte do nosso layout, leia mais detalhes sobre o códigos CSS para fazer bordas.

Já mostramos como colocar uma ferramenta de tradução no seu blog e até como personalizar escolhendo quais idiomas vai traduzir seu blog e também escolher as imagens das bandeiras no tutorial: Tradução do Blog com Bandeiras ou Links - Escolha os Idiomas. Mas achamos esse outro código pronto com diversos idiomas para traduzir seu blog e por isso vamos mostrar o código já pronto com as bandeiras no gadget de tradução para ajudar os blogueiros que se interessam por esse tipo de acessório para blogspot.


A instalação dessa ferramenta no seu blog é bem simples você só precisa clicar no botão abaixo e adicionar o gadget no seu blog. Se quiser saber como esse botão funciona veja aqui: Botão adicionar Gadget no Blogger (Add to Blogger) e saiba como fazer isso no seu blog.

Mas se por acaso quiser retirar alguns idiomas e bandeiras você pode clicar para editar o gadget que acabamos de adicionar, vamos usar como exemplo a bandeira para traduzir o blog para o inglês. O código dele é esse:

<input title=" Inglês" value="auto|en" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidoaTkYvAhDVfKMLbFxpswPIWH-E55_l7gki-dOLs3aN-eOCTnscSa29m11n3NZ2_zzG9ZWUNx9g8YAmV82i3rIPw_E7vqSZjBZySC-zFholvpalLu4DPMrSHmDE1oJfbkMQKHR9rsCfgA/s1600/traduzir-ingles-blog.jpg" onclick="this.form.langpair.value=this.value" type="image" height="20" style="border: 1px solid rgb(21, 22, 5); padding: 3px;" width="30" name="langpair"/>

Então se não quiser esse idioma é só apagar esse trecho de código e assim poderá retirar aquelas que acharem desnecessário no seu blog. Você verá que todas as outras bandeiras têm códigos parecidos apenas mudando o endereço das imagens e links de tradução, então é só apagar aqueles que desejarem.

 dos botões e colocar desta forma:

<div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px"><div class="addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a></div><div class="addthis_style">
<a class="addthis_counter addthis_bubble_style"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script>
</div>

Lembramos que esse código deve ser colocado pela pagina design, adicionar gadget, html/javascript e não importa a posição do gadget os botões aparecerão no canto da pagina.

Se não quiser mostrar o contador é só apagar as linhas:
<div class="addthis_style">
<a class="addthis_counter addthis_bubble_style"></a></div>

Caso queira os botões no tamanho pequeno retire o trecho _32x32 da linha: <div class="addthis_32x32_style"> , deixando desta forma: <div class="addthis_style">

Recebemos algumas perguntas criar uma barra no final das postagens colocando os botões do Twitter, Curtir do Facebook e +1 do Google ao lado do leia mais (link para ver a postagem completa). Isso parece difícil de fazer, mas é uma simples organização de layout e formatação usando CSS.

Antes de fazer alterações no seu template recomendamos fazer um backup do seu modelo atual assim não correrá riscos de perder seu template no caso de algum erro no código HTML do blogger.

O ponto principal deste código é ver qual código você usou para fazer o resumo da postagem no exemplo a seguir vamos utilizar o código que já publicamos e usamos atualmente em nossos blogs:Mostrar resumo da postagem

Entre na pagina editar HTML, marque para expandir o modelo e procure por algo parecido com esse trecho:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src="endereço da imagem" border="0" /></a>
</div>
</b:if>

Copie esse código e cole no bloco de notas depois apague do seu HTML (não é preciso salvar por enquanto). Agora coloque esse código na sua pagina HTML no lugar onde apagou o outro, mas antes compare o trecho final que faz o resumo da postagem com aquele que retirou do seu blog.

<div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'>
<div style='float:left; width:30%'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<div>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='true' show_faces='false'/>
</div></div>
<div style='float:left; width:20%'><a class='twitter-share-button' data-count='horizontal' data-via='fabianoroberto' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div style='float:left; width:15%'><g:plusone expr:href='data:post.url'/></div>
<div class='jump-link' style='float:right; width:30%'><b:if cond='data:post.hasJumpLink'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</b:if></div>
<div style='clear:both'/></div>

Se o seu código do resumo for diferente então coloque o seu código do resumo da postagem neste código para criar a barra que acabamos de mostrar.

Para mudar as cores de fundo e bordas da barra no final dos posts do blogger você altera na primeira linha do código:
div style='background-color: #CCC;border: 1px dashed #000;margin-top:10px'

Caso queira você pode apagar a cor de fundo e borda e deixar somente os botões lado a lado. Veja nestes links o Código das Cores e também como Colocar ou alterar as bordas

Além disso, você pode criar um estilo. jump-link para formatar o link leia mais ou até fazer um botão nele então coloque esse código antes da linha body{...}

.jump-link a{background-color: #FFC;border: 1px dashed #000;text-align: center;display: block;}
.jump-link a:hover{background-color: #FF0;color: #000;border: 1px solid #000;}

E veja aqui como Alterar cores dos links - CSS e se tiver dificuldades para achar o lugar certo no html veja: Onde colocar os códigos no blog

Outra coisa que você pode notar no código é que varias vezes repetimos o trecho width:25% apenas com valores diferentes, isso é a largura de cada um dos pedaços da barra no final da postagem, ou seja você pode modificar esses valores como desejar.

Você poderá ver o código em funcionamento em nosso site: Frases Curtas note que ao clicar em qualquer postagens os botões continuam aparecendo na pagina individual de cada postagem mas sem o link leia mais.

Esse nosso código usamos divs para criar uma barra dividida em colunas, portanto ela funciona com qualquer coisa caso queira usar algum outro acessório nela em vez dos botões e o hack leia mais.