Botão de retweet que voa

Que tal um pássaro azul do Twitter, voando suavemente, quando o leitor abrir uma postagem do seu blog?

Na verdade, o script poderia ser colocado em qualquer parte mas o pássaro também é um link para sua conta no Twitter e, ao mesmo tempo, um botão de retweet, que aparece na parte superior e voa pela sua página, conforme você for movendo-a verticalmente. Então o melhor é colocá-lo no topo das postagens e condicioná-lo para que seja visível somente nas páginas individuais.

Outro detalhe é que, ao pousar o mouse sobre o pássaro, ele abrirá duas opções: Tweet this e Follow me e poderemos escolher o que fazer. Escolha os dois! :)

Se o bichinho voador atrapalhar a leitura do texto, é só movimentar o seu mouse sobre ele e ele se deslocará. Aqui no Links e Links isto ainda não aconteceu nos vários testes que fiz, em diversas postagens!!!

Para inserir o script, acesse PAINEL >>> DESIGN >>> Editar HTML. Marque Expandir modelos de widgets e procure pelo trecho: <data:post.body/> (use CTRL+F) e imediatamente antes, cole o código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
  <script type='text/javascript'>
  //<![CDATA[
    var birdSprite="http://oloblogger.googlecode.com/files/birdsprite.png";
    var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "http://twitter.com/SEU PERFIL TWITTER";
    var tweetThisText = "TWEET ME: <data:post.url/>";
    tripleflapInit();
  //]]>
  </script>
</b:if>

Temos que mudar o valor da variável twitterAccount (SEU PERFIL TWITTER) e colocar o seu próprio. Na segunda variável, TweetThisText (TWEET ME) você pode colocar o que quiser.

Se o seu template foi modificado e você não encontrar o trecho acima, procure por <div class='post-body entry-content'> e insira o código antes dele.

Créditos

Oloman – Oloblogger   Cartagena, Espanha 

JMiur – Vagabundia  Buenos Aires, Argentina 

*Tutoriais  originais em espanhol, traduzido por mim para português.

Outros tutoriais interessantes:

• Twitgether – Aplicativo Twitter no Orkut
• Sinalizar os códigos do template
• Caixa de Comentários do Facebook no Blogger
• Como dividir o widget de etiquetas em duas colunas
• Lista de blogs com efeito marquee
• Expandir e Contrair Qualquer Widget

Leia mais...

Sinalizar os códigos do template

Muitas vezes, depois de colocar um código no nosso template para adicionar qualquer efeito sobre o blog, algumas pessoas têm problemas quando querem retirar, se não gostam dos resultados

A solução seria um sinal na entrada do código, a fim de localizá-lo depois do fato.

Estes sinais geralmente são utilizados em templates, de forma incorreta. Muitos cometem um erro que, embora às vezes o Blogger aceite (salva as alterações sem problema aparente), às vezes podem causar certas coisas como o blog parar de funcionar corretamente.

Existem duas formas de marcar qualquer coisa que nós adicionamos no modelo para reconhecê-lo mais tarde, que é usado apenas na parte da CSS e outro que é usado no HTML.

Como distinguir o CSS do HTML , no template?

O CSS do nosso template é todo o código que está incluído entre as tags <b:skin><![CDATA[/* e ]]></b:skin>.
A partir de (]]></b:skin>) até o final do código do modelo, pode-se dizer que é o código HTML.

Sinalizar o que  adicionamos no CSS

Suponha que eu vou adicionar algumas linhas de código no CSS, se você olhar em um modelo original do Blogger, vemos que, por exemplo, quando começa a parte de comentários, há algo assim:

/ * Comentários
------------------------------------------------------- * /

Este é um sinal que indica que este é o lugar onde todo o código, incluindo CSS, que precisamos implementar para administrar o formulário dos comentários.

Se estamos procurando o lugar para incluir qualquer alteração no blog, e temos que colocar no CSS, então localizamos o trecho ]]></ b: skin> e colocamos este trecho antes dele, confiantes de que estaremos indo no lugar certo.

Se é um código eventual de algo que queremos adicionar e testar no blog, podemos ter o controle da sua localização para encontrá-lo sempre que precisarmos fazer alguma modificação, marcando-o com os sinais citados no inicio deste artigo.

Suponha, por exemplo, que é algo para controlar o gadget "Últimos Comentários". Então poderia colocar no início deste código, algo assim:

/ * Últimos comentários gadget
------------------------------------------------------- * /

E até mesmo algo menos complicado que vai igualmente servir o nosso propósito:

/ * Gadget do últimos comentários * /

Sinalizar o que adicionamos no HTML

Como dissemos antes, a partir da tag ]]></b:skin> até o final do código do modelo pode-se dizer que é o HTML, mas com o cuidado apenas para não incluir qualquer coisa entre o </head> e <body>.

Para sinalizar o que queremos incluir no HTML, faríamos desta maneira:

<! - Script de comentários recentes ->

E para tornar ainda mais visível, pode até marcar o código com inicio e fim, como este:

<! - Início do script de comentários recentes ->

AQUI ADICIONAR O NOVO CÓDIGO

<! - Fim do script de comentários recentes ->

Fazemos isso porque os navegadores não interpretam o que está incluído dentro desses rótulos, ou seja, não será exibido na "visão real" do blog.

Isso poderia ser também muito útil se, por exemplo, queremos mudar de lugar, alguma coisa no template, possamos recuperar a posição original.

Imagine que, se eu colocar o link para "comentários" abaixo do título dos meus posts, poderei alterar posteriormente, sem dificuldades.

Teria, então, para localizar o código para o link e copiá-lo para colá-lo onde quisermos, mas antes de marcar o código original da seguinte maneira:

<!--Início do link de comentários abaixo do título

AQUI LINK ORIGINAL PARA COMENTÁRIOS

Final do link de comentários abaixo do título -->

Assim, se quisermos recuperar o link para comentários na parte inferior de entradas só teremos que remover as adições e novamente será exibido em sua antiga posição (original) no template porque você impediu que navegador possa interpretar e exibir no blog.

Original em espanhol El Escaparate de Rosa

Gracias Rosa, por compartir sus conocimientos!

Leia mais...

Filme “Federal”

SINOPSE

Grupo de policiais tentam juntar provas para levar Beque Batista para a prisão. Beque é o mais perigoso traficante de Brasília. Vital e Dani são policiais federais que lutam contra o tráfico de drogas em Brasília, comandado por Beque Batista. A mulher de Vital espera um filho e Dani envolve-se com uma venezuelana.

O filme entrou em cartaz nos cinemas brasileiros no dia 29 de outubro de 2010.

FICHA DO FILME

    * Título original: Federal
    * Diretor: Erik de Castro
    * Elenco: Selton Mello, Carlos Alberto Riccelli, Michael Madsen, Carolina Gómez, Eduardo Dusek
    * Gênero: Policial
    * País: Brasil, França, Colômbia

Trailer

Leia mais...

Comentários do Facebook no Blogger

O Facebook é a maior rede social do mundo e agora, é uma ótima ferramenta para fazer amigos e manter-se conectados às atualizações deles.
Muitas pessoas têm uma conta no Facebook, e ela é muito conveniente para usar a conta de Facebook como uma chave para comentar sobre um artigo em um blog no Blogger em vez de usar o OpenID ou uma conta do Google/Blogger. Este é um tutorial traduzido do original, em inglês, do blog SimplexDesign e você poderá ver este formulário funcionando no blog Pérolas Esparsas.(mudei o template e terei que refazer...)

Para adicionar uma caixa de comentário do Facebook em seu blog do Blogger, basta seguir os passos abaixo:
1, Vá para a Página de Desenvolvedores no Facebook.

2. Você verá uma interface para criar um novo aplicativo, como essa imagem abaixo:

Digite o nome do seu blog/site e a url do mesmo (não se esqueça de adicionar uma barra no final da url, como está aqui, neste exemplo: http://linkselinksnet.blogspot.com/) e clique em Criar aplicativo.

3. Preencha a Verificação de segurança e isto o levará a uma página que fornece o App ID e alguns exemplos de código.
Anote ou copie cole em um Bloco de Notas, o seu App ID. No meu caso o ID é 174001499281421. Veja abaixo: 4. Vá para Social Plugins›Comments e digite seu App ID (Unique ID), digite quantos comentários você deseja mostrar (Number of Comments)  e a largura da caixa de comentário (Width). Marque Publish Feed e clique em Get Code

5. Uma nova janela se abrirá, como no exemplo abaixo, com o código do seu gadget. Confira se está tudo como você configurou e se o seu App ID está correto e vamos ao segundo passo, para instalar, finalmente, o formulário no seu blog.

No PAINEL do Blogger, acesse Design >>> Editar HTML e marque a caixa Expandir modelos de widgets. Use (CTRL+F) para encontrar os trechos de códigos abaixo:

Se você quiser que a caixa de comentário apareça logo após o seu post, encontre esta linha:

<p><data:post.body/></p>

Se você quiser colocá-lo acima dos comentários regulares, mantendo os dois, encontre esta linha:

<b:includable id='comments' var='post'>

Agora copie o código da ETAPA 5  e cole LOGO DEPOIS de uma das duas linhas acima, dependendo de onde você quer mostrar a sua caixa de comentários do Facebook.

Clique em VISUALIZAR e confira se está tudo OK. Clique em SALVAR.

Leia mais...