Para quem visita sites constantemente já deve ter notado que é, ou sempre foi, um padrão ter artigos relacionados no final de cada texto/post.

Essa pratica ajuda a melhorar a interação do leitor com seu site por meio de artigos que são relevantes e relacionados com o post que o visitante acabou de ler, e também otimiza seu site para as ferramentas de buscas, como o Google, Bing, etc.


Para implementar no seu site/blog é relativamente simples.


Para o blogger já temos dois artigos publicados por aqui:
Lista de Artigos Relacionados no Rodapé do Post
Artigos Relacionados com Imagem no final dos posts


Para Wordpress eu vou apresentar algumas configurações do plugin WordPress Related Posts.

Como de costume existem algumas maneiras de instalar o plugin no seu blog que podem ser por FTP, pelo próprio painel de administração. Vou escolher a opção de instalar diretamente pelo painel.

Dentro do painel do seu site ou blog, vá em Plugins>>Adicionar Novo e digite WordPress Related Posts e clique em Pesquisar plugins.

No site oficial do plugin Related Posts também tem um tutorial de como instalar no wordpress

Vão aparecer vários resultados e o primeiro é o plugin que pesquisamos (confirme se é o mesmo nome), clique em Instalar agora e após a instalação ative o plugin.


Aparecerá outra opção na área de administração de seu blog com o nome Related Post, clique nessa opção.

As configurações são poucas, mas bem eficientes, vamos aprender como é fácil configura-las.

Configurando o plugin WordPress Related Posts

Basic Settings. Você escolhe o que aparecerá como título dos artigos relacionados,quantidade de artigos e se é para incluir todos os artigos do site ou só de 1,3,12 meses atrás.


Theme Settings. Permite configurar qual modelo disponível você quer que apareça,ao lado você pode ver uma pré visualização de como ficará em seu blog.Clicando em Customize você escolhe se quer imagens nos posts relacionados e também mostrar o numero de comentários,data da publicação,quantidade de caracteres nos artigos que serão exibidos,sem contar que é possível personalizar o CSS.

Mobile Phones você pode fazer o mesmo que foi descrito acima para ser exibido na versão móbile do seu site ou blog.


Onde está escrito “For posts without images, a default image Will be show” você escolhe uma imagem como padrão para ser exibida caso o respectivo artigo não tenha nenhuma.

Other Settings. É disponibilizado a opção de excluir alguma categoria que você não queira que apareça nos artigos relacionados.

Auto Insert Related Posts você inseri automaticamente no final do artigo ou caso queira pode usar o código em php, dentro dos parênteses, para adicionar diretamente no código fonte de seu template.

Display Related Posts in Feed mostra os posts relacionados em seu feed.

Turn statistics on* exibe as estatísticas diretamente neste painel do plugin.

Support us você escolhe em mostrar o link/logo do criador do plugin

Esses foram as principais configurações que podem ser feitas no plugin, não esqueça de após ter feito alguma alteração clicar em Save changes.


Gostou da dica do plugin? Deixe um comentário contando o que achou ou até para indicar algum outro plugin que faça o mesmo que este.

Até Breve!

Esse artigo é um guest post escrito por Yara G. Ela é blogueira desde 2008, Webmiss autodidata, pseudocontadora, poliglota, compositora e escritora nas horas vagas. Você a encontra em seus blogs Schrei in Deutsch e See the halo, ou nas redes sociais: Twitter e Facebook.


Algum tempo atrás, a Nessa postou aqui no MB um tutorial de como personalizar os comentários no novo sistema do blogger. E, nesse tutorial, havia uma imagem de background que “se misturava” com a borda dos comentários para dar a impressão de que a setinha apontando para o avatar de quem comentou faz parte do container. A instrução correspondente à imagem era que ela tinha que ter exatamente a mesma cor da borda. Ao que eu fui seguir o tutorial para personalizar os comentários nos meus blogs, soube exatamente o que fazer.
Usar a mesma imagem e mesma cor de borda? Nada disso, seria muita falta de criatividade. Apenas fazer um cálculo para fazer com que a cor da minha borda (definida em hexadecimal) fosse a mesma da minha imagem (definida pelo editor de imagem em RGB). Como eu fiz isso é o que vou explicar agora.

Já estamos acostumados a usar valores hexadecimais para configurar as cores nos blogs, e quem mexe com edição de imagem já deve ter notado que as configurações de cores são ajustadas por valores RGB. Agora, como vamos configurar a mesma cor de dois modos diferentes? Há uma relação entre um e outro? Há sim!

Cor RGB

Vamos falar primeiro de RGB.
Se você configurar uma cor preta no editor, observe os valores que aparecem nas caixinhas “vermelho”, “verde” e “azul”, destacadas no print abaixo:



Estão zeradas, pois não  há nenhuma incidência de luz sobre nenhuma das três cores para formar o preto. Agora, coloque no branco. Os valores nas mesmas caixinhas será 255:



O branco, ao contrário, usa toda a luz das três cores. Trocando em miúdos, está aí a explicação da ausência de cor no preto e a mistura de todas as cores no branco.
255 é o valor máximo que uma cor terá. Pode tentar colocar manualmente um valor maior na caixinha, ela volta a ser 255. O motivo disso é o fato de cada informação de cor estar guardada em um byte (que, por sua vez, tem 8 bits). O que isso significa na prática é o número de combinações possíveis: se você pode escolher entre uma intensidade de 0 a 255 de vermelho, de 0 a 255 de verde e de 0 a 255 de azul, sempre do mais escuro (0) ao mais intenso (255), serão 256³ possibilidades diferentes de cores (advindas de combinações de tom, saturação e brilho), mesmo que não sejam tão facilmente distinguíveis. O resultado dessa conta é mais de 16 milhões, para ser exata, 16.777.216.
Voltando às cores. Se você colocar 255 em “vermelho” e 0 nas outras duas, a cor será vermelho puro. Se fizer o mesmo com 255 apenas no “verde”, virá o verde. Com o azul, idem.
 

Cor Hexadecimal

Agora vamos tratar de hexadecimal.
Sabemos que ‘hexa’ significa seis e ‘decimal’ é o sistema de contagem com base 10. Logo, ‘hexadecimal’ nada mais é do que sistema de contagem com base 16. Como assim? Decimal é fácil, temos os algarismos de 0 a 9 e mandamos bala. Mas 16? Mistura-se 11 com 12 com 13, como se desarticula isso? Com letras. Já que não temos mais algarismos naturais depois do 9, usa-se letras para representar os próximos. Assim, 10 é correspondido por A, 11 é correspondido por B, 12 por C, 13 por D, 14 por E e 15 por F. O décimo sexto no caso já está lá no 0. A lógica é: quanto mais próximo do 0, mais escuro e quanto ‘maior’ a letra, mais intenso.
Agora vamos visualizar o seguinte: o código da cor preta é #000000 e o da cor branca é #ffffff.
Agora vamos desmembrar esses elementos. O sistema hexadecimal também usa RGB, só que mais implícito. Como sabido, precisamos de seis caracteres seguidos por # para formar o código de uma cor. E cada dois caracteres desses são um desses valores. Ou seja:
#FF FF FF

#00 00 00

Tanto que temos também:

 #ff0000   #00ff00   #0000ff

Já sendo possível por aqui relacionar perfeitamente o RGB com valores de 0 a 255. Logo, combinando os números de 0 ao f (que representa o 15), podemos especificar as mesmas 256³ combinações de tom, saturação e brilho.
Mas RGB é fácil, basta colocar um valor de 0 a 255 para cada cor. Agora, com a entrada das letras, a coisa muda de figura.

Como funciona o cálculo do código hexadecimal?
Cada dois caracteres simboliza um valor. Então temos 256 valores entre 00 e ff. Mas ao que interessa: o primeiro caractere simboliza o 16 e o segundo, o que sobrar. Isso nada mais é do que uma divisão: quantas vezes 16 há em 0? Nenhuma. Quanto menos de 16 há em 0? Zero.
Vamos exemplificar matematicamente:

Vou usar uma convenção onde: dividendo:divisor=quociente%resto.
Temos o preto:
Preto é R = 0, G = 0 e B = 0.
Então vamos fazer a divisão desses valores por 16.
0:16=0%0 – Ou 0 dividido por 16 é igual a 0 com resto 0.

Temos o branco. Branco é R = 255, G = 255 e B = 255.
A conta é a mesma.
255:16=15%15 – Ou 255 dividido por 16 é igual a 15 com resto 15.

Agora vamos converter isso. Os valores que vamos usar para extrair o código hexadecimal são o quociente e o resto. Logo, se no preto o quociente é 0 e o resto é 0, os caracteres serão 0 e 0. E como os valores são os mesmos tanto para R quanto para G e B, basta fazer esse cálculo uma única vez e temos o código completo: #000000.
A mesma coisa vale para o branco: quociente é 15 e o resto também.
Como em hexadecimal 15 é f, extraímos #ffffff pelo mesmo princípio.
Se os valores das três cores tanto em RGB quanto em hexadecimal for o mesmo, o resultado será sempre um tom de cinza.
Por outro lado, se nós tivéssemos valores diferentes para R, G e B, essa divisão teria de ser feita com cada um deles, por exemplo:
RGB(77,208,159)
A conta fica:
R – 77:16=4%13
G – 208:16=13%0
B – 159:16=9%15
A conversão fica:
R – 4d (13=d)
G – d0 (13=d)
B – 9f (15=f)
E o código da cor fica:
#4dd09f

Tá, mas do que isso vai me servir?
O caso do tutorial que eu citei no início do artigo já é um bom exemplo por si só: Saber a relação entre cores RGB e Hexadecimais, vai ajudar muito a personalização, misturar elementos do HTML com imagens. No meu caso, eu pretendia usar as bordas da cor #191970, então, para a imagem da seta, me bastou converter o 19 hexadecimal para 25 decimal e o 70 hexadecimal para 112 e eis a minha cor no meu editor de imagem.

Para te ajudar a procurar uma cor hexadecimal ou RGB e convertê-la, eis aqui uma tabela com códigos de centenas delas mastigadinhas:
» Tabela de cores web

Na tabela, o código Java é o mesmo que RGB e o código HTML é o hexadecimal.

Confessando uma coisa, me senti iluminada por saber essa relação RGB-hexadecimal e fazer as minhas personalizações tão facilmente, mas pensei no pessoal que não tem a menor noção do que um tem a ver com o outro e, possivelmente, mas acabou usando as bordas do mesmo jeito do tutorial para também aproveitar a mesma imagem por que não sabia como obteria exatamente a mesma cor se o sistema de especificação é diferente; ou tentou fazer igual e acabou desistindo porque não conseguiu. Foi por isso que resolvi criar este tutorial e publicar aqui no Mundo Blogger.

Espero que o artigo lhes seja útil, ou no mínimo agregue conhecimento na vasta área de Webdesign.

Quer ter seu artigo publicado aqui no Mundo Blogger?
Veja como: Publique seu artigo no Mundo Blogger

6 dicas para melhorar o SEO do blog.

Um blogueiro precisa saber pelo menos o mínimo sobre SEO. Você não precisa ser um expert, um analista de SEO, mas precisa saber o mínimo para que seus artigos fiquem bem indexados nos mecanismos de pesquisa.


A frase “conteúdo é rei” é muito ouvida e utilizada por blogueiros, querendo com isso mostrar que tendo conteúdo de qualidade o resto não importa muito. Isso não é verdade. O conteúdo de qualidade é importante, mas não é a única preocupação do blogueiro atualmente. Hoje você, além de produzir conteúdo de qualidade, precisa ter seu texto otimizado para os mecanismos de pesquisa.

• Apenas conteúdo de qualidade não é o suficiente – Quero Criar um Blog

6 dicas para melhorar o SEO do blog

Nesse artigo vou dar uma ideia do que seria o básico que o blogueiro precisa aprender sobre SEO e no final apresentar uma nova ferramenta SEO grátis que vai lhe ajudar a solidificar esses e outros conhecimentos simples em SEO. Vamos então as 6 dicas para melhorar o SEO do blog.

1- Defina uma palavra chave

Quando for escrever um artigo, é necessário eleger uma palavra chave (ou termo) apropriado para o texto. O que você quer é que essa palavra chave ou termo, ao ser procurado no Google, retorne seu artigo entre os primeiros. Pra isso é necessário utilizar essa palavra chave algumas vezes no texto.


Nesse artigo a palavra chave poderia ser SEO, mas esse termo é muito genérico e dificilmente eu conseguiria ficar entre os primeiros para essa pesquisa. Então vou trabalhar com um termo, ou uma palavra chave long tail. Vou trabalhar esse artigo pra tentar ranquear para o termo “dicas para melhorar o SEO do blog”. Vou utilizar esse termo algumas vezes, mas sem exageros.

2- Utilize essa palavra chave no título do artigo

Agora que já defini minha palavra chave, vou utiliza-la no título do artigo. Essa etapa é muito importante e certamente o ajudará a ranquear melhor nos mecanismos de pesquisa. A maioria dos sistemas de blogs que utilizamos (WordPress, Blogger) utilizamo o título do artigo pra criar a url do artigo, o que conta mais um ponto na tarefa de ranquear melhor.


Confira que tenho no meu título a palavra chave dicas para melhorar o SEO do blog, intercalada com outras palavras pra formar um título atraente e otimizado para SEO.

3- Utilize essa palavra chave em tags H2

É necessário também utilizar tags de cabeçalho (H2, H3) nos seus artigos. Nesse artigo estou usando a palavra chave “dicas para melhorar o SEO do blog” num cabeçalho H2. Faça isso sempre, pois também o ajudará na tarefa de ficar bem colocado nos resultados de pesquisa. Se ainda não sabe ou não entende o que são as tags de cabeçalho sugiro que pesquise um pouco sobre o assunto.

4- Utilize essa palavra chave no corpo do texto

Você precisa utilizar a sua palavra chave ao longo do texto. Principalmente no primeiro parágrafo (veja que tenho uma técnica pra isso, repito o título em Itálico logo na primeira linha). Mas tome cuidado, existe um limite máximo e mínimo pra isso. O seu texto precisa ter entre 1 e 4,5% de ocorrências da palavra chave. Menos que isso não fará efeito e mais que isso pode ligar a luz de alerta dos mecanismos de pesquisa e seu texto ser considerado spam.


A minha palavra chave dicas para melhorar o SEO do blog está aparecendo 1% do texto.

5- Escreva artigos com mais de 300 palavras

Artigos com menos de 300 palavras tem pouca chance de ficar entre os primeiros resultados nos mecanismos de pesquisa. Claro que você conseguirá ranquear para várias palavras chave menos procuradas e expressivas com um texto menor que 300 palavras, mas para palavras mais concorridas e que trarão um número maior de visitas, será praticamente impossível.


Escreva artigos com mais de 300 palavras sempre (esse artigo tem 855 palavras). Não é difícil quando você realmente entende do assunto que está falando.

6- Utilize a ferramenta SEO Blog

Algumas das dicas passadas acima, apesar de simples, são difíceis de serem verificadas, como por exemplo a quantidade das palavras chave no texto, em porcentagem. Você não vai ficar escrevendo um artigo com uma calculadora na mão!


Pra resolver esse e outros problemas e lhe ajudar a treinar a escrever textos de qualidade voltados para os mecanismos de pesquisa também, criei a ferramenta SEO Blog. Com ela você pode analisar seu texto, receber recomendações e assim melhorar seus textos e as visitas de seu blog.


Pra utilizar é muito simples, basta preencher os dados solicitados e depois copiar seu artigo (que está escrevendo ou que já está publicado), acessar o Ferramenta SEO Blog e preencher os campos solicitados. Depois clique em OK (botão verde) e analise os resultados.


Estou testando na ferramenta esse artigo, com a palavra chave “dicas para melhorar o SEO do blog” e o resultado está abaixo.

Conclusão

Como pode ver, com algumas técnicas simples de SEO você já pode melhorar e muito as visitas de seu blog oriundas dos mecanismos de pesquisa. Espero que tenha gostado das 6 dicas para melhorar o SEO do blog e principalmente da Ferramenta SEO Blog.


Qualquer dúvida, deixe nos comentários.

Existem alguns erros que são comuns em blogs e é disso que iremos tratar no post de hoje. Se você não cometer esses erros, com certeza, seu blog já deverá ganhar mais alguma relevância no Google.

Problemas com a tag Title.

Começo logo pela tag title que, provavelmente, é a parte mais importante do SEO On-page.

Titles muito longos: o Google até mostra quantos titles longos demais você tem e em quais páginas eles estão você pode encontrar essa informação no Webmaster Tools.

Os títulos de uma página devem ter no máximo 70 caracteres, ou seja, tente não passar muito desse número.

Geralmente este problema com title muito longo está ligado ao próximo item.

SPAM no title: tem gente que pensa assim, “já que o title é a parte mais importante da página, vou por nele todas as palavras que eu quero ser encontrado”, por favor, não faça isso.

Existem blogs que quando você vai ver a tag title ela está com mais de 10 ou 15 palavras-chave uma em sequencia da outra, na boa, não faça isso.

Use a sua palavra-chave dentro de uma frase com contexto e que faça sentido.

Titles duplicados: títulos duplicados também é um problema recorrente, vá ao webmaster tools e veja lá quais páginas você está usando títulos duplicados ( sim o Google dá essa informação facilmente para ti ).

Cada página deve ter um título único, ou seja, não pode haver páginas com títulos iguais as das outras.

Isso é muito comum acontecer com paginas tipo a de “contato”, muitas vezes essas páginas acabam usando o mesmo título da página inicial.

Title pouco relevante: outro equivoco muito corriqueiro ( esse é bem normal mesmo ) é quando um blog usa na tag Title o nome do blog, que nem sempre é a palavra-chave principal do blog.

Digamos que exista um blog chamado “Elefante Azul” que fala sobre arquitetura. Se o Title da página principal for “Elefante Azul” ( ou seja só o nome do blog ) dificilmente esse blog irá aparecer para as buscas para “Arquitetura”, pois o nome do blog não carrega a palavra-chave e nem é autoexplicativo.

O certo seria usar, no mínimo, o titulo assim “Arquitetura | Elefante Azul”, ou seja, palavra-chave + nome do blog.

Palavra-chave à direita: o último exemplo ( do elefante azul ), me fez lembrar de outro equivoco também muito corriqueiro. Quanto mais à esquerda uma palavra-chave estiver no Title mais importante ela é para o Google.

É comum ver blogs usando sua marca primeiro no Title do que sua palavra-chave, por exemplo, o blog fictício “Elefante Azul” poderia ao invés de usar o Title do jeito que falei, palavra-chave + nome do blog ( Arquitetura | Elefante Azul ), usar com o nome do blog primeiro e depois a palavra-chave, dessa forma dando mais relevância para “Elefante Azul” do que a “Arquitetura”.

Problemas nas tags de cabeçalho ( h1, h2, h3 e etc )

H1 invisível para o usuário: a tag H1 também deve conter a palavra-chave da página, mas acontece que muitos ao otimizarem a logo do blog (usando a otimização de imagens) acabam botando a h1 na logo.

Só que está não é uma prática muito bem vista pelo Google, pelo simples fato de que as tags de cabeçalho devem ficar visíveis para o usuário, até porque elas foram feitas para ajudar ao usuário entender melhor a dinâmica do texto.

Esse erro é tão comum que eu confesso a vocês que havia esquecido de tirar isso do meu blog ( tenho um blog sobre MKT Digital o Marketing Digital Dicas se quiser de uma conferida ).

Problemas na otimização de imagens

Tag alt nas imagens: por fim ( pelo menos para esse post ) eu queria falar sobre o uso da tag alt em imagens, um recurso bem bacana que mexe com a semântica da página.

Não sei por que, mas muitos blogueiros simplesmente ignoram essa tag, sendo assim um bom ponto forte para ser explorado pelos concorrentes.

Na tag alt, tente descrever o que está na imagem, mas também tentando usar sua palavra-chave.

Encontrar um bom programa de afiliados brasileiro pode ser bem complicado, visto que temos empresas de grande porte dando calote ou não contabilizando corretamente as vendas de seus afiliados.

Não vou citar nomes, mas basta procurara no Google que você encontra dezenas de empresas que se aproveitam de sites/blogs que recebem milhares de visitas para ganhar muito dinheiro em cima e depois não pagar/registrar corretamente os ganhos dos afiliados.

Mas para felicidade de muitos ainda existem empresas que priorizam a divulgação por meio de afiliados e o melhor tratam muito bem e tem uma grande consideração com eles.

Antes de tudo gostaria de ressaltar que não estou falando nenhuma mentira e nem idolatrando a empresa, mas saiba que ela existe!

Com a imagem e folheados você pode se cadastrar gratuitamente e escolher entre ser um cliente, revendedor ou afiliado e aproveitar todas as vantagens que são oferecidas.

Esta empresa trabalha com bijuterias e folheados de qualidade e com ótima aceitação no mercado. Foi fundada em 1999, e aproveitando a internet como meio de expandir a empresa e vender muito mais, e criou sua loja virtual em 2002, atualmente só vende por meio dela.

Como se cadastrar na imagem folheados?

Para saber como se cadastrar, como comprar as bijuterias e folheados pelo site assista ao vídeo, criado pela própria empresa, que explica detalhadamente e passo a passo de como proceder.

(Clique na imagem para abrir o vídeo)

Como já citei você tanto pode comprar para uso pessoal, comprar as bijus e revender em sua cidade ou até para quem já tem um blog ou site indicar novos afiliados para a imagem folheados.

Se você quer ser só um cliente ou até decidiu revender, se cadastre como meu indicado clicando aqui.

Agora se já decidiu trazer novos afiliados para a empresa então clique aqui.

Divulgando programa de afiliados da imagem folheados

Eu participo desde programa há quase um ano, mas já conheço há muitos anos. No começo relutei para participar porque acreditava que não teria muito sucesso, mesmo antes de testar! rsrs

São oferecidas muitas ferramentas para você divulgar e ainda dicas de como e onde você pode divulgar, tudo isso pode ser encontrado dentro de sua conta de afiliado, veja na imagem abaixo:

Além de banners, links, temos três opções de tamanhos de vitrines disponíveis, veja uma delas abaixo:

Para incentivar ainda mais a imagem folheados trabalha baseada no MMN e paga para seus afiliados até o 5º nível. Outra grande vantagem é o cookie de seis meses, isso mesmo, são seis meses! Futuro cliente, revendedor ou afiliado clica no seu link e se cadastra depois de três meses, você ainda ganhará sua comissão.

Pagamentos

Ao acumular R$ 40,00 você pode solicitar o pagamento por meio de transferência bancaria ou pelo pagseguro e entre o dia 1º e 15º do mês é concluído o pagamento.

Para quem tem ainda dúvidas e quiser verificar como esta empresa é bem diferente das outras,veja um comprovante de quanto ganhei até o momento:

Eu não sou nenhum guru,top afiliado da empresa,mas em pouco tempo já ganhei uma boa quantia.Se pretende ser só um afiliado lembre-se de priorizar a indicação de novos clientes e revendedores,pois quando eles fazem uma compra sempre será creditado uma comissão para você.

Ficou convencido de que esta é uma excelente oportunidade? Então se cadastre como meu indicado! Se quiser ser um afiliado clique aqui, e para ser um revendedor clique aqui.

Até mais!

Novidade no Blogger: levar os Comentários do Google+ para o Blogger. Veja como usar um sistema de comentários unificado entre o Blogger e o Google+.

Para um blogueiro, é muito gratificante ver como as pessoas interagem com seu conteúdo. O desafio, muitas vezes, é acompanhar todos os comentários sobre o conteúdo que você publicou, seja no Google+ ou em seu blog, por exemplo. Hoje estamos tornando as coisas muito mais simples.
Pensando em tornar as coisas mais simples, o Blogger acabou de lançar uma novidade.
Agora é possível usar um único sistema de comentários entre o Blogger e o Google+, unificando as conversas em seu blog com as que acontecem no Google+.

Depois que você ativar os Comentários do Google+, todas as suas postagens do blog que forem discutidas no Google+ aparecerão automaticamente ao lado dos comentários deixados em seu blog, para que você e seus visitantes possam ver toda a conversa em um só lugar.
E tem mais: as pessoas podem compartilhar os comentários que fazem no blog com seus círculos no Google+, ajudando seu blog a alcançar mais pessoas.

Ao ativar o recurso por meio de seu painel do Blogger, você terá diversos benefícios importantes, principalmente pelo fato de que você poderá interagir com mais leitores, tudo em um só lugar.
Os comentários mais antigos continuarão aparecendo.

Veja como começar a usar os Comentários do Google+ no Blogger:

1. Acesse o painel do Blogger
2. Clique no menu “Google+”
3. Marque a opção “Ativar comentários do Google+”.

Fonte: Google Official Blog

Eu já mostrei como colocar o nome do autor do Post Abaixo do Titulo, assim como mostrei como incluir uma Biografia do autor do post no rodapé do artigo. Hoje veremos como incluir uma foto ao lado do nome do autor do post, logo abaixo do título da postagem no blogger.
Este recurso é bem interessante e serve para blogs que possuem apenas um autor, bem como para blogs que possuem diversos autores.
O procedimento é simples, basta seguir todos os passos deste tutorial.
Primeiro teremos que localizar e apagar um trecho de código e em seguida colocar o “Postado por” abaixo do título do post. Vejamos como proceder, a seguir.

1º passo – localizar e apagar código:

Acesse o painel do blogger e vá no menu “modelo >> editar html“. No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F.
Na caixinha de pesquisa, cole o seguinte código:

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                      <span itemprop='name'><data:post.author/></span>
                    </span>
                  </b:if>
                </b:if>
              </span>

Se estiver usando template padrão do blogger Designer de modelo, o código deverá estar da mesma forma que está o código acima.



Caso esteja usando template mínima ou modificado, o código poderá estar assim:

<span class='post-author vcard'> 
<b:if cond='data:top.showAuthor'> 
<data:top.authorLabel/> 
<span class='fn'><data:post.author/> 
</span> 
</b:if> 
</span>

Agora que você localizou o código, APAGUE todo ele.

Se tiver dificuldade para localizar o código inteiro, tente localizar a 1ª linha:

<span class='post-author vcard'>

Pode ser que no seu modelo de template este código seja repetido 2 vezes, portanto, eu recomendo que você localize o código e substitua o código 2 vezes.

2º passo – colocar o nome do autor abaixo do título do post

Agora procure por:

<div class='post-header-line-1'/>

e cole logo abaixo desta linha, o seguinte código:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

3º passo – incluir a foto do autor ao lado do nome:

Agora devemos incluir o código que mostrará a foto e nome do autor do blog.

Procure pela tag:

<span class='post-author vcard'> 

E logo abaixo dela, cole o seguinte código:

<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR&quot;'> 
<span class='author'><a href='LINK-AUTOR'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR'/></a></span>
</b:if> 
</div>

No código acima, no campo para incluir o nome do autor, deve ser escrito de forma exata. Deve estar exatamente igual a que aparece nos posts. Se for incluído de forma diferente, o blogger não reconhecerá o nome e nem a imagem e o código não vai funcionar, portanto, se você usa algum caractere no seu nome de perfil , deverá inclui-lo, não esqueça!

Feito isso, a foto do autor do post vai aparecer ao lado do “postado por” e abaixo do título da postagem.
Obs.: Cuidado com o tamanho da imagem que você vai usar, o ideal é usar uma imagem com no máximo 40px de altura e 40px de largura.

4º passo – aplicar estilos CSS:

Após incluir o código html, você pode incluir estilos através do CSS.
Procure pela tag ]></b:skin>

E acima dela, cole o seguinte código:

.autor-info {margin:10px 0 10px;}
.author img{
padding: 0; float: left; 
border: none; 
margin: 0 10px 10px 0;
width:40px; /* largura da imagem */
height:40px;  /* altura da imagem */ 
border:1px solid #ccc; /* borda */
}
.post-author {
color:#333;   /* cor da fonte */
font-size: 15px;  /* tamanho da fonte */
font-weight: normal;
}
.post-author a {color:#333;   /* cor do link */}

Blogs com mais de um autor:

Repita todo o procedimento do 1º passo (localizar e apagar código).

Agora procure por:

<div class='post-header-line-1'/>

e cole logo abaixo desta linha, o seguinte código:

<span class='post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                   <data:top.authorLabel/>
                     <b:if cond='data:post.authorProfileUrl'>
                       <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
               <b:else/>
<span class='fn'><data:post.author/>
</span>
<span itemprop='name'>
<data:post.author/>
</span>
</b:if>
</b:if>
</span>

Vamos repetir o procedimento do 3º passo, só que neste caso, usaremos um código diferente, já que se trata de blogs com mais de 1 autor.
Iremos incluir o código que mostrará a foto e nome de cada autor do blog.

Procure pela tag:

<span class='post-author vcard'>

E logo abaixo dela, cole o seguinte código:

<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR1&quot;'> 
<span class='author'><a href='LINK-AUTOR1'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR1'/></a></span>
</b:if> 
</div>
<div class='autor-info'>
<b:if cond='data:post.author == &quot;AUTOR2&quot;'> 
<span class='author'><a href='LINK-AUTOR2'><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR2'/></a></span>
</b:if> 
</div>

Se você tiver número maior que 2 autores, você pode repetir o 1º bloco de código, para cada autor que quiser adicionar.
Feito isso, repita todo o procedimento do 4º passo (incluir código CSS).

A equipe do Blogger fez algumas alterações na estrutura e na organização do código fonte, melhorando completamente o editor HTML.
Quem tentou editar o html do template no dia de hoje deve ter se deparado com mudanças no editor HTML do blogger.
Dentre as mudanças verificamos algumas melhorias como a numeração de linha e destaque de sintaxe, tornando a edição HTML do seu modelo muito mais fácil.
A opção “Expandir modelos de widgets”, no novo modelo de editor HTML não é mais necessária.

No painel do Blogger, clique no menu “Modelo”, em seguida, clique no botão “Editar HTML”, para ver o novo modelo de editor HTML:

Os botões agora aparecem no topo e ficaram mais destacados:



Ficou mais fácil fazer uma pesquisa de texto, para localizar algum trecho específico. Se você clicar em qualquer parte do editor HTML e em seguida pressionar as teclas “Ctrl + F”, abrirá uma caixinha de pesquisa dentro do próprio editor HTML do Blogger.

Para os usuários que preferem fazer alterações no seu template, através do editor HTML, vão perceber que ficou mais fácil realizar edições.
É importante lembrar que o Blogger usa tags personalizadas e antes de começar a mexer na estrutura HTMl do seu blog, é importante estar familiarizado e conhecer Os Elementos de Página do Blogger.

Conhecendo a função de cada botão no novo editor html:

1. Voltar: fecha a tela do editor e retorna para o menu “modelo”.
2. Salvar Modelo: botão para salvar as modificações realizadas.
3. Ir para um widget: Usado para localizar um determinado widget rapidamente. Ele abre uma lista com todos os gadgets/widgets que estão instalados no seu blog.


4. Editar modelo: quando selecionado ele exibe todo o código fonte do seu blog.
5. Visualizar modelo: com este botão você visualiza as modificações que está realizando, antes de salva-las. Essa função é muito importante, pois é sempre bom visualizar as modificações antes de salvar o modelo, desta forma, se algo não tiver dado certo, você não irá salvar as modificações.
6. Formatar modelo: se você clicar neste botão e em seguida usar as teclas “Ctrl+f” abrirá a caixa de pesquisa do próprio editor, que serve para localizar tags, trechos de códigos dentro do HTML do seu template.


7. Reverter alterações: com esse botão é possível limpár todas as modificações que você realizou enquanto não tiver salvado nada, ou seja, enquanto estiver apenas no modo de “visualização”.
8. Reverter modelos de widgets para o padrão: ao clicar neste botão, você estará restaurando um modelo de template padrão do blogger, ou seja, seu template será automaticamente trocado por um template padrão do Blogger, e vai perder todas as alterações que tenha feito anteriormente.

Como localizar o Código CSS no novo editor:

Na coluna de numeração das linhas, em algumas partes você notará que aparecem um simbolo (como uma setinha preta).
Se você clicar neste simbolo verá que tem a opção de expandir/esconder determinados trechos de códigos.



Geralmente quando vamos fazer alguma alteração ou inclusão de código CSS, orientamos sempre a localizar a tag </b:skin>

Se você usar o botão “Formatar Modelo” e as teclas “ctrl+F” e colocar a tag </b:skin> dentro da caixinha de pesquisa (conforme já explicado no tópico anterior), vai conseguir localizar a linha exata onde a tag está, e verá que aparece a setinha preta, basta clicar nela que expandirá todo o código CSS existente no seu template.
Tudo o que tiver acima desta tag </b:skin> diz respeito ao trecho CSS do seu template, ou seja, o código CSS fica entre as tags <b:skin> e </b:skin>

Bom é isso.
O que acharam destas mudanças? Deixe sua opinião nos comentários.

Diferente da fixidez dos sites, de conteúdo geralmente oficial e isolado (não priorizam a construção de redes de comunicação), os blogs são espaços virtuais nos quais a interação é fundamental. Desde sempre foram feitos para serem lidos e comentados, para que comunidades se organizassem ao redor de determinados temas e fossem geridas a partir do interesse de uma coletividade interessada por eles.

Faça aliados, ao invés de concorrentes

Como estamos falando aqui numa comunidade, para se destacar na blogosfera é necessário entrar em ação e conhecer seus vizinhos para poder conquistar a “simpatia” deles. É fundamental descobrir quem são seus vizinhos mais relevantes. Quero dizer: quais blogs que tratam sobre tema semelhante ao seu e se destacam mais? Que diferencial apresentam?


Descoberto o que funciona no nicho da blogosfera em que pretende entrar, procure produzir conteúdo de qualidade, relevante, dentro do que observa ser tendência. Ofereça algo que as pessoas se interessem em ler e saber. O passo seguinte, e talvez mais importante, é ser visto. De que adianta tanto esmero se não há público para apreciá-lo? E é aí que você começa de fato a conviver com sua comunidade. Como? Interaja com ela!


Como dissemos, blogs foram feitos para serem comentados e cabe a você, na condição de “novo vizinho”, apresentar-se e esforçar-se em participar da comunidade, comentando em outros blogs do seu nicho. Para adquirir mais visibilidade, insira seu blog em redes sociais: para começar, faça um perfil no Twitter e outro no Facebook (as duas redes mais populares), e procure por lá pelos canais dos blogs vizinhos de tema. Curta e compartilhe posts interessantes, retweet informações relevantes, faça-se presente.


Além de tornar seu blog mais visível na blogosfera, as mídias sociais de relacionamento também ajudam a aumentar sua audiência, aspecto fundamental para agregar valor ao seu blog na comunidade e razão pela qual você certamente criou o blog: para ser lido!


E se você pudesse ter o link do seu blog em vizinhos relevantes? O trabalho de formiguinha de fazer-se ver pode ser agilizado com algumas estratégias, uma delas é o guest post. Muitos blogs abrem espaço para que escritores convidados (daí o nome guest post) publiquem.


Este é outro fator que torna a qualidade do seu conteúdo fundamental, afinal, mostrar que é capaz de produzir textos interessantes pode ser o primeiro passo de convencimento para ser um escritor convidado num blog relevante e ter seu trabalho divulgado por lá.

Parcerias também valem, porém…

E se você já tem uma audiência razoável, pode também oferecer a blogs de relevância semelhante à sua uma parceria de divulgação com exibição de link do parceiro na home, por exemplo, mas sempre lembrando que é bom que esses links sejam “nofollow”. Isso ajudará ambos a ampliarem seus canais de divulgação na internet ao disseminar na rede seus links.


Outra estratégia importante é ao cadastro em diretórios de blogs e associações. Com uma pesquisa rápida em sites de busca você encontra diretórios onde pode cadastrar seu blog e que ajudam a aumentar sua presença online. Alguns nichos temáticos são mais organizados e possuem associações que listam e ajudam a divulgar os blogs mais relevantes sobre determinado o tema, além de promover espaços de comunicação entre os blogueiros que ajudam a promover parcerias produtivas. Vale à pena conferir se isto se aplica a seu caso.


No mais, lembre-se sempre de otimizar os conteúdos que produz com as palavras-chave que melhor o identificam para facilitar a visibilidade de seu blog nos buscadores e também não esqueça de interagir sempre: o segredo do sucesso em toda comunidade é o bom convívio.


Esse artigo é um guest post escrito por Guilherme Coutto.

Quer ter seu artigo publicado aqui no Mundo Blogger?
Veja como: Publique seu artigo no Mundo Blogger

Hoje você vai aprender como conetar seu blog a uma conta do Bit.ly e com isso disponibilizar um link encurtado automaticamente no final de cada postagem, e você ainda terá a possibilidade de verificar a performance dos seus artigos divulgados, analisando o número de cliques e interações que eles recebem.

A implementação do código para encurtar o link dos seus posts no Blogger usando o bit.ly é bem fácil e simples, basta seguir o seguintes passos.


1. Antes de mais nada, acesse o site bitly.com e clique no botão “Join now. It’s free!” e crie sua conta gratuitamente.
Você pode se conectar através da sua conta do facebook ou do twitter.

2. Agora acesse o painel do blogger e clique no menu “modelo“, clique em “editar html” e marque a opção “expandir modelos de widgets“.

3. Procure pela tag </head> e cole esse código ACIMA dela:

Se tiver dificuldades para visualizar o código, pode copia-lo através deste link:
https://gist.github.com/mundoblogger/5341879


Substitua bitly API Key por sua Bitly API Key e bitly Username pelo seu nome de usuário no Bitly.

Para encontrar sua API Key no bitly, acesse a página do bit.ly e faça login no site.
Em seguida você pode visitar esta página enquanto estiver conectado ao site Bitly:
http://bitly.com/a/your_api_key



4. Agora que você instalou o código js no seu template, você deverá incluir a linha de código html no local onde você deseja que a caixinha com a Url encurtada apareça.
A escolha do local, vai do seu gosto e depende muito do seu template.
Dica: Pode ser abaixo do título da postagem(post-header-line-1), ou na linha do rodapé (post-footer), veja neste post as opções de locais para você escolher: Escolhendo o local para instalar elementos na área dos artigos.

Eu particularmente recomendo que instale na linha do rodapé do post.

Procure por

<div class='post-footer'>

e cole o seguinte código logo APÓS a tag que você acabou de localizar:

<b:if cond='data:blog.pageType == "item"'><form id='shorturl'/></b:if>

Depois é só salvar e verificar como ficou.