Substituir a caixa de comentário do Blogger pela do Facebook

Uma maneira simples de substituir a caixa de comentário do Blogger pelo sistema do Facebook

Há algum tempo atrás eu utilizava aquela caixa de comentário com a conta do Facebook, mas por algum motivo o plugin parou de funcionar e tive que arrumar outra solução.

Vários sites e blogs já postaram uma solução que funciona, mas não é tão simples (pelo fato de ter que criar um aplicativo no Facebook). Por esse motivo resolvi postar uma maneira bem simples pra mudar o sistema de comentários do seu blog, sem a necessidade de criar aplicativo no Facebook.

1. Passo a Passo

IMPORTANTE: Antes de começar lembre-se de fazer o backup do seu blog, para caso haja um imprevisto e algo de errado! 1.1. Feito o backup, basta editar o HTML do blog indo em "Modelo" > "Editar HTML". Como na imagem abaixo:

1.2.Dentro do HTML do seu blog procure (CTRL + F) pelo seguinte trecho:

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

Provavelmente vai estar como na imagem abaixo:

1.3. Então clique na seta preta para expandir o código.

1.4. Cole abaixo de <b:includable id='comments' var='post'> o seguinte trecho de código:

<!-- Comentarios Utilizando Facebook -->
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'/>
<!-- Comentarios Utilizando Facebook -->

NOTA: Onde está grifado de AZUL substitua pela quantia de comentários que você deseja que apareça, caso o post tenha mais comentários que esse valor aparecerá uma opção para mostrar o restante dos comentários.
A parte grifada em VERDE é a que define o tamanho da caixa de comentários, ajuste conforme queira. 1.5. Salve seu template.

Talvez você ainda não veja a caixa de comentário do Facebook, isso acontece porque a caixa de comentário do Blogger está desativada.

Pra desativar é simples, basta ir em "Configurações" > "Postagens e Comentários" e na opção de "Local do Comentário" selecione "Ocultar". Como mostra a imagem abaixo:

Salve as configurações e pronto! :D

Até a próxima!

+ Continue lendo...

Exibir/Ocultar elementos em páginas especificas no blog

Oculte elementos no blog utilizando
uma <tag> HTML

Você já quis ocultar algum Widget em determinada página? Ou já pensou em exibir algum elemento do blog só na pagina principal? Isso é muito simples de ser feito, apenas utilizando uma certa <tag> HTML dentro do template do seu blog.

Se você já editou o template do seu blog, certamente se deparou com algo assim: <b:if>. Essa é a a <tag> que faz toda a mágica acontecer, ela que fará os elementos aparecerem ou desaparecerem nas páginas desejadas. Mas vale lembrar que ela muda, depende da página que você queira utilizar, seja para exibir ou para ocultar.

O trecho abaixo demonstra um pouco melhor o que eu quero dizer:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<-- Cole o código do widget ou HTML aqui!-->
</b:if>

No exemplo acima, tudo que estiver no lugar do trecho em vermelho só será exibido na pagina inicial do blog.

1. Entendendo o código:

Bom, se você tem ou já teve contato com alguma linguagem de programação deve ter percebido o código do exemplo é como uma condição IF (ou seja, é uma condição SE), onde ela compara a URL em que você está com a URL da página principal do blog. Até aqui tudo certo?

Então quando essa condição for verdadeira ele exibirá o que está no código em vermelho, caso você não esteja na URL da página principal (condição falsa) o trecho em vermelho não será exibido, simples assim.

Ainda não conseguiu entender? Vá em frente e faça o teste com um widget do seu blog e veja a diferença. ;) IMPORTANTE: Lembre-se de fazer o backup do seu blog, para caso haja um imprevisto e algo de errado!

2. Códigos para Exibir/Ocultar os Elementos:

Mostrei apenas um exemplo para exibir os elementos apenas na página principal do blog, agora vamos ver como utilizar essa <tag> em outras situações:

+ Veja todos os códigos...

2.1. Para ocultar um elemento somente na página principal:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

2.2. Para ocultar um elemento somente nas páginas internas (páginas de postagem):

<b:if cond='data:blog.pageType != "item"'>

2.3. Para exibir um elemento somente nas páginas internas:

<b:if cond='data:blog.pageType == "item"'>

2.4. Para ocultar um elemento somente nas páginas estáticas (páginas que você cria no Blogger):

<b:if cond='data:blog.pageType != "static_page"'>

2.5. Para exibir um elemento somente nas páginas estáticas:

<b:if cond='data:blog.pageType == "static_page"'>

2.6. Para exibir um elemento somente nas páginas de arquivos:

<b:if cond='data:blog.pageType == "archive"'>

2.7. Para ocultar um elemento somente nas páginas de arquivos:

<b:if cond='data:blog.pageType != "archive"'>

2.8. Para ocultar um elemento somente em uma página específica:

<b:if cond='data:blog.url != "URL-DA-PÁGINA"'>

2.9. Para exibir um elemento somente em uma página específica:

<b:if cond='data:blog.url == "URL-DA-PÁGINA"'>

2.10. Para ocultar um elemento somente na página de um marcador específico:

<b:if cond='data:blog.url != "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

2.11. Para exibir um elemento somente na página de um marcador específico:

<b:if cond='data:blog.url == "URL-DO-BLOG/search/label/NOME-DO-MARCADOR"'>

OBS.: Nunca se esqueça que para cada tag <b:if> criada você precisa usar a tag de fechamento </b:if>

Até a próxima!

+ Continue lendo...

Exibir/Ocultar partes de um post

Facilite a vida do leitor do seu blog com esse recurso simples

Como vocês podem ver no post com as dicas para aproveitar o seu pendrive ao máximo, eu utilizei um recurso bem interessante, para Exibir/Ocultar partes de um post. E como o caro leitor, André Souto me pediu, estou postando um tutorial de como utilizar esse recurso. Esta dica, bem simples de ser usada, permite ocultar partes de um post e mostrá-las quando o leitor quiser. Podem-se esconder textos, imagens, vídeos e serve para diminuir o tamanho do post quando temos algo muito extenso dentro do artigo. Veja uns exemplos abaixo: [+/-] Mostrar/Ocultar

[+/-] Mostrar/Ocultar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec magna justo, eu dignissim odio. Nunc aliquam laoreet diam non eleifend. Mauris vehicula, mauris vel vehicula condimentum, neque sem congue diam, nec tempor tortor erat nec massa. Duis tempus, turpis in scelerisque blandit, eros leo bibendum odio, eu faucibus turpis justo ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean a purus vehicula sapien viverra eleifend. Praesent et nisi massa. Duis lacinia orci ac quam posuere nec scelerisque lectus sollicitudin. Sed eget vulputate turpis. Duis cursus mollis neque quis feugiat.

Para que possa fazer o mesmo no seu blog, tem que seguir os passos abaixo. Em primeiro lugar vamos mexer no código HTML do seu template para adicionar JavaScript.

1. Adicionando o <script>

1.1. Acesse o Painel do Blogger > Modelo (Design, pra quem usa a interface antiga do blogger) > Editar HTML; ATENÇÃO: Faça o backup do seu modelo atual, para o caso de ter algum problema.

1.2. Procure pelo seguinte trecho:

</head>

1.3. Acima do trecho anterior cole o código abaixo:

<!-- Prototype y Scriptaculous--> <script src='http://www.google.com/jsapi'/> <script> google.load("prototype","1.6.0.3"); google.load("scriptaculous", "1.8.2"); </script> <!-- Prototype y Scriptaculous-->

Se você já utilizou o código JavasScript acima, em outros tutoriais (Mostrar/Ocultar Gadget HTML/JavaScript e Arquivo do Blog) não volte a adicioná-lo.

1.4. Clique em Pré-Visualizar/Visualizar, se tudo estiver no seu devido lugar, clique em Guardar/Salvar Modelo.

2. Utilizando o <script>

Agora sempre que quiser utilizar este recurso nos seus artigos, adicione o seguinte código: <a onclick="Effect.toggle("expandir1","slide"); return false" href="#">[+/-] Mostrar/Ocultar</a> <div style='display: none;' id='expandir1'><p>CÓDIGO A OCULTAR!</p></div> NOTA: Tome em conta que deverá alterar expandir1 sempre que utilizar o hack mais de uma vez no post, por exemplo, se utilizar 2 vezes em um post, o primeiro ficará expandir1 e o segundo ficará expandir2 e assim por diante.
NOTA 2: Altere CÓDIGO A OCULTAR! pelo que deseje ocultar, seja uma imagem, um vídeo ou um texto. Qualquer elemento que tenha dentro de um artigo pode ser ocultado. Até a próxima!

+ Continue lendo...

Criando um widget de posts relacionados com LinkWithin

Melhore a qualidade de seu blog fazendo com que seus visitantes permaneçam por mais tempo!

Usar um widget de Posts Relacionados, pode ajudar a melhorar a qualidade de seu blog, dando um ar “mais profissional” e principalmente fazendo com que seus visitantes fiquem mais tempo em seu blog e visitem mais páginas!

Muitos não usam esse widget por acharem que para instalá-lo precisa de conhecimentos “avançados” em HTML, o que não é verdade! Hoje existe um site chamado LinkWithin, que faz todo o serviço complicado para nós!

1. Instalando o Widget de forma padrão

1.1. Acesse a página do LinkWithin

1.2. Preencha o formulário roxo, localizado no canto direito da página. Conforme abaixo:

1. Digite um e-mail valido;
2. Digite o link de seu blog/site;
3. Escolha a plataforma em que seu blog está hospedado (Blogger, WordPress, TypePad ou Outras);
4. Escolha a quantidade de links que você quer relacionar a cada posts;
5. Marque essa opção se o fundo de seus posts for de cor escura;

1.3. Feito isso clique em “Get Widget!”

1.4. Você será redirecionado para uma página de instalação do Widget, então clique em "Install Widget";

1.5. Selecione seu blog e clique em "Add Widget";

1.6. Feito isso, o Widget será instalado automaticamente no layout do seu blog;

2. Instalando o Widget apenas nas páginas de postagem

Para colocar o widget somente no fim de cada página individual, como aparece aqui no Gerenciando iDéia'S, faça os seguintes procedimentos:

2.1. Dentro do Widget copie todo o código fornecido pelo LinkWithin. Como no exemplo:

2.2. Vá em Editar HTML e clique em "Expandir modelos de widgets";
ATENÇÃO: Faça o backup do seu modelo atual, para o caso de ter algum problema.

2.3. Feito o procedimento no item 2.2., dentro do HTML procure pelo seguinte trecho (Use Ctrl+F):
<p class='post-footer-line post-footer-line-1'>
2.3.1. Caso não encontre procure por:
<div class='post-footer-line post-footer-line-1'>
2.4. Abaixo do trecho anterior cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'>CÓDIGO DO LINKWITHIN</b:if>
Onde está escrito CÓDIGO DO LINKWITHIN substitua pelo código que você copiou como mostra o exemplo do item 2.1.
2.5. Feito os procedimentos anteriores clique em "Visualizar", se estiver tudo em seu devido lugar clique em "Salvar Modelo".

Até a próxima!

+ Continue lendo...

Como usar o recurso Jump Break do Blogger

Com o 10º aniversário do Blogger, foram adicionados novos recursos para o serviço, incluindo um chamado “Jump Break”.

O “Jump Break” serve para encurtar uma postagem, na página inicial de um blog, e colocar um link do tipo “Continue lendo...”. Este recurso tem uma vantagem sobre o método antigo de encurtar as postagens: ele não só esconde o restante das postagens, como também não recarrega a página. O método antigo escondia, mas ainda carregava as postagens por inteiro, sendo isso um problema para postagens muito grandes e/ou com muitas imagens.

Mas essa função só está disponível para quem usa o novo editor de textos do Blogger.
Para habilitá-lo, entre no Painel > Configurações e, no final da página, procure por Configurações Globais, marque a opção "editor atualizado". Veja o exemplo:


Feitas essas modificações, vamos ao tutorial.

1. Utilizando o resumo de postagens

Quem usa templates com poucas edições ou os demais modelos disponibilizados pelo Blogger, deve entrar no novo editor de textos, escrever o post e escolher onde o resumo deve ser iniciado. Daí é só clicar no ícone "Inserir Jump Break".

1.1. Se você utiliza modelos de postagem na opção "Escrever", seu post ficará assim:


1.2. Caso você utilize modelos de postagem na opção "HTML", ficará assim:


Agora é só postar e ver o resultado. Por padrão aparecerá um link com a mensagem “Continue lendo...”.

1.3. Para alterar, entre no layout do blog e em Postagens do blog, clique em editar (imagem 1), então procure pelo texto do link (imagem 2) da página de postagem e escreva uma frase de sua preferência.

(Imagem 1)______________________________(Imagem 2)

Caso você tenha feito todo o procedimento acima e, mesmo assim, não funcionou, é porque o template que você utiliza não possui essa função habilitada, então siga os procedimentos a seguir para ativar esse recurso no seu blog.

2. Habilitando o recurso em templates personalizados

Para quem usa um template personalizado – que é o meu caso – é preciso instalar um código no HTML do template.
Veja a seguir como instalar:

2.1. Acesse o Painel do Blog > Modelo (Design, pra quem usa a interface antiga do blogger) > Editar HTML e clique em "Expandir modelos de widgets";
ATENÇÃO: Faça o backup do seu modelo atual, para o caso de ter algum problema.

2.2. Feito o procedimento no item 2.1., dentro do HTML procure pelo seguinte trecho (Use Ctrl+F):

<data:post.body/>

É possivel que você encontre mais de um trecho igual, então vá até o ultimo que você encontrou.

2.3. Logo abaixo do trecho citado, cole o seguinte código:

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

2.4. Visualize, se estiver tudo bem, salve!

3. Considerações finais

Se você fez todos os passos anteriores e mesmo assim não conseguiu habilitar essa função, entre em contato pelo nosso formulário ou, se preferir, me mande um email e tentarei corrigir o erro pra você, segue o email abaixo:

gerenciandoideias@live.com

OBS.: Essa função é utilizada para ocultar apenas posts que você tenha interesse, caso queira que todos os posts fiquem resumidos na pagina inicial do blog, inclusive os antigos, leia esse artigo e veja uma maneira fácil.

ATENÇÃO: Diversos leitores reportaram que a nova função “Leia mais” faz com que o layout do blog fique deformado, jogando as colunas para debaixo dos posts. Então encontrei uma solução no Dicas Blogger, veja aqui a solução.

Até a próxima!

+ Continue lendo...

Resumir postagens no blogger automaticamente

Esse recurso é muito utilizado por vários sites/blogs, pois ao exibir posts resumidos, muito além de um resultado estético bonito, há muito mais vantagens.

O recurso diminui o tempo de abertura da página principal, inclusive facilitando a leitura pelos motores de busca, oferece uma espécie de lista ao leitor que poderá se interessar por mais de um artigo e permanecer mais tempo em sua página.

Esta é uma opção bem simples e que está disponível para o Blogger, caso você utilize o Wordpress sugiro que leia esse artigo.

O script desenvolvido por Vietwebguide, resume as postagens sempre com o mesmo número de caracteres e exibe uma miniatura da imagem (tipo thumbnails) que estiver no post. Depois de instalado o script, você só precisa continuar postando normalmente. Os posts anteriores também serão automaticamente ajustados.

Como inserir o <script>

1. Acesse o Painel do Blog > Modelo (Design, pra quem usa a interface antiga do blogger) > Editar HTML;
ATENÇÃO: Faça o backup do seu modelo atual, para o caso de ter algum problema.

2. Feito os procedimento anteriores, dentro do HTML procure pelo trecho (Ctrl+F) </head> e cole o código (script) logo abaixo dele.

<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script src='http://vietwebguide2.googlepages.com/summary-post-v20-test.js' type='text/javascript'/>

3. Salve. Depois clique na caixa "Expandir modelos de widgets" e procure pelo trecho:

<data:post.body/>

4. Substitua o código acima por esse:

<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb ("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> + Leia mais...</a>
</span></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p>

5. Visualize, se estiver tudo bem, salve!

Configurando o <script> (opcional)

summary_noimg - Número de caracteres caso não haja imagens;
summary_img - Número de caracteres a mostrar no caso de post com imagens;
img_thumb_height - Altura da imagem (thumbnail);
img_thumb_width - Largura da imagem (thumbnail);

Os valores utilizados parecem apropriados para template com 480px de largura do main-wrapper (coluna dos posts), e a maioria dos thumbnails são de 125×125 píxels.
Você pode alterar a seu critério.

Até a próxima!

+ Continue lendo...

Personalizar Índices de Conteúdo

Como publiquei anteriormente, estou ensinado a criar um mapa do site no seu blog utilizando índice de conteúdo por Categoria e/ou Data de Publicação.

Eu utilizo essas duas maneiras aqui no Gerenciando iDéia'S e como vocês podem ver eu encontrei uma forma de personalizar os títulos das categorias deste índice.

Então criei esse post para mostrar a você que é bem simples aplicar alguns estilos aos títulos das categorias.

Personalizando os índices de conteúdo.

1. Abra para edição a página/post que você criou (onde está instalado o script).
2. Copie o código abaixo e cole logo acima do script que você inseriu na página/post:

<style type="text/css">
.label p {
font-size: 150%; /*--edite tamanho da fonte--*/
background: #b43533; /*--edite cor de fundo--*/
color: #fff; /*--edite cor de fundo--*/
border: 1px solid #000; /*--edite cor e estilo de borda--*/
padding: 5px 15px 5px 15px;
margin: 10px 0px 10px 0px;
text-decoration: none;
outline: none;
}
.label p a:link{
color: #ffffff; /*--edite cor do link do titulo--*/
text-decoration: none;
}
.label p a:hover{
color: #ffffff; /*--edite cor do link do titulo acioando--*/
text-decoration: none;
font-weight: bold;
}
.label li {
color: #3a3a3a;
text-decoration: none;
border-bottom: 1px dashed #CCCCCC; /*--edite cor e estilo de borda--*/
}
.label li a:link{
color: #3a3a3a;
text-decoration:none;
}
.label li a:hover{
font-weight: bold;
color: #712c2c;
}
</style>

Os campos destacados no código são os locais que você deve editar para aplicar os estilos a seu gosto.

Para facilitar a aplicação dos estilos CSS, segue o que cada trecho de código corresponde:

• .label p - Corresponde aos títulos das categorias;
• .label p a:link - Corresponde ao link ativo dos títulos das categorias;
• .label p a:hover - Corresponde ao link no estado hover dos títulos das categorias;
• .label li - Corresponde aos itens das listas;
• .label p a:link - Corresponde ao link ativo das listas das categorias;
• .label p a:hover - Corresponde ao link no estado hover das listas das categorias;

Agora que você já aprendeu a aplicar estilos aos títulos das categorias da sua página de índice, é só usar a imaginação e tornar os títulos mais atrativos de acordo com seu gosto!

Até a próxima!

+ Continue lendo...

Criar Mapa do Site para seu Blog/Site

Uma dica super útil para facilitar o encontro de todos os seus artigos publicados é criando um Mapa do Site no seu blog/site.

O Sitemaps, ou Mapa do Site, é um índice de conteúdo, que mostra todos os artigos publicados de forma ordenada e que se atualiza automaticamente a cada nova postagem.

Você pode criar uma página estática com um "mapa do site", colocando uma lista de arquivos separados por data de publicação ou se preferir, separados por categorias (marcadores) em uma postagem, facilitando assim a busca de seus artigos pelos leitores.

Abaixo você encontrará as duas formas para criar um Mapa do Site, assim você escolhe se quer apresentar um Indice separado por data de publicação ou por categorias.

Obs.: Para o funcionamento deste script é necessário que seu blog tenha o Feed ativado.

1. Indice por Arquivo (Data de Publicação)

Utilizando essa opção você irá adicionar uma listas dos artigos do seu blog/site apresentados e separados em ordem descendente por data (mês e dia da publicação).

Para adicionar ao seu blog/site basta criar uma nova postagem ou uma página estática e inserir nela o código abaixo:

<script style="text/javascript" src="http://dl.dropbox.com/u/58466938/Mapa-do-Site-Data.js"></script>
<script src="http://URL-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Onde está escrito URL-DO-SEU-BLOG substitua pelo link do seu blog/site.

2. Indice por Categoria (Marcadores)

Agora você vai ver como colocar um indice separado por Categorias (marcadores).

A diferença deste script para o outro onde o índice é apresentado por Arquivo, é que neste, a cada post recente publicado, aparece a palavra "Novo!" ao lado de cada nova publicação.

Caso queira adicionar esse ao seu blog, basta criar um post ou uma página com o script abaixo:

<script style="text/javascript" src="http://dl.dropbox.com/u/58466938/Mapa-do-Site-Categoria.js"></script>
<script src="http://URL-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Onde está escrito URL-DO-SEU-BLOG substitua pelo link do seu blog/site.

Se quiser aprender a aplicar estilos para personalizar os títulos das categorias destes índices, confira o artigo:

• Personalizar Índices de Conteúdo

Até a próxima!

+ Continue lendo...

Otimize seu blog com Meta Tags

As meta tags são muito importantes para um página na internet, é ela que diz o que é aquela página e o que faz. Ou seja, quando você faz uma pesquisa na internet, são as meta tags que irão descrever as páginas resultantes, essa técnica é muito importante para obter bons resultados.

Por padrão, os templates do Blogger não possuem as meta tags, então se você utiliza o modelo padrão vá ao 2° Passo - Adicionando Meta Tags:

1° Passo | Identificando e Modificando as Meta Tags

Caso utilize templates personalizados, basta procurar pelo seguinte código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIÇÃO' name='description'/>
<meta content='PALAVRAS CHAVES' name='keywords'/>
<meta content='PALAVRAS CHAVES ROBOTS'name='robots'/>
</b:if>

Agora que você achou as Meta Tags, basta modifica-las de acordo com o conteúdo do seu blog/site.

• DESCRIÇÃO:Insira uma descrição de seu blog de no máximo 160 caracteres;
• PALAVRAS CHAVES: Insira as palavras-chave de seu blog. Não coloque muitas palavras, use letras minúsculas, e separe as palavras-chave por vírgula;
• PALAVRAS CHAVES ROBOTS: Insiras as palavras-chaves de seu blog, escreva no máximo 20 palavras, use letras minúsculas, e separe as palavras-chave por ponto, e sem espaço.

Obs.: Se no template que você utiliza não possui a linha:

<meta content='PALAVRAS CHAVES ROBOTS'name='robots'/>

Basta adiciona-la conforme o exemplo acima.

2° Passo | Adicionando Meta Tags

Caso utilize os templates padrão do Blogger, é necessário adicionar as Meta Tags, veja abaixo como adicionar:

1. Procure pelo código abaixo:
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
2. Cole o códio abaixo logo em cima das linhas anteriores:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIÇÃO' name='description'/>
<meta content='PALAVRAS CHAVES' name='keywords'/>
<meta content='PALAVRAS CHAVES ROBOTS'name='robots'/>
</b:if>

O código adicionado ficará da seguinte maneira:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIÇÃO' name='description'/>
<meta content='PALAVRAS CHAVES' name='keywords'/>
<meta content='PALAVRAS CHAVES ROBOTS'name='robots'/>
</b:if>

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Depois de adicionar basta seguir o 1° Passo, para otimizar as Meta Tags;

Veja se não há erros, e salve as alterações. Lembre-se que pode levar um tempo até as mudanças aparecerem nos buscadores.

Quais meta tags você usa?

Compartilhe conosco sua experiência com as meta tags! Não indiquei todas meta tags existentes, apenas as que considero mais úteis e comuns, caso queira conhecer mais sobre meta tags e outras técnicas SEO, visite os sites SEO que encontrei em um artigo no Crie Blogger.

Até a próxima!

+ Continue lendo...

Capitalização de texto

Seguem os passos para transformar a assinatura do autor do post em link.

1. No painel do Blogger, vá até a página Layout » Editar HTML e marque a opção Expandir modelos de widgets.

2. Procure pelo seguinte código:

+ Continue lendo...

Ocultar o blog quando estamos fazendo modificações

Geralmente, quando vamos fazer grandes modificações no blog, recorremos a opção de torná-lo visível apenas para o autor do blog, o que pode deixar os leitores bastante confusos (já me aconteceu mais de uma vez...). Seus leitores podem pensar que o blog "acabou" ou que precisarão solicitar permissão para voltar a acessá-lo. Para evitar qualquer transtorno e deixar um aviso claro aos seus leitores de que a interrupção é temporária, segue uma dica muito interessante:

+ Continue lendo...