Links e Links

Facebook Badges

noreply@blogger.com (Vera Lopes) — Mon, 10 Oct 2011 12:40:23 PDT

Crie, facilmente, caixas do Facebook para o seu blog. Escolha o atalho, clique na opção EDITAR ESTE ATALHO, selecione suas preferência e clique em SALVAR. Você voltará para a página anterior, como na imagem abaixo. Escolha a plataforma do seu blog e o gadget será instalado automaticamente.

Você sabe: depois poderá posicionar o seu gadget, arrastando-o para o local onde quer que ele apareça, editando o LAYOUT do seu blog. Não esqueça de SALVAR.

Faça já o seu:

Inserir apenas o áudio do YouTube na postagem

noreply@blogger.com (Vera Lopes) — Tue, 20 Sep 2011 14:06:16 PDT

Muitas vezes inserimos em uma postagem, um vídeo do YouTube porque gostamos da música mas, as imagens nem sempre tem a ver com o tema do nosso artigo.

Então, pesquisando uma maneira de suprimir o conteúdo do vídeo e apresentar somente o áudio, encontrei no blog espanhol Oloblogger, uma maneira muito fácil de exibir apenas a barra de controle do YouTube, simulando um player de áudio, como no exemplo abaixo:

Ozzy Osbourne-Dreamer

O truque consiste em trocar no código de inserção, o valor de "height" por 25, que é a altura da barra.

O valor em vermelho é o que deverá ser substituído por 25.

Se você quiser diminuir um pouco o comprimento da barra, basta modificar o valor de “width”, o que aconselho ser no mínimo 300, como o modelo acima, pois do contrário, a barra ficará desconfigurada esteticamente, ainda que funcione da mesma maneira.

Gracias, Oloman…

Prêmio “Este Blog é Inesquecível”

noreply@blogger.com (Vera Lopes) — Tue, 07 Jun 2011 21:04:53 PDT

Depois de alguns meses afastada do blog, estou de volta e tendo a grata surpresa de saber que muitos amigos não me esqueceram, nem deixaram de ler os artigos antigos, deixar um recadinho aqui ou no Facebook.

E foi com imensa alegria que encontrei hoje, um recado de meses atrás, deixado pelo meu caro amigo Lison Costa autor do Blog Lison On Line , sobre um prêmio oferecido a amigos, em comemoração ao aniversário de um ano do blog na rede internacional de notícias diHITT.

E o presente recebido por nós foi intitulado “ESTE BLOG É INESQUECÍVEL... QUE BLOG FANTÁSTICO!”

Deixo aqui o meu sincero agradecimento ao Lison e convido a todos para uma visita e leitura dos seus artigos, recheados de poesia e imagens maravilhosas , sobre Nhamundá – Amazonas.

Botão +1 no Blogger

noreply@blogger.com (Vera Lopes) — Tue, 07 Jun 2011 19:53:54 PDT

Google lançou o botão +1 como uma forma de ampliar as possibilidades de compartilhamento de conteúdo da web, Os seus leitores poderão recomendar sua postagem, aumentando as chances do seu artigo aparecer nos resultados de pesquisa sobre o tema que você postou.

Fonte: Google Buzz

Para adicionar o botão +1 no seu blog, no Blogger, você precisa habilitar os botões de compartilhamento .
No Painel do Blogger, vá para DESIGN >>> ELEMENTOS DA PÁGINA e localize a área de postagens. Clique em EDITAR e selecione a opção " Mostrar botões de compartilhamento". Se você já estiver usando estes botões, o ícone +1 irá aparecer automaticamente como uma nova opção. Então clique em SALVAR.

As recomendações feitas, a partir do botão +1, ficam armazenadas em uma nova guia em seu perfil do Google. Você pode mostrar sua guia do botão +1 a todos ou mantê-la privada e usá-la somente para gerenciar suas recomendações. Para tornar públicas as suas indicações, vá até o seu perfil do Google e clique na aba +1 >>>Editar perfil e marque a opção “Mostrar esta guia em meu perfil” e depois em concluído, como mostra a imagem abaixo.

Adicionando o botão +1 em seu site:

Para colocar o botão em seu site ou blog, acesse a página do Google+1 , escolha o modelo do botão, copie o código gerado e coloque no local onde quer que ele apareça, seguindo as instruções.

VÍDEO LEGENDADO

Formulário de Comentário Personalizado Blogger

noreply@blogger.com (Vera Lopes) — Sat, 04 Jun 2011 19:08:17 PDT

Já é possível personalizar o formulário de comentário do Blogger.

Este tutorial, que foi criado por Mohammad Mustafa Ahmedzai do My Blogger Tricks (MBT), vai realmente permitir-lhe ter um formulário de comentário personalizado muito melhor do que o Wordpress, Typad, etc.

Dê uma olhada em alguns exemplos abaixo:

E, para ver os efeitos destes, visite o My Blogger Tricks e lá, passe o cursor do mouse sobre as imagens por 3-4 segundos...é realmente fantástico e diferente!!!

Nota do autor: - O código CSS a seguir é para o formulário de comentário com um bebê nele. Outros códigos CSS serão fornecidos apenas para assinantes. Se você não se inscreveu ainda, inscreva-se agora, assinando o Feed do MBT e deixe NESTE POST um comentário com seu ID e-mail.

Siga estes passos:

1. Ir para o Blogger > Layout > Editar HTML
2. Marque a caixa " Expandir modelos de widgets "no canto superior direito.
3. Procure o código abaixo: (Use Ctrl + F)

<div class='comment-form'>

4. Substitua por este:

<div id='mbt-form'>

5. Agora, procure por ]]></ b: skin> e imediatamente acima dele, cole o código CSS abaixo:

#mbt-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}

7. Salve o modelo e comemore a mudança!

PERSONALIZANDO...

Agora vamos discutir as áreas importantes para o código CSS acima para ajudá-lo a personalizar o seu formulário de comentário do Blogger de acordo com suas preferências.

Existem três áreas importantes, que são:

#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a

1. Customização para (#mbt-form iframe) - Active Mode

Esta parte é responsável pelo aparecimento ativo da caixa de comentário quando o cursor do mouse não está sobre ele. Isso inclui as propriedades de estilo a seguir:

background : Esta propriedade é responsável pela cor de fundo, imagem de fundo e da posição da imagem de fundo. Sempre que,

# Ffffff : Esta é a cor de fundo. Você pode mudá-lo, usando o Color Chart
url: Esta é a URL para a imagem de fundo. Foi usado o bebê no presente caso. Você pode mudar essa imagem com qualquer coisa que você gosta.
canto inferior direito : Esta posição da imagem de fundo. O bebê aparece no canto inferior direito. Você pode posicionar a imagem na parte inferior direita ou da direita para a esquerda ou superior, inferior ou superior esquerdo.

border: Esta propriedade CSS define o tamanho da borda / largura, estilo e cor da caixa de comentário, valores definidos para o formulário de comentário no modo ativo (e não no mouse over),

tamanho da borda para 7px,
estilo de borda para o sólido. Você pode escolher sólida, pontilhada, tracejada, etc .Ver esta página estilos de borda
cor da borda para # C7C7C7. Utilize o CSS Color Chart para usar uma cor diferente.

padding: Esta propriedade CSS é responsável pela distância entre o formulário de comentário e sua área de texto . Você pode aumentar esse valor se você deseja inserir uma imagem no canto superior direito ou no canto superior esquerdo do formulário.

font: Esta propriedade CSS define negrito ou normal, a família de fonte e o tamanho do texto. Foi estabelecido o seguinte para o texto "Comentar como:" (Coment as)

negrito para normal
tamanho para 12pt
família de fontes para "ms sans-serif". Se no caso o navegador não tem o "MS Sans Serif" font então pus Arial como um backup.
cor: Esta propriedade define a cor do texto "Comentar como:" . Utilize o nosso Color Chart para mudar a cor do texto.

width: Esta propriedade define a largura do formulário de comentário. Você pode ver que o comentário do blog do Mohammad é maior do que o normal, porque ele ajustou a sua largura. Defina a largura da forma do seu comentário um pouco menor do que sua largura de post. Você pode encontrar a sua largura de post , encontrando o seguinte código em seu modelo (Editar HTML)

.post

2. Customização para (#mbt-form iframe:hover) - Mouse Hover Mode

Agora vamos discutir as propriedades CSS para a aparência do formulário quando um cursor de mouse é passado sobre ele. Tem quase as mesmas explicações para o fundo e borda discutidas anteriormente. A definição dessas duas propriedades CSS terá efeito apenas sobre a segunda imagem que aparece no foco do mouse.

3. Customização das cores Link (#mbt-form a) - Link Colors

Esta parte define a cor destes dois links -> " Sair "e" Assine por e-mail ". Esses links aparecem no canto inferior direito de cada Formulário de Comentários do Blogger.

Cor : Define a cor do link. Definir uma cor de link como contraste com a cor de fundo.

Outro tutorial bacana que encontrei:

Como Realçar os Comentários do Autor do Blog

Templates Neutros para Blogger

noreply@blogger.com (Vera Lopes) — Tue, 03 May 2011 19:18:45 PDT

1. Template Vertony

DEMO | DOWNLOAD

Autor: Lasantha Bandara

2. Template Peased

DEMO | DOWNLOAD

Autor: Lasantha Bandara

3. Template Reveal

DEMO | DOWNLOAD

Autor: Lasantha Bandara

4. Template Monte Cristo

DEMO | DOWNLOAD

Autor: Free Blogger Template

Visite Blogger Template 4 You

Novidades no Blogger em 2011

noreply@blogger.com (Vera Lopes) — Sat, 19 Mar 2011 20:16:08 PDT

2010 foi um grande ano para o Blogger, consagrado como uma das maiores plataformas de blogs e de acordo com a Alexa, a sexta maior do mundo . Os usuários do Blogger publicaram mais de meio bilhão de posts, que foram lidos por mais de 400 milhões de leitores ativos em todo o globo. Foi introduzido o designer do modelo , estatísticas em tempo real, filtragem de comentários spam, modelos para celular, fontes da Web e considerado o serviço de blog de alta credibilidade.

Neste vídeo, veja porque o Blogger Buzz, diz que 2011 promete ser um ano emocionante:

Veja mais no site: Blogger Buzz

Share Sidebar Redes Sociais

noreply@blogger.com (Vera Lopes) — Fri, 11 Mar 2011 19:50:00 PST

Share Sidebar é um gadget que exibe ícones flutuantes na lateral do seu site ou blog, permitindo assim que o leitor compartilhe seus artigos em Redes Sociais como Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reditt e Yahoo Buzz.
Para adicionar, vá até a pagina do Share Sidebar,clicando no logo abaixo, configure as suas preferências, digite seu endereço de e-mail e URL do site ou blog e clique em GET THE CODE.1. Acessar o Painel do Blogger.
2. Ir para o Design >>> Elementos da página.
3. Clique em Adicionar um gadget.
4. Na janela que se abre, adicionar um Gadget HTML / Javascript .
5. Copie o código abaixo e cole-o dentro da caixa de conteúdo.
6. Salve o gadget
7. Arraste o gadget para reposicioná-lo acima do gadget de postagem do seu blog.
8. Clique no botão Salvar.
Se o template é muito largo, pode ser que a coluna de ícones fique desalinhada. Então vá testando as posições, arrastando-o e clicando em VISUALIZAR, até que fique tudo certinho e depois salve as modificações.
Se este gadget não for adequado para o seu modelo ou se você não gostar, é só exclui-lo e tudo voltará a ser como antes!!!

Leia também:
Adicionar Ícones Sociais Flutuantes
Comentários do Facebook no Blogger
Botões compartilhar no Blogger

Gadget Visitantes Recentes

noreply@blogger.com (Vera Lopes) — Wed, 09 Mar 2011 23:04:00 PST

Este gadget de Visitantes Recentes para o Blogger, exibe os amigos, membros do Google Friend Connect, que visitaram o seu blog ou site recentemente.

Para adicionar em um blog do Blogger

1. Ir para a página de layout (Design) >>> Elementos da página.
2. Clique em "Adicionar um Gadget"
3. Digite " Recent Visitors", na caixa de busca.
4. Clique no título do gadget. (+)

4. Configure a seu gosto e clique em SALVAR.

Como adicionar este gadget para sites não-Blogger?

1. Entrar para o Google Friend Connect, e selecione o site que você deseja adicionar o gadget.

2. Clique em "gadgets"

3. Clique em "Adicionar gadget pelo URL" na parte inferior da página.

4. Insira a URL do gadget como http://xmlgadgets.com/ig/recent.xml
5. Personalizar o gadget.

6. Clique em "Gerar Código", em "Crie o código HTML"

7. Copie e cole este código no seu site, no local onde deseja exibir este gadget.

Créditos: Did I Know?

Thanks, Karthik!!!

Dia Internacional da Mulher

noreply@blogger.com (Vera Lopes) — Mon, 07 Mar 2011 22:59:16 PST

Atualização do Google Page Rank

noreply@blogger.com (Vera Lopes) — Sat, 05 Feb 2011 23:18:38 PST

Já se comentava na Blogosfera sobre a demora da atualização do Google Page Rank. A última foi em 2 de abril de 2010 mas esta atualização aconteceu há dois dias atrás, 20 de janeiro de 2011.
Aqui no Links e Links e no meu outro blog, Amor Insano, a métrica foi mantida: PR=3.
Você poderá conferir qual a “cotação” do seu site ou blog usando a ferramenta PAGERANK CHECKER.

Corrigindo Botão de retweet que voa

noreply@blogger.com (Vera Lopes) — Tue, 18 Jan 2011 21:35:43 PST

A pessoa que escreve o Blog Doces & Loucuras, me deu uma dica valiosa e que vai resolver todos os problemas de quem tentou implementar o Botão de retweet que voa, postado aqui em 23 de novembro 2010 e não conseguiu. Testado, aprovado e agradeço muito por ter se preocupado em me avisar!

...1000 beijosss

Veja aqui no blog de testes, o código colocado em gadget HTML/JavaScript: Mínima 3 Colunas

Eu apliquei nos meus blogs, testei diversas vezes, depois dos comentários sobre erro e deu certo.

Mas, percebi que, ao copiar o código na antiga postagem, vinha junto o seguinte trecho:

Read more: Links e Links: Botão de retweet que voa
Under Creative Commons License: Attribution

…que é parte do código Leia mais do meu template!!! Ainda não sei como vou resolver este problema!

Se ao copiar, você perceber que este trecho ~~intrometido~~ veio junto, apague!

Para isto, sempre aconselho que ao copiar um código, cole antes em um Bloco de Notas ( isto dá uma “limpada” no código!!!).

Mas como para para muitos não deu certo…então vamos seguir por outro caminho…

Usuários do Blogger (Blogspot):
Para inserir o script, acesse Painel >>> Design >>> Elementos da Página >>> Adicionar um Gadget >>> HTML/JavaScript. Copie o código abaixo ~~que é o mesmo postado anteriormente~~ e cole. Salve.
Pronto, agora vai funcionar!!!

Blog de Testes: Mínima 3 Colunas

<b:if cond='data:blog.pageType == "item"'>
<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.
Outro problema:
O link para SEGUIR funciona mas o de RETWEET, que deveria ir direto para o seu perfil, com o link da postagem que está lendo, não funciona. Vou entrar em contato com o autor do tutorial e ver se há solução para isto. Avisarei a todos que deixarem comentários aqui e no artigo anterior.
Mas já constatei que, se for colocado no gadget, somente o link de SEGUIR vai funcionar!
No Oloblogger, funciona direitinho, conforme o primeiro tutorial…
Bom, voltarei para dar respostas!

Feliz Ano Novo…

noreply@blogger.com (Vera Lopes) — Thu, 30 Dec 2010 21:16:30 PST

Que 2011 seja um ano totalmente especial para você, traga-lhe muita harmonia e prosperidade, e a certeza de que seus sonhos, em um passe de mágica, se tornarão a mais bela realidade diante de seus olhos.

Desejo-lhe um excelente ano novo, que tudo de mais lindo e maravilhoso aconteça em sua vida.

Beijosss

Botão de retweet que voa

noreply@blogger.com (Vera Lopes) — Tue, 23 Nov 2010 20:09:28 PST

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 == "item"'>
<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:

Sinalizar os códigos do template

noreply@blogger.com (Vera Lopes) — Sun, 21 Nov 2010 15:43:31 PST

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:

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!

Filme “Federal”

noreply@blogger.com (Vera Lopes) — Thu, 04 Nov 2010 12:05:00 PDT

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

Comentários do Facebook no Blogger

noreply@blogger.com (Vera Lopes) — Sat, 04 Jun 2011 18:50:12 PDT

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.

Alterações no Windows Live Space‏

noreply@blogger.com (Vera Lopes) — Fri, 22 Apr 2011 22:17:09 PDT

Há duas semana atrás recebi uma notificação da Equipe do Windows Live, cujo conteúdo repasso aqui, na íntegra, (CTRL+C e CTRL+V) para alertar algum leitor que tenha um blog esquecido no Live Space, como eu, e ainda não tenha recebido este e-mail ou não prestou atenção, coisas assim…

O meu primeiro blog, “Portal do Amor”, foi criado em 2005. Era muito visitado e comentado e eu me apaixonei por ele. Era tão bom, tão lindo, que causou inveja, fazendo com que, diversas vezes fosse denunciado como inadequado às regras de conduta do site, como pornográfico e coisas do gênero. O blog foi fechado quatro vezes mas eu lutei em cada uma delas e o recuperei até que…cansei!!!

Foi quando conheci o Blogger, transferi todo o conteúdo para cá e hoje é o Amor Insano, o meu bloguinho do coração. Quem conhece e visita o Amor Insano, me diga: é imoral, pornográfico, “brega”? Eu escrevi um e-mail para esta equipe e ‘descasquei’, os chamei de FALSOS MORALISTAS já que centenas de blogs lá eram de encontros de casais, sexo, com fotos explícitas, pedofilia, poemas eróticos com imagens de sexo, etc. O meu tinha fotos sensuais e românticas, as mesmas que estão no blog atual!!!

…Deixa pra lá, eles perderam para Blogger e WordPress e agora estão fechando suas ‘janelinhas’ e migrando para outra plataforma, como informam na mensagem abaixo.

Sinto um certo alívio com isto…O dia V…da vingança, desforra, finalmente CHEGOU!!!

De:Equipe do Windows Live (communications_msn_cs_ptbr@Microsoft.windowslive.com)

Enviada:quarta-feira, 13 de outubro de 2010 0:52:45

Para: ~~XXXXXX@hotmail.com~~

Prezado(a) usuário do Windows Live Spaces,

Ocorrerão importantes alterações na sua conta do Spaces, que o afetam e exigirão que você escolha a opção que lhe seja mais apropriada. É com muito entusiasmo que anunciamos nossa parceria com um serviço de blog importante e inovador, o WordPress.com, a fim de oferecer a você uma experiência de blog atualizada. Ajudaremos você a migrar seu blog atual do Windows Live Spaces para o WordPress.com ou baixá-lo para uso posterior. É importante lembrar que em 16 de março de 2011, seu blog atual será encerrado.

Com a nova versão dos serviços do Windows Live, fizemos uma série de alterações e aperfeiçoamentos em nossos produtos. Optamos por estabelecer uma parceria para oferecer aos nossos usuários uma solução de blog fantástica. Entretanto, sabemos que as alterações terão impacto para você. A finalidade deste e-mail é abordar todas as suas possíveis preocupações.

Por que isto está acontecendo?

Nossos clientes solicitaram mais funcionalidades de blog, como um sistema integrado de estatísticas, salvamento contínuo de rascunhos e melhorias na tecnologia de combate a spam. Para fornecer a melhor experiência possível de blog, estamos colaborando com o WordPress.com para oferecer o serviço gratuito deles a você. Para quem já tem um blog no Windows Live Spaces, tornaremos mais fáceis as etapas iniciais, ajudando também na migração do conteúdo já criado no Spaces.

Qual é o prazo?

A partir do final de setembro de 2010, quando você acessar seu Windows Live Spaces, terá a oportunidade de atualizar o blog migrando-o para o WordPress.com e baixar o conteúdo para uso posterior.
A partir de 4 de janeiro de 2011, você não poderá mais fazer alterações no seu blog do Spaces, mas continuará podendo consultar postagens anteriores, baixar conteúdo para uso posterior e atualizar o blog para o WordPress.com.
Em 16 de março de 2011, o Windows Live Spaces será descontinuado e você não poderá acessar nem migrar seu blog no Spaces.

O que você precisa fazer antes do encerramento do Windows Live Spaces

A partir do final de setembro, quando você visitar seu blog, terá as seguintes opções:

Atualizar seu blog migrando para o WordPress.com - Ofereceremos uma maneira simples de migrar as postagens e os comentários do seu blog para o WordPress.com.
Baixar seu blog – Você poderá baixar as postagens antigas para manter uma cópia em seu computador e depois migrar para o WordPress.com.
Excluir seu blog - Você terá a opção de excluir o blog permanentemente caso decida que não precisa mais dele. Se quiser salvar o conteúdo, faça isso antes da exclusão.
Se você não consegue decidir, não se precipite – Durante mais alguns meses, você continuará podendo acessar o Windows Live Spaces enquanto toma uma decisão. Mas estamos muito empolgados com o que você poderá fazer no WordPress.com e esperamos que decida aproveitar essa experiência de blog aprimorada.

Observação: alguns conteúdos como gadgets, páginas de recados, listas, notas e rascunhos de postagens não serão migrados. Consulte as Perguntas frequentes para obter mais informações sobre como preservar esse tipo de conteúdo.
Vá para o seu blog do Spaces para escolher a opção mais adequada para você.

O que você pode esperar da migração para o WordPress.com

As postagens, os comentários e os links existentes no seu espaço serão transferidos, e você terá a opção de compartilhar as atualizações no blog com seus amigos do Messenger.

No WordPress.com, você terá ferramentas que ajudarão a controlar seu blog e seus visitantes. Você receberá uma marcação que permite que as pessoas o encontrem e que você encontre pessoas com ideias afins. Isso inclui uma excelente funcionalidade de comentário de blog e prevenção de spam de trackback, para ajudar a manter sua experiência livre de problemas. Confira mais informações (A página está em inglês).

Agradecemos por usar o Windows Live e esperamos que você aproveite a nova experiência de blog.

Atenciosamente,

Equipe do Windows Live

Perguntas Frequentes

P: O que é o WordPress.com?
R: O WordPress.com é um site de blog gratuito, semelhante ao Windows Live Spaces. No WordPress.com, você encontrará ótimos temas e widgets para personalizar sua experiência, além de ferramentas para ajudá-lo a controlar seu blog e quem o está visitando. Você receberá uma marcação que permite que as pessoas o encontrem e que você encontre pessoas com ideias afins. Isso inclui uma excelente funcionalidade de comentário de blog e prevenção de spam de trackback para ajudar a manter sua experiência livre de problemas.

P: O que acontece com o conteúdo do meu Windows Live Spaces e o que posso migrar?
R: Veja a seguir uma lista das diferentes funcionalidades disponíveis atualmente no Windows Live Spaces e o que você pode esperar:

Blogs e comentários: se você optar por migrar ou baixar, o conteúdo do seu blog (incluindo fotos, vídeos e comentários inseridos) acompanhará você.
Fotos: as fotos que não fazem parte do seu blog, mas pertencem ao Windows Live, permanecerão ativas no SkyDrive e, se você quiser, poderão ser compartilhadas com outras pessoas. As que fazem parte do seu blog serão migradas caso você opte por migrar o blog. Não será migrado nenhum módulo fornecido por outros serviços no qual suas fotos estejam compartilhadas.
Os visitantes saberão onde encontrá-lo: se você migrar, os links existentes para o seu blog e para artigos específicos continuarão funcionando e os visitantes serão redirecionados para o seu novo blog no WordPress.com. Você também poderá manter seus amigos atualizados com as postagens mais recentes no Windows Live Messenger.
Blogs particulares: se você tiver um blog particular, ele será marcado dessa forma, a menos que você escolha outra opção durante a migração. Você poderá compartilhá-lo com seus amigos do Windows Live Messenger ou simplesmente selecionar algumas pessoas para serem convidadas para o WordPress.com.
Gadgets, páginas de recados, listas, notas e rascunhos de postagens: infelizmente, este tipo de conteúdo não pode ser migrado. Considere a possibilidade de publicar seus rascunhos de postagens nos próximos meses e mover o conteúdo existente em listas e notas para o seu blog antes de migrar.
Módulos Perfil e Contatos: estas informações permanecem no Windows Live. Você poderá adicionar seu novo blog ao seu Perfil e compartilhá-los com os amigos.

P: O que posso esperar entre o momento atual e a data em que o Windows Live Spaces será encerrado?
R: A partir do final de setembro de 2010, quando você visitar seu blog, terá a oportunidade de atualizá-lo migrando-o para o WordPress.com e baixar o conteúdo para uso posterior. Seu blog continuará disponível para publicação. A partir de 4 de janeiro de 2011, você não poderá mais fazer alterações no seu blog do Windows Live Spaces, mas poderá consultar postagens anteriores, baixar conteúdo para uso posterior e atualizar o blog para o WordPress.com. Em 16 de março de 2011, o Windows Live Spaces será descontinuado e você não poderá acessar nem migrar seu blog.

P: Onde posso obter mais informações?
R: Você é pai de uma criança que usa o Windows Live Spaces? Tem um blog particular? Você usa o Writer para publicar no Windows Live Spaces? Tem outras perguntas? Visite nossa Central de Ajuda para obter mais informações e conhecer outros recursos.

A Microsoft respeita a sua privacidade. Para saber mais, leia nossa Política de Privacidade online.

Microsoft Corporation
One Microsoft Way
Redmond, WA 98052

Eu já estou tratando de retirar o pouco que ficou lá, em gadgets e faço questão de ENCERRAR EU MESMA o espaço que um dia adorei criar, onde encontrei pessoas maravilhosas que me ensinaram muito do que sei hoje sobre blogs, HTML , criar gifs, onde fiz muitos amigos que tenho até hoje, outros que já se foram deste mundo e foi lá que apoiamos os familiares deles, choramos juntos, por estas perdas!…saudades eternas!

Tenho uma coleção de fotos que permanecerão no SkyDrive…se eu pudesse, excluiria mas o coração não deixa!

Adeus -•=»‡«=•-Portal do Amor-•=»‡«=•-!!!

Minha última mensagem para meus amigos de lá:

18 de janeiro de 2009

Aos meus amigos...

O conteúdo deste Space foi deletado!

Estavam me denunciando por colocar neste álbum, imagens vistas como "pornografia".

Vocês concordam?…(recebi comentários com respostas: NÂO!!!)

Aqui eu coloco tudo o que coleciono, imagens que gosto, para compartilhar mas, perdi a vontade de continuar e mudei o meu blog para o BLOGGER. Lá não tem esta coisa de ficarem fechando o blog sem avisar, deletando amigos e destruindo um trabalho de quase 4 anos, que fiz com muito carinho!

Sou livre para fazer e postar o que quero!

Então, visitem Amor Insano (com os posts) e Links e Links (com os links que eu tinha aqui).

Obrigada a todos que fizeram mais de 60 mil visitas a este espaço, em 4 anos!

Um beijo…

Como dividir o widget de etiquetas em duas colunas

noreply@blogger.com (Vera Lopes) — Tue, 12 Oct 2010 21:47:38 PDT

Quando você tem um blog com uma grande quantidade de etiquetas (categorias/marcadores) e uma barra lateral mais larga, poderá dividir a lista em duas colunas ou mais, por uma questão de ordem estética e economia de espaço.
É muito simples e basta adicionar um pequeno código CSS antes de ]]></b:skin> :

#Label1 ul li{
float: left;
width: 45%;
}

Considere que:

A largura (width) vai depender de quantas colunas se quer incluir e nem sempre é exato, porque o widget de etiquetas vai herdar a largura da sidebar (.sidebar ul li ou similar). Neste caso, 45% está bom para duas colunas; para 3 colunas, talvez fique bem com 30 ou 33%.Você poderá ajustar este valor e visualizar, até que fique do seu gosto.
No meu caso, no blog Pérolas Esparsas, como na imagem acima, eu deixei width: 42%.
O referencial #Label1, pode variar. Por certo, o widget de etiquetas (se tens apenas um), deverá ser Label1; mas, se tens dois, teria um widget de ID Label1 e outro Label2.
Podes dividir qualquer widget de lista (exemplo, lista de blogs, lista de links) da mesma forma, apenas verificando a ID do widget e modificando no código que será acrescentado.

Testado e aprovado!!! Espero que seja útil para você, caso queira usar. Mas, ainda prefiro nuvem de tags original do Blogger...

Chica Blogger

Template Fashion Blog

noreply@blogger.com (Vera Lopes) — Fri, 01 Oct 2010 23:28:00 PDT

DEMO | DOWNLOAD

Fashion Blog é modelo para Blogger, estilo revista, com um controle deslizante de imagem. Embora o nome sugira um blog de moda, acho que pode ser usado em uma variedade de outros temas. Duas colunas e gadget de inscrição de Feed e Twitter, já instalados.

Autor: Templates Block

Designer: Templatemo

Por favor, respeite o trabalho destes designers, não retirando os créditos dos autores que estão no rodapé do modelo!

Bom final de semana…

Template Twiblue para Blogger

noreply@blogger.com (Vera Lopes) — Thu, 30 Sep 2010 17:10:44 PDT

DEMO | DOWNLOAD

Características:

2 colunas
Sidebar Direita
Caixa de Pesquisa já instalada
Widgets de Feed RSS e Twitter
Largura fixa
Background Azul Designer: BloggerTemplatePlace

BloggerTheme.net

Garden Blogger Template

noreply@blogger.com (Vera Lopes) — Thu, 30 Sep 2010 17:46:24 PDT

DEMO | DOWNLOAD

Este modelo possui apenas uma coluna, largura fixa, sem barra lateral mas com paginação e menu com efeito fantástico e formulário de contato por e-mail.

Lindo, leve, clean…excelente para um blog pessoal.

Autor: Bloggertheme

Designer: Templatemo.com

Lista de blogs com efeito marquee

noreply@blogger.com (Vera Lopes) — Thu, 30 Sep 2010 17:13:57 PDT

Este é um tutorial que encontrei no blog espanhol El Escaparate de Rosa que vai mostrar como fazer o gadget Blogroll (Lista de Blogs) ser exibido em movimento, isto é, usando um código de "marquee".
Antes de prosseguir com a explicação, você pode ver um exemplo funcionando na barra lateral deste blog.

Em primeiro lugar temos de adicionar o gadget lista de blogs e defini-lo como na imagem abaixo, para adicionar o código necessário. Depois disto, é possível editar o novo gadget, se quiserem.

Com o gadget já configurado, acesse DESIGN >>> EDITAR HTML >>> e marque a opção "Expandir modelos de widgets. Vamos ter que localizar a origem do gadget e adicionar o código necessário, este que está destacado em vermelho. Use CTRL+F para encontrar o nome do seu widget, no meu caso, Blogroll…

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<center><marquee direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='5' bgcolor = '#faf0e6' style='border: #cdaf95 2px solid;padding-left: 10px;' width='260'> <ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == "true"'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == "true"'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != ""'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == "true"'>
<b:if cond='data:showItemTitle == "true"'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems > data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>
</marquee></center>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Modificações:

height = "300" é a altura do dispositivo, quanto maior o valor, a altura e vice-versa.
width = «260» é a largura do dispositivo, quanto maior o valor, a largura e vice-versa.
bgcolor = "# faf0e6 ' é a cor de fundo do gadget. Se você não quiser usá-lo, terá que remover esse código (bgcolor = "# faf0e6. Para alterar a cor, substituir o código de cores (# faf0e6) pelo código da cor escolhida. Veja em Tabela de Cores.

border: 2px solid # cdaf95; é a borda do gadget. Se você não quiser margem, nós colocamos o seu valor (2px) para 0, se queremos mais ou menos largura, aumentar ou diminuir este valor. Para alterar a sua cor, coloque em # cdaf95, o código da cor escolhida.
SCROLLAMOUNT = '5 ' é a velocidade de movimento, aumento ou diminuição do valor (5) para variar a velocidade.
direction = "up" é a direção da rolagem, neste caso será para cima. Se quiser a rolagem para baixo, trocar o up para down.

Template Elegance Wallpaper

noreply@blogger.com (Vera Lopes) — Sat, 25 Sep 2010 22:09:27 PDT

DEMO | DOWNLOAD

Elegance Wallpaper é um template para Blogger, com um fundo decorativo delicado e suave e o seu cabeçalho foi personalizado com o estilo de papel rasgado. Já tem instalado os ícones de Feed, de Redes Sociais (Twitter e Facebook) e contato por e-mail.

Foi desenhado originalmente para WordPress por Alfoart.

Convertido para Blogger por Splashy Templates.

Por favor, ao usar este modelo, mantenha os créditos!

Visite o site e encontre outros templates maravilhosos!!!

FarmVille Template para Blogger

noreply@blogger.com (Vera Lopes) — Mon, 13 Sep 2010 22:31:20 PDT

DEMO | DOWNLOAD+DETALHES

Se você é fã do game FarmVille, uma fazendinha muito charmosa que se joga no Facebook, que tal usar este tema, para mudar a cara do seu blog?

É diferente e pode ser usado para falar de animais, agropecuária e assuntos afins!

Eu estou ~~viciada~~ construindo a minha fazendinha, com a ajuda dos meus vizinhos...

Disponibilizado por Enursa do Blogger Template

Para baixar e obter mais informações sobre o template, basta ir à página do site

Links e Links

Facebook Badges

Inserir apenas o áudio do YouTube na postagem

Prêmio “Este Blog é Inesquecível”

Botão +1 no Blogger

Leia também:

Recomendações com o botão +1 em sites que não pertencem ao Google

Share Sidebar Redes Sociais

Botões compartilhar no Blogger

Adicionar Botão Criação de PDF

Adicionar Ícones Sociais Flutuantes

VÍDEO LEGENDADO

Formulário de Comentário Personalizado Blogger

Templates Neutros para Blogger

Novidades no Blogger em 2011

Share Sidebar Redes Sociais

Gadget Visitantes Recentes

Dia Internacional da Mulher

Atualização do Google Page Rank

Corrigindo Botão de retweet que voa

Feliz Ano Novo…

Botão de retweet que voa

Sinalizar os códigos do template

Filme “Federal”

Comentários do Facebook no Blogger

Alterações no Windows Live Space‏

Adeus -•=»‡«=•-Portal do Amor-•=»‡«=•-!!!

Aos meus amigos...

Como dividir o widget de etiquetas em duas colunas

Template Fashion Blog

Template Twiblue para Blogger

Vídeo | Como trocar o template salvando widgets

Hack automático Leia mais para Blogger

Remover "Leia Mais" das Páginas Estáticas

Adicionar Botão Criação de PDF

Garden Blogger Template

Lista de blogs com efeito marquee

Template Elegance Wallpaper

FarmVille Template para Blogger