Feedburner - Recebendo postagens no e-mail


Alguns amigos tem me perguntado como fazer um campo daqueles onde o usuário coloca o seu e-mail para receber atualizações feitas no blog. Então resolvi ensinar aqui comocriar inserir um formulário desses no blog e utilizaremos o serviço mais usado no universo "blogal", o Feedburner.


Vamos começar passo-a-passo. É importante que nenhuma das etapas sejam "puladas". Qualquer dúvida, deixe um comentário! Boa sorte! 

:: Pra que serve?

Bom, o Feedburner possui dezenas de funcionalidades que podem ser inseridas em seu site/blog,  mas a ferramenta que iremos usar é o "Subscribe feed for mail", onde o usuário simplesmente recebe uma sinopse (resumo) de todas as postagens criadas por dia, em seu blog.
É muito últil para usuários que desejam simplesmente ter as notícias de seu blog no e-mail dele, sem necessariamente precisar acessar seu blog. Caso ele ache uma notícia interessante, clique no link enviado peloFeedburner e acessa o seu blog na notícia escolhida.

:: Quero instalar um formulario deste em meu blog, o que preciso?
Precisa simplesmente se cadastrar no Feedburner, e vou ensinar a fazer isso passo-a-passo.

1 - Acesse a página de idiomas do FB e escolha Português, clicando aqui
2 - No canto superior direito da página, clique em "Registrar"
3 - Preencha todas as informações e clique em "Sign In"
4 - Pronto! Você está cadastrado e poderá começar a "Queimar o feed do seu blog".


:: Como queimar o feed do meu blog?
Queimar o feed, é o mesmo que "reprocessar", ou seja, todo o conteúdo criando por você em seu blog, passará através do feed, no nosso caso o Feedburner. 
Quando você fez o logon, foi mostrado a seguinte tela:

Basta incluir neste campo o endereço do feed do seu blog, gerado pelo próprio Blogger. Para conseguir este endereço, acesse o seu blog.
1 - Vá até o rodapé do blog
2 - Copie o endereço do link "Assinar: Postagens (Atom)". (ex.: http://meublog.blogspot.com/feeds/posts/defalt).

Cole o endereço copiado dentro do campo "Queime um feed agora mesmo" e clique em"Próximo".

Nesta tela, seu feed do Blogger foi identificado com sucesso e será mostrado o Título do Blog, também o novo Feed dele, agora oferecido pelo FeedBurner, no campo "Feed Address". Você poderá mudar este endereço, porém, precisa ser um singular, que ainda não exista. (É recomendado deixar como está).

Clique em "Ativar Feed". 
Na próxima tela, clique em "Próximo".
Novamente clique em "Próximo" na outra tela.. 
Pronto! Você está queimando o feed do seu blog no Feedburner a partir de agora.
 
Clique no canto superior esquerdo em "Meus Feeds". 
Nesta tela deverá aparecer o nome do seu blog e o número de assinantes do seu feed.

::: Inserindo o formulário de atualizações por e-mail no blog (Blogger).
Estamos na última etapa para incluir o bendito formulário de inscrição de e-mail para recebimento de atualizações do blog.


1 - Na tela "Meus Feeds", clique no título do seu blog. 
2 - Clique em "Publicar".


3 - Agora iremos ativar a função para o seu feed. No menu esquerdo, clique na opção "Email Subscriptions". Na tela que se abriu, mantenha selecionado "Feedburner" e clique em "Ativar".


4 - Serão mostradas mais quatro opções após a ativação. Vamos por partes:

- Subscription management - Escolha o idioma do seu feed. Copie o código do campo maior (acima) e cole no HTML do seu blog!

- Communications preferences - Todo usuário que se cadastrar em seu feed para receber atualizações irá receber primeiramente um e-mail de boas vindas com a confirmação de inscrição. Você poderá alterar essas informações, mudando o "Assunto do e-mail de confirmação" e também o conteúdo da mensagem (ex.: "Olá amigo (a)! Obrigado por se inscrever em meu blog! Peço que confirme sua inscrição para receber atualizações diárias em seu e-mail clicando no link abaixo...") ATENÇÃO: Não apague a linha que contém o código ${confirmlink}, pois aí aparecerá o link de confirmação...


- Email branding - Nesta parte você poderá personalizar os e-mails contendo as atualizações do seu blog. Não há muitas opções de formatação.


- Delivery opitions - Escolha o fuso horário do seu feed e o melhor horário para que suas atualizações diárias sejam enviadas para os inscritos.


Dentro de Subscription management, copie o código do campo superior. 
1 - Acesse o painel do seu blog.
2 - Clique em "Layout"
3 - Clique em "Elementos de Página"
4 - Clique em "Adicionar Gadget"
5 - Escolha uma gadget do tipo "HTML/ Javascript"
6 - Cole o código aí dentro e clique em "Salvar".
7 - Visualize o blog. Dimensione onde desejar o formulário..


Na próxima postagem ensinarei a deixar este formulário em português e pesonalizado.
Abraço a todos!!!

0 comentários

Mural de recados no blog


É muito interessante ter um Mural de Recados no seu blog ou site para interagir com o leitor. Lá ele coloca algo sobre o blog, sobre novidades e modificações feitas, ou qualquer coisa que queira, até mesmo para o autor. Um tipo excelente de mural de recados é o Cbox, site especialista em Mural de recados. Vou ensinar passo-a-passo como criar o seu!

Faça o seguinte: Clique aqui para acessar o Cbox.

Criando o Mural 
1 - Clique em "Sign Up" para fazer o seu cadastro e preencha todos os campos. No campos "Skin", você escolhe o modelo de cor para o mural, a pré-visualização está ao lado (Dica: escolha uma que combine com as cores do seu blog).

2 - Depois clique em "Create my cbox" para completar o cadastro. Foi enviado para o seu e-mail um pedido de confirmação de cadastro, acesse-o e clique no link para confirmar.

3 - Agora faça o login, se já estiver logado, clique na aba "ADMIN"
4 - Clique em "Cbox options"

5 - Faça as modificações que deseja, de tamanho e cores (Width= horizontal - Heigth=vertical) e clique em "Save".

6 - Você será direcionado para a página contendo o código html para incluir o Mural de Recados no seu blog, clique em "Copy to clipboard" para copiar o código.

Colocando no Blogger7 - Abra o seu blog e na aba Layout, clique em Elementos de página.

8 - Inclua um elemento de página do tipo HTML.

9 - Cole o código que você copiou (Dica: pressione no teclado CTRL + V).

10 - Salve e disponha onde achar conveniente o seu mural.

Excluindo mensagens indesejadas
Se você deseja excluir e gerenciar as mensagens deixadas no mural de recados, é necessário acessar o site do CBox com login e senha.
Após fazer login, clique em "Messages" e depois, novamente em "Messages" no submenu.



Você irá visualizar a lista de 100 mensagens (limite que o CBox gratuito armazena). Aí você poderá selecionar e deletar as mensagens desejadas (ou indesejadas).

Visualizando todas as mensagens
No próprio Mural de Recados, arraste a barra do painel de mensagens até embaixo e verá a opção "Mensagens Antigas". Clique aí e verá todas as últimas 100 mensagens enviadas no seu Mural de Recados.


Excluindo mensagens do mural
Acesse o site do CBOX, efetue seu login e navegue até a opção MESSAGES / Messages

Selecione na lista a mensagem que deseja apagar e depois clique em DELETE.

Filtros de palavras
O CBOX na versão gratuita já possui um filtro de palavras de forma que rejeita "palavrões" entre outros conteúdos como spams, etc. Você só poderá incluir filtros por palavras escolhidas utilizando a versão paga do mural.

0 comentários

Alterar ícone do Blog na barra de endereço


É moleza! O ícone que aparece alí do lado do endereço se chama FAVICON, ou seja, ícone do favoritos. Aqui você aprende como é fácil criar um personalizado para seu blog. Tão fácil que vou até contar uma piada antes:"Como faz para que um pintinho dê muita risada? [pensa] Você joga ele contudo na parede! [?] Aí ele racha o bico! =D ... pronto, pode continuar lendo o tutorial.

Acesse o site GEN FAVICON, e siga o passo-a-passo.

1 - Selecione uma imagem que deseja para criar o ícone
2 - Clique em "Subir imagem"
3 - Na pré-visualização no canto superior direito da página, selecione a área que deseja da imagem para criar a favicon. Selecione a dimensão 16x16
4 - Clique em "Captura e Previsualização"
5 - Clique no link "Baixar favicon".

Após gerar sua favicon, utilize o site ICONJ para hospedar ela.

1 - Selecione o a favicon salva em seu computador
2 - Selecione "No sharpen"
3 - Clique em "Upload now"
4 - Copie o segundo código [Direct Link]

Acesse o HTML do seu blog e cole o código copiado acima da seguinte tag:

</head>

Salve o template e pronto! Até mais!

0 comentários

Tradutor personalizado para blog com bandeiras

Aqui no meu blog e utilizo um tradutor (conforme você pode observar) com bandeirinhas. Existe uma ferramenta do Google que você pode inserir no blog. É muito completo e traduz para os idiomais mais conhecidos do mundo. Masss.....se você quer a bendida bandeirinha para que o querido estrangeiro clique e traduza seu conteúdo, além de tudo seja completamente personalizável, vamos fazer. É bem facinho e você entenderá o funcionamento.

> As bandeirinhas
A primeira coisa que você irá precisar ter são as bandeirinhas. Como eu sou um cara legal (rs), disponibilizo aqui as bandeirinhas já hospedadas na web. Estão em um blog de arquivos que tenho, podem usar o link original da imagem, não tem problema.

 - Italiano 
 - Japones
 - Holandês
 - Português (Portugal)
 - Rússo
 - Inglês EUA
 - Alemão
 - Grego
 - Espanhol
 - Francês
> Estrutura HTML e CSS
Bom, para cada bandeirinha, você irá utilizar um endereço de imagem, um título  e um link. Conforme o código abaixo:
<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">
Translate
<!--INGLES-->
<a href="ENDEREÇO DO BLOG TRADUZIDO" title="TITULO"><img src="IMAGEM" /></a>
</div>
  • IMAGEM - É o endereço da imagem da bandeira. Como eu já disponibilizei aqui no blog as bandeirinhas, basta você clicar nelas (para mostrá-las sozinhas no navegador) e copiar o endereço da iamgem.
  • TÍTULO - Será mostrado quando se passar o mouse sobre a bandeira. É legal você colocar o título traduzido de acordo com o idioma da bandeira.
  • ENDEREÇO DO BLOG TRADUZIDO - Esta opção é a mais importante, vamos aprender a seguir.

> Traduzindo
Agora vamos traduzir o blog. Mas fique tranquilo! O Google Translate faz isso pra você!

Acesse o Google Translate.

Insira o URL do seu blog, selecione o idioma do seu blog (à esquerda) e o idioma que deseja traduzir (à direita). Clique em Traduzir.


Será mostrado o seu blog traduzido. Copie o endereço que aparecerá no seu navegador.


 Vá mudando as opções de idiomas conforme você deseja, copiando o endereço do blog traduzido e adicionando no código do seu tradutor.

Exemplo final:
<div style="color: #c6c6c6; font-family: "Arial"; width: 160px; float: left; position: relative;">
Translate
<!--INGLES-->
<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=en&history_state0=" title="English"><img src="http://imagem.gif" /></a>

<!--ESPANHOL-->
<a href="http://translate.google.com/translate?js=y&prev=_t&hl=pt-BR&ie=UTF-8&u=jhonnymoraes.blogspot.com&sl=pt&tl=es&history_state0=" title="Espanol"><img src="http://imagem.gif" /></a>
</div>
> Dentro do Blogger 

Acesse a aba "Design / Elementos de Página" e clique em "Adicionar Gadget" . Escolha o gadget HTML / Javascript e clique em  para adicioná-lo. Dentro do campo que apareceu, cole o código e salve. Depois visualize o template para ver como ficou.

0 comentários

Resumo de posts automático com imagem

O Blogger já oferece a possibilidade de colocarmos um link "Leia mais" dentro da postagem, que ajuda muito quando as postagens forem muito extensas e carregadas. Além de dar um visual mais organizado no blog, carrega mais rapidamente o blog e somente a página que o usuário quer ver. Porém há como fazer com que seu blog automaticamente crie o link leia mais para todas as postagens. Confira:
  
1º passo - incluir o script no template
Entre na página 'Layout' → 'editar html'(não precisa clicar em 'expandir modelo de widget') e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:
<!-- JavaScript Resumo do Post -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx = s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>
<!-- JavaScript Resumo do Post - Fim-->
Caso tenha dificuldades em copiar o código acima, copie o conteúdo deste arquivo.txt e cole-o ANTES da tag </head>.

Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:
Em summary_noimg → é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.
summary_img → Indique o número de caracteres do resumo para o texto que contiver imagens
img_thumb_height → Indique a altura da imagem
img_thumb_width → Indique a largura da imagem
Visualize e Salve!
Agora vamos a 2ª etapa.


2º passo - edição no html
Volte á pagina de 'layout' → 'Editar html', clique em 'expandir modelos de widgets' e procure por:
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Apague tudo e substitua por:
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
A palavra "Leia Mais" se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e direcionado à página do post completo. É neste espaço que você coloca o texto que preferir (Ex.Continue Lendo,Ler Todo Artigo, Leia Mais, Ver Conteudo etc).

Você pode também personalizar o link "leia mais", de diversas maneiras,substituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do link, com uma seta, por exemplo.
veja como logo abaixo:


3º passo - Personalizando o Link 'Leia Mais':
Para substituir o texto por uma imagem, procure por este trecho:
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►
E substitua o texto 'Leia Mais' por:
<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />
Para incluir uma imagem ao texto 'Leia Mais', acrescente logo em seguida a ele:
<img src='ENDEREÇO-DA-SUA-IMAGEM'/>

4º passo - aplicar estilos CSS:
Se você quiser, poderá também personalizar estilos para o link 'Leia Mais', para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :

#showlink {
font-size: 11px; /* escolha o tamanho da fonte para o link */
float: right; /* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px; /* aplique margens para posicionar link */
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}


#showlink a {
color: #ffffff; /* escolha a cor de seu link */
}


#showlink a:visited {
color: #cccccc; /* escolha a cor de seu link quando visitado */
}


#showlink a:hover {
color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */
}

0 comentários

Domínio nacional (.com.br) no Blogger

Como comprar e configurar um domínio personalizado no seu blog do Blogger. Mas só é possível comprar domínios internacionais (.com, .net, etc). Porém, se você já possui um domínio e ele é nacional (.com.br, .net.br, etc), é possível usá-lo no Blogger. É muito simples configurar mas leia atentamente este tutorial para que não tenha dores de cabeça pois irá mexer com configurações avançadas do domínio.



Configurando o seu domínio nacional.
Se você já possui um domínio nacional, acesse o painel de controle dele. A título de exemplo, vou mostrar o passo-a-passo com o serviço de hospedagem LocaWEB, porém os procedimentos são semelhantes para outros serviços.

1 - Faça login no Painel de Controle.
2 - Acesse a área de administração do domínio
3 - Expanda as opções para o domínio e clique em "Edição de DNS's", depois em "Edição de zona de DNS"
4 - Não altere nada dentro deste painel, apenas insira um novo registro CNAME, conforme as informações:
ENTRADA - www
TIPO - CNAME
PRIO - 0
CONTEÚDO - ghs.google.com
AÇÕES - Salvar
Pronto! Será mostrada a seguinte mensagem:
Procedimento executado com sucesso!
Por favor, aguarde até 24 horas para as alterações propagarem pela Internet.
Configurando o Blogger para o domínio novo
1 - Acesse o Painel do seu blog, navegue em: CONFIGURAÇÕES / PUBLICAÇÃO  e clique em"Domínio personalizado" 
2 - Na próxima tela, clique em "Ir para configurações avançadas"
3 - Nesta tela, informe o seu domínio completo (ex: www.dominio.com.br). Informe os caracteres de segurança abaixo clique em SALVAR.
4 - Após salvar, selecione a opção "Redirecionar dominio.com.br para www.dominio.com.br"
5 - Em Hosts de arquivos ausentes, mantenha a opção "Não"

6 - Informe novamente os caracteres de segurança e SALVE.

Pronto! Agora seu blog possui um domínio nacional! Para o acesso ao domínio sem WWW, aguarde 24 horas para que as configurações do DNS façam efeito.
Abraços!

0 comentários