Gadget com Botoes Flutuantes de Redes Sociais no BloggerColocar os botoes flutuantes no blog pode ser uma boa forma de conseguir mais divulgacao do seu blog em redes sociais como Twitter, Facebook, Orkut e outros. Nos ja mostramos diversas opcoes de botoes de compartilhamento nas redes sociais.Entao vamos mostrar hoje um codigo mais simples para fazer os botoes flutuantes ao lado do conteudo da sua pagina sem ficar fixos no canto da pagina.Vamos usar o codigo dos botoes de compartilhamento do AddThis para demonstrar o codigo dos botoes flutuantes no blogspot, mas voce pode usar com qualquer outro tipo de botao ou codigo que desejar.Entre na pagina layout > adicionar gadget > html/javascript e cole esse codigo.<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>Nao importa o lugar no seu layout que esse gadget ficara posicionado ele sempre aparecera na posicao que voce configurar.Veja como editar e escolher a posicao dos botoes flutuantes das redes sociais no seu blog:position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, entao altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor e negativo ou seja o sinal de menos faz parte do posicionamento.float:left: lado que aparece a caixawidth:60px: largura da caixapadding: 5px: margem entre as bordas da caixa e os botoesbackground-color:#ffffdf: cor de fundo da caixa de botoes de compartilhamento.border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botoes flutuantes fazem parte do nosso layout.Testamos alguns codigos e a maioria deles usa codigos javascript para fazer o movimento dos botoes na tela, mas achamos que usar um codigo apenas para corrigir o posicionamento dos botoes funciona do mesmo jeito e precisa depender de mais codigos que deixam seu blog mais lento.Para terminar queremos falar novamente que o uso dos botoes do addthis e opcional voce podera trocar por qualquer outro como, por exemplo, colocar o Botao +1, Botao Curtir e Enviar do Facebook, Botao Retweet ou Linkedin como mostramos nos links acima. Portanto agora e so escolher o que voce quer usar nesta caixa flutuante no seu blog. Fazer Resumo da Postagem com Miniaturas das ImagensGostaria demostrar 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 codigo javascript. Postagem expansivel com miniatura da imagemMostrar resumo da postagemE Um Processo simples, voce entra na pagina editar html, marque a opcao expandir modelos de widgets e procura por post.body (use o ctrl F para pesquisar), deve estar assim no seu blog: Entao 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 nao mostrar duas vezes a mesma coisa no seu blog! Veja se logo apos esse trecho se tem o codigo:<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 encontra-lo delete-o, porque fara que o link para ler a postagem completa apareca 2x;Entao e necessario retira-lo. Mensagem de Erro Mensagem de Erro