Dicas para Blogs

Dicas para Blogs mais Compartilhadas nas Redes Sociais

2012-05-22T10:52:00.003-03:00

Fazer uma lista com as melhores dicas e tutoriais para ajudar para blogueiros na criação e desenvolvimento de seus blogs é uma tarefa complicada e justamente por isso vamos deixar que nossos visitantes digam quais são os melhores posts do Dicas para Blogs. Para fazer isso estamos usando um código que já mostramos no tutorial: Mostrar Lista de Postagens mais Compartilhadas em Redes Sociais. Ou seja, a lista abaixo são as 20 dicas para blogs mais recomendadas pelos nossos visitantes recentemente. Mas se quiser você pode ver aqui uma lista com nossas publicações mais recentes: Novas dicas para blogs.

Dicas e tutoriais para blogs mais compartilhados nas redes sociais recentemente:

Modificar Cores e Fazer Formatação no Gadget Postagens Populares

2012-05-19T10:56:00.000-03:00

Vamos formatar o gadget de posts populares do blogspot e transformar seus links em botões usando códigos CSS para formatar o texto, colocar cor ou imagem de fundo e criar bordas em diversos estilos. Vamos mostrar como fazer isso com o Gadget Postagens Populares do Blog, mas pode ser utilizado para formatar qualquer gadget do blog.

Então vamos colocar os códigos para formatar o texto e links desse widget do blogger. Entre na pagina editar HTML procure por ]]></b:skin> e coloque esse trecho antes dele:

#PopularPosts1 .widget-content, #PopularPosts1 ul{padding: 0px;margin: 0px;}
#PopularPosts1 .item-content{ border: solid 1px #000;color: #333;font-size: 12pt;margin-bottom:5px;padding: 2px;}
#PopularPosts1 a {color: #ff0000;}
#PopularPosts1 a:hover { color: #333;text-decoration: underline;}
#PopularPosts1 img{padding:0px;border: 1px dotted #000;}

Agora veja como personalizar cada parte do layout do gadget:

#PopularPosts1 .item-content - é cada item do gadget postagens populares ou seja você pode usar para colocar uma borda ou cor de fundo em cada item do gadget e também alterar os estilos de fontes

#PopularPosts1 a - aparência do texto do link, neste trecho você pode colocar uma cor e tamanho de fonte diferente somente no titulo da postagem que aparece no gadget de posts populares.

#PopularPosts1 a:hover - essa é a aparência do link quando o mouse está sobre ele. Recomendamos somente escolher uma cor e não alterar tamanho da letra nem colocar bordas senão seu blog ficará dando um "pulo" quando passa o mouse sobre o link devido ao titulo quando muda o tamanho da letra ocupar mais espaço.

#PopularPosts1 img - Aqui podemos colocar uma borda na imagem em miniatura que aparece no gadget, mas se não quiser borda então nem precisa colocar essa linha ou usar o código border:none; dentro das chaves deste código.

Tudo que falamos neste tutorial é feito com estilos CSS então veja aqui alguns tutoriais com dicas sobre CSS para ajudar a personalizar o seu blog:
Como Formatar o Texto do Blog
Colocar ou alterar as bordas
Diferença entre Margin e Padding - Alterar Template
Alterar cores dos links - CSS

Como já falamos no inicio esse tutorial serve para qualquer tipo de gadget basta usar o nome de estilo correto (#PopularPosts) para fazer uma formatação especial nos gadgets do seu blog, por exemplo para personalizar os marcadores do blog você deve usar o estilo #Label1 (veja como Personalizar gadgets do Blog). Claro que isso funciona com textos e imagens e cada tipo de acessórios têm algumas diferenças próprias devido ao padrão de layout do seu template e do blogger.

Usar esse tutorial não impede que você mostre somente os titulos dos posts com ou sem as imagens e resumos. O código apenas faz a formatação do que aparece na sua pagina portanto ele não altera em nada o modo de configurar esse acessorio para mostrar as postagens mais visitadas do blog.

Personalizar Gadget Postagens Populares do Blog - Barras Coloridas

2012-05-17T12:23:00.000-03:00

Mostrar os melhores posts do seu blog você pode usar o gadget de postagens populares como já falamos em outro tutorial sobre mostrar posts mais visitados, mas é possível fazer barras coloridas com o gadget de postagens populares e assim chamar mais atenção dos seus visitantes para esses posts que receberam mais visitas. Veja também outro tutorial sobre Modificar Cores e Fazer Formatação no Gadget Postagens Populares, ele é mais facil de utilizar e permite modificar completamente a aparência do gadget.

Para personalizar e colorir o gadget de postagens populares do seu blog o primeiro passo é adicionar esse gadget e escolher a opção para mostrar as 7 postagens mais visitadas, além disso, deixar marcadas as opções: miniatura de imagem e snippet. Falamos em 7 porque o código é feito para esse numero de barras coloridas.

Depois que adicionar o gadget entre na pagina modelo e faça um backup do seu template, assim não correrá o risco de estragar o seu layout caso tenha algum erro no HTML. Clique para editar HTML, marque a opção expandir modelos de widgets e procure por:
/* Variable definitions
====================

Logo abaixo dessa linha cole esse código:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

Agora procure por ]]></b:skin> e cole antes dele esse outro código:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Depois vamos substituir o código do gadget posts populares do blogger, ache o trecho:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
...
...
até a linha:</b:widget>

É um trecho longo de HTML por isso não o colocamos completo aqui, mas são aproximadamente 58 linhas de código que você deve apagar e colocar esse outro no lugar:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Clique para visualizar o blog, depois salvar as alterações no seu HTML e está tudo pronto. Para modificar as cores das barras das postagens populares você deve entrar na pagina modelo e clicar no botão personalizar, entre nas configurações avançadas e poderá alterar as cores usando o painel design do modelo dos novos templates.

Veja também:
Nuvem de Tags Coloridas - Modificar Cores dos Marcadores
Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos
Paginas Dinâmicas do Blogger com Menu de Gadgets Flutuantes

Quando terminar de instalar e testar o código poderia configurar o gadget de postagens mais visitadas como quiser para mostrar os posts com mais visitas na ultima semana, últimos 30 dias ou tudo. Esperamos que gostem dessa sugestão para modificar o layout deste gadget e deixem suas sugestões ou duvidas sobre esse e outros assuntos em nossos comentários.

Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

2012-05-14T13:30:00.003-03:00

Achar códigos no blogger pode ser um desafio, mas existem ferramentas que ajudam a encontrar os problemas do código HTML ou qualquer outro tipo de código sejam imagens, vídeos, player de musica, enfim descobrir qual é o código de cada parte do site. Já mostramos anteriormente como Achar e Resolver Problemas com Códigos HTML no Blog usando uma ferramenta do Google Chrome então hoje vamos mostrar outra opção para ajudar a resolver os problemas com códigos no seu blog.

Recomendamos que vejam também:
Erros e Duvidas Comuns sobre Blog - Ajuda para Blogueiros
Erros no Blogger - Códigos Duplicados

Vamos falar sobre o Inspecionar elementos do Firefox que é simples de utilizar. Você só precisa entrar na pagina do seu blog clicar com o botão direito do mouse e escolher a opção inspecionar de elemento.

Veja na barra no final da pagina tem o botão Inspecionar então clique nele e depois passe o mouse sobre a sua pagina então você verá que o mouse seleciona automaticamente trechos do seu blog então clique em alguma parte do seu blog pode ser uma imagem, link ou qualquer outra coisa.

No outro canto dessa barra do Firefox aparecem 3 opções: visualização 3D, HTML e Estilos que usaremos para fazer testes e encontrar os códigos. O botão HTML mostra o código do trecho selecionado da sua pagina e o botão estilos mostra o código CSS, mas essa opção é interessante porque você pode desativar qualquer formatação dos estilos CSS para testar como fica no seu blog e ver a mudança na hora. Por exemplo, na imagem abaixo quando nós desmarcamos a opção de formatação do título das postagens: h1 {font-size: 16pt;}

Mais algumas dicas para resolver problemas do seu blog:
Como usar e o que é Redirecionamento de Pagina (url) do Blogger
Encontrar e Corrigir Links Quebrados no Blogger e no WordPress
Resolver Problemas de Atualizações do Blog por Email ou Listas de Blogs

Esse acessório do Firefox é bem útil para desenvolvedores de sites e blogueiros e achamos que isso pode ajudar a resolver varias duvidas sobre códigos do blogger. Mas é claro isso só vai testar e encontrar os códigos se quiser fazer alguma alteração terá que entrar na pagina editar HTML do blogger como sempre faz. Essas alterações de estilos que falamos aqui são somente testes e não altera em nada o seu blog.

Como Diminuir o Tempo de Carregamento e Otimizar Blogs/Sites

2012-05-12T13:15:00.001-03:00

Existem varias técnicas para fazer o blog carregar mais depressa e com isso reduzir o tempo de espera dos visitantes para entrar realmente no seu blog ou site. É importante achar maneiras de diminuir o tempo de carregamento do seu site ou blog para conseguir mais visitas e até melhorar sua posição nos resultados do Google. Veja aqui como verificar a velocidade do seu blog usando o Contador Google Analytics ou então você pode usar o Pindom para analisar sua pagina como mostramos no tutorial:Verificar Velocidade do seu Blog.

Mas como melhorar a velocidade do blog e fazer carregar mais depressa? A resposta desta pergunta se divide em muitas partes e como quase tudo na verdade são muitos pequenos detalhes que fazem uma grande diferença no final, então vamos ver algumas dicas para melhorar o desempenho da sua pagina na internet.

Usar o Fazer Resumo da Postagem isso ajuda bastante permitindo você mostrar apenas um trecho de cada posts na pagina inicial do seu blog e assim ganhando tempo na hora de aparecer o seu blog.

Otimizar Imagens e Fotos: Esse é um ponto muito importante existem muitas formas de salvar suas imagens então tente escolher a que for mais leve (menos KB). E muito cuidado com gifs animados porque eles demoram muito para carregar. O mesmo vale para os vídeos do Youtube, Vimeo ou qualquer outro lugar, nós até já mostramos como Colocar Vários Vídeos do Youtube no Site ou Blog. Mas não estamos dizendo para não utilizar vídeos nem imagens no seu blog estamos dizendo apenas que não exagere.

Gadgets, Widgets e Acessórios mais úteis para Blog: Já falamos algumas vezes sobre esse tema, mas sempre é bom repetir. Verifiquem no seu blog quais são os gadgets que interessam aos seus visitantes, por exemplo, se o seu blog não é sobre um cantor ou grupo musical ele não precisa de musica no blog e talvez quem entre no blog nem goste da mesma musica que você.

Nem todos prestam a devida atenção sobre o tempo que a pagina leva para carregar e alguns acham isso bobagem, mas lembre-se que nem todos têm a mesma velocidade de internet que você. Outra coisa importante é que sites de busca consideram cada vez mais a satisfação dos visitantes com os sites que aparecem nos resultados (Mudanças nos Resultados das Buscas do Google), portanto quando mais rápido suas paginas aparecem mais chances das pessoas permanecerem no seu site afinal ninguém vão passar minutos esperando um site aparecer ou até em casos extremos causar o travamento do navegador. E você se preocupa com a velocidade do seu blog? Deixa sua opinião ou alguma sugestão que poderíamos dar para ajudar outros blogueiros a melhorar o desempenho dos blogs.

Nuvem de Tags Coloridas - Modificar Cores dos Marcadores

2012-05-10T09:13:00.001-03:00

Personalizar os marcadores do blogger pode ajudar a melhorar a aparência do seu blog. Você pode trocar as cores e tamanho das fontes dos marcadores do blogspot apenas com algumas linhas de código CSS na sua pagina editar HTML e assim fazer a formatação de texto das categorias do seu blog.

Para usar esse tutorial e personalizar os marcadores do seu blog você precisa usar os marcadores em forma de nuvem de tags (could), portanto antes de começar verifique isso no seu blog. Mas se quiser personalizar a lista de links dos marcadores veja esse tutorial sobre: Personalizar gadgets do Blog.

Agora entre na pagina modelo > editar HTML, procure por ]]> e cole esse código antes dele:

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;}
#Label1 .cloud-label-widget-content span {display: inline-table;line-height: 1.2;padding:0 0 0 10px;vertical-align: middle;}
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}
#Label1 .label-size-2 a {color:#FFC125;font-size:14px;}
#Label1 .label-size-2 a:hover {color:#000;}
#Label1 .label-size-3 a {color:#00008B;font-size:16px;}
#Label1 .label-size-3 a:hover {color:#000;}
#Label1 .label-size-4 a {color:#228B22;font-size:18px;
#Label1 .label-size-4 a:hover {color:#000;}
#Label1 .label-size-5 a {color:#514762;font-size:20px;}
#Label1 .label-size-5 a:hover {color:#000;}

Veja que o trecho se repete varias vezes apenas alterando size-1 para size-2, size-3 e assim por diante:
#Label1 .label-size-1 a {color:#8B1A1A;font-size:13px;}
#Label1 .label-size-1 a:hover {color:#000;}

Isso é a formatação dos links de cada tamanho de link da sua nuvem de tags, mas essa numeração é feita com relação à importância do link ou seja o marcador com estilo size-1 é maior (tem mais postagens) que size-2. E você pode trocar o tamanho de cada um deles alterando o valor que está em font-size:13px; e a cor em color:#8B1A1A;.

As linhas que tem a:hover são as cores do link quando o mouse está sobre ele e você pode alterar da mesma forma, veja aqui o código das corese também sobre alterar cores dos links.

Essa é uma modificação bem fácil de fazer no seu template e pode ser bem interessante para dar mais destaque aos marcadores do seu blog.

Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

2012-05-07T14:54:00.000-03:00

Fazer a barra de navegação no blogger é uma forma interessante de mostrar onde o visitante está no seu site. Estamos falando daquele tipo de menu mostrando inicio > nome do marcador > titulo da postagem. Isso pode ajudar a diminuir a sua taxa de rejeição fazendo os visitantes permanecerem mais tempo na sua pagina já que mostra links dos marcadores no menu de navegação que alguns sites chamam de Gadget Breadcrumb. Caso esteja procurando aqueles barras com ferramentas com botão curtir, retweet e outros que alguns blogs mostram no rodapé da pagina veja neste link: Criar barra com acessórios no blog.

Caso tenha ficado interessado em colocar musicas do blog aqui está o link do tutorial da imagem que usamos como exemplo:Colocar Várias Músicas no Blog - Como Criar Playlist.

Mas para colocar essa ferramenta de navegação no seu blog primeiro sugerimos que faça um backup do seu template já que vamos mexer no código HTML. Agora entre na pagina modelo > editar HTML, marque a opção expandir modelos de widgets.

Procure esse código HTML no seu blogger:
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Apague o código, coloque esse outro no lugar e salve as alterações:

<div id='breadcrumbs'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>Você está em:
<a expr:href='data:blog.homepageUrl' rel='tag'>
Início</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>»
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
»
<span class='post-title entry-title'>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>Você está em:
<a expr:href='data:blog.homepageUrl'>
Início</a> » Posts da Categoria: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</div>
</b:if>
</b:if>
</div>

E já está pronto agora seu blogspot tem um menu de navegação interna do site, mas ainda podemos melhorar e personalizar esse menu usando alguns códigos de formatação de texto.

Então continuamos na pagina editar HTML, mas desta vez vamos procurar por ]]></b:skin> e colocar antes dele:

.breadcrumbs {background-color: #FFC;border: 1px dashed #000;margin: 5px;padding: 3px;}

Veja aqui algumas dicas para formatar e destacar o texto da barra de navegação do seu blogspot:
Diferença entre Margin e Padding - Alterar Template
Código das Cores
Colocar ou alterar as bordas

Além disso, você pode notar no código os textos: Você está em, Início, Posts da Categoria, Arquivos de (que se refere ao mês da postagem). Então você pode modificar esses textos como desejar, mas tenha cuidado para não apagar nada além destes textos porque todo o restante faz parte do código e não deve ser modificado. Sugerimos primeiro testar o código como publicamos aqui neste tutorial e somente depois começar fazer outras modificações nele.

Achamos bem interessante esse código do widget de navegação (breadcrumbs) e nos testes que fizemos (7/05/2012) funcionou perfeitamente nos navegadores Firefox, Internet Explorer e Google Chrome. Aproveite e veja aqui como Criar barra de ferramentas do seu blog para esses navegadores. Esperamos que gostem e que esse acessório ajude seu blog a conseguir mais pageviews e conquistar mais visitantes fazendo com que as pessoas conheçam mais paginas do seu blog. Abraços a todos e boa semana!

Gadgets e Acessórios para os Templates Dinâmicos do Blogger

2012-05-06T11:59:00.000-03:00

Colocar gadgets nas paginas dinâmicas do blogger é fácil, mas nem todos os acessórios estão disponíveis para os templates dinâmicos do blogspot. Mas é fácil saber quais acessórios podem ser usados nesses novos modelos de templates do blogger (veja Menu de Gadgets Flutuantes nas Visualizações Dinâmicas), por exemplo, colocar widgets com: lista de inscrição (assinar feed), marcadores, lista de links ou blogs, tradutor do Google, botões +1 e seguir no Google+ e outros.

Entre na pagina layout, clique para adicionar um gadget e veja que aparece em destaque o texto: Disponível para Visualizações dinâmicas Adicionar em alguns gadgets desta forma é fácil saber quais pode usar nas paginas dinâmicas. Infelizmente ainda não é permitido editar diretamente esse tipo de template, mas já mostramos como troca a imagem de fundo ou tipo de fonte no tutorial: Personalizar Templates Dinâmicos do Blogger.

Um dos gadgets que funciona em qualquer tipo de template do blogger é o tradutor do Google no blog. Esse gadget é muito fácil de instalar nem precisa configurar nada só escolher o melhor lugar para colocar a ferramenta de tradução para blogs no seu layout.

Veja mais algumas dicas sobre as paginas dinâmicas do blogger:
Colocar Gadgets no Blog para Google Plus: Botão +1 e Seguir Pagina
Novos Templates para Blogger: Como Usar Páginas Dinâmicas
Designer de modelo - Layout e Configurações Avançadas

Essas visualizações dinâmicas do blogger ainda têm poucos recursos para modificar o layout e opções de acessórios por isso achamos que é melhor não usar como template padrão do seu blog, mas pode ser interessante fazer uma postagem mostrando essas paginas e dando como opções para os visitantes.

12 Dicas para Modificar Blogs: Gadgets, Redes Sociais, Criar Banners

2012-05-03T15:27:00.001-03:00

Veja uma lista com 12 dicas para ajudar a resolver problemas com seu blog. Esses tutoriais têm sugestões sobre o que modificar no seu blog, como colocar acessórios, conseguir mais divulgação em redes sociais, ter mais visitas, dicas sobre fazer banners online, como melhorar sua posição nos resultados do Google, como avaliar o seu blog e muito mais.

Site para Fazer Imagens Online e Criar Banners com Efeitos: Mais uma opção de site para criar imagens e banner online. Além de mostrar um site ainda damos algumas dicas de outros sites para edição de imagens online.

Configurar Tags de cabeçalho de robôs personalizadas no Blogger: As mudanças no Blogger para melhorar a indexação dos blogs mexeu bastante com a posição de muitos blogs nos resultados do Google, então sempre vale a pena rever suas configurações e pensar onde pode melhorar.

Como Fazer Avaliação de Blogs: Entender Estatísticas e Resultados: Você aproveita os recursos e informações do seu contador de visitas? Embora a função principal seja contar visitas existem muitas informações que pode ajudar a melhorar nosso blog nas estatísticas do contador de visitas.

Para que Serve um Blog? Afinal o que é um Blog e Qual a sua Utilidade: Qual o motivo que levou você a criar um blog? Veja uma enquete sobre esse assunto e a opinião das pessoas sobre ter um blog.

Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress: O Pinterest é uma rede social que compartilha imagens, então pode ser muito útil para o seu blog divulgar as imagens do seu nele e assim conseguir mais visitas.

Colocar Favicon no Tumblr: Personalizar Imagem na Barra de Endereço: Trocar a imagem na barra de endereço do blogger é bem simples, mas também é possível fazer isso nos blogs do Tumblr apenas com uma linha de código.

Colocar Botões de Compartilhamento em Forma de Coração no Blog>: Usar o gadget com botões de compartilhamento com imagem de coração pode ajudar a chamar atenção e talvez conseguir que mais pessoas divulguem seu blog nas redes sociais

Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos: Muitos blogueiros usam o LinkWithin para mostrar assuntos relacionados, mas é possível modificar a aparência dele trocando as cores de fundo ou o texto que aparece.

Colocar Gadgets no Blog para Google Plus: Botão +1 e Seguir Pagina: O botão +1 e seguir no Google Plus agora pode ser colocados no blog pela pagina layout sem precisar mexer com códigos, pois foram criados gadgets do blogger para isso.

Como Excluir um Blog e Como Recuperar um Blog Excluído>: Muitas vezes queremos excluir um blog e depois nos arrependemos, então veja como é simples apagar e recuperar seu blog, mas é claro se excluiu o blog há pouco tempo por que depois de 90 dias ele é apagado permanentemente.

Botão Compartilhar do Google: Mais Opções de Botões do Google+: O Google+ lançou um botão muito parecido com o curtir do facebook que é o botão compartilhar do Google+. Embora a mudança seja somente na aparência do botão talvez dê melhores resultados mostrar o botão compartilhar do que o +1.

Dia do Trabalho: Frases sobre Trabalhar na Internet e Blogueiros: Ter um blog passou de um hobby para um trabalho. Atualmente cada vez mais pessoas trabalham em casa criando seus blogs e sites.

Mostrar Lista de Postagens mais Compartilhadas em Redes Sociais

2012-05-01T14:14:00.003-03:00

Veja como fazer uma lista com as postagens do seu blog mais compartilhadas nas redes sociais. Essa é uma maneira de criar uma lista com as pessoas que seus visitantes mais gostaram e divulgaram no Twitter, Facebook, Google+ ou qualquer outra rede social utilizando os botões de compartilhamento (Botões das Redes Sociais).

Para colocar esse gadget com as postagens mais recomendadas você precisa usar os botões do addthis no seu blog e precisa se cadastrar no site e usar o seu código para acompanhar as estatísticas dos botões de compartilhamento como falamos em nosso tutorial sobre estatísticas botões de compartilhamento das redes sociais . Mas não se preocupe tudo isso é um serviço grátis feito pelo site.

Entre na pagina Configure Your Feed e marque a opção Enable Public Feed, depois caso usar o código em mais de um site selecione o site que deseja criar a lista de posts mais recomendados no menu jump depois de domian.

Selecione qual será o critério da sua lista (Feed to Display)

Trending Content: tendências, conteúdo que está crescendo em popularidade.
Most Shared: postagens mais compartilhadas
Most Clicked: postagens que receberam mais cliques depois de compartilhadas.

Agora faça suas opções por período de avaliação (Time Period): Last Month (ultimo mês), Last Week (ultima semana), Last Day (ultimo dia). Após fazer essas escolhas clique no botão gererate Feed. Você verá a lista das postagens criada pelo site e o RSS dessas postagens é justamente esse endereço que vamos utilizar.

Copie o endereço que apareceu no RSS (feed), agora entre na pagina layout do seu blog, clique em adicionar gadget e escolha a opção Feed. Cole a url do RSS no campo URL do feed, clique em continuar. Escolha a quantidade de itens, troque o titulo desse gadget, clique para salvar e pronto. Seu blog já tem uma lista de postagens mais compartilhadas nas redes sociais. Caso tenha duvidas sobre isso veja nossa postagem sobre Usar Feed como Acessórios onde mostramos a configuração do gadget de feed no blogger.

Achamos interessante esse acessório para o blogger porque é uma lista de postagens que as pessoas recomendaram, ou seja, seus próprios visitantes dizendo o que seu blog tem de melhor e vale a pena ser compartilhado entre seus amigos, veja também: Quais os Melhores Assuntos para Blogs: o que Faz mais Sucesso.

Fizemos esse tutorial para responder uma duvida de um leitor em um dos comentários do nosso blog perguntando sobre nossa lista de dicas recomendadas, então aqui está a resposta e obrigado pela sugestão. Esperamos que gostem dessa dica para ajudar seu blog e tenham bons resultados e sucesso na blogosfera.

Dia do Trabalho: Frases sobre Trabalhar na Internet e Blogueiros

2012-04-30T13:42:00.001-03:00

Talvez pareça estranho falar em dia do trabalho e blogueiros no mesmo texto, porém cada vez mais pessoas transformam seus blogs em trabalho serio e conseguem viver somente do dinheiro que ganham na internet, afinal seu blog é uma micro empresa. Então por isso vou deixar algumas frases sobre o dia do trabalho e alguns comentários relacionando isso com os blogueiros

O único lugar onde o sucesso vem antes do trabalho é no dicionário - Albert Einstein. E completando essa idéia para os blogueiros: A internet não é uma rede de computadores, é uma rede de pessoas.

Muita gente pergunta ou pesquisa como ter sucesso na internet como se fosse uma questão de outro mundo ou algum grande segredo, mas na verdade o segredo do sucesso é o mesmo do que em qualquer outra profissão: trabalho, dedicação e persistência. Não sei de quem é a frase que citei a cima dizendo que a internet é uma rede de pessoas. Eu ouvi numa entrevista do Marcelo Tas do CQC e até publiquei o vídeo no tutorial onde falamos sobre: Proteja suas Contas, Senhas, Fotos na Internet - Evite Erros Comuns.

Escolhe um trabalho de que gostes, e não terás que trabalhar nem um dia na tua vida - Confúcio
Isso deve servir de base na escolha de qual o tema do seu blog não vale à pena escolher criar um blog sobre futebol se você não gostar de futebol, porque depois que passarem alguns meses você não aguentará mais o assunto e começará fazer tudo de qualquer jeito ou abandonará o blog. Leia mais em: Quais os Melhores Assuntos para Blogs: o que Faz mais Sucesso.

Frases de Motivação para a Vida e o Trabalho

Quantas coisas perdemos por medo de perder
Quando tiver alguma idéia deve tentar fazer que dê certo não fique apenas analisando e imaginando. Lembre-se que na pior das hipóteses você ganhou experiência. Mas é claro tenha bom senso não estou dizendo para correr atrás de todas as idéias que tiver, mas apenas reserve algumas horas por semana para fazer experiências e testes com suas idéias e provavelmente conseguirá sucesso com alguma delas.

Veja outros dicas sobre fazer testes e analisar resultados:
Você Acompanha as Estatísticas de Visitas e Ganhos do Blog?
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

E você o que achou dessas frases e idéias sobre blogueiros e o dia do trabalhador? Quais outras mensagens ou experiências você tem para ajudar a incentivar e motivar as pessoas que sonham ou já trabalham na internet?

Botão Compartilhar do Google: Mais Opções de Botões do Google+

2012-04-27T15:39:00.001-03:00

O Google+ lançou uma nova opção de botão de compartilhamento além do botão +1 agora tem o botão compartilhar do Google para usar no seu blog. Basicamente o que mudou foi o visual do novo botão do Google usando a palavra Compartilhar (português) ou Share (inglês), mas o funcionamento continua igual ao Botão +1, ou seja, divulgar seu blog e posts na rede social Google Plus. Se você achar melhor pode usar o Gadget com o Botão +1 do Blogger.

Para colocar esse botão compartilhar do Google no seu blog você só precisa configurar o estilo do botão na pagina de desenvolvedores do Google: Share - Google+, lá você encontra algumas opções de formato do botão compartilhar do Google+ então é só escolher um delas e colocar o código no seu blog entrando na pagina Layout > Adicionar Gadget > HTML/Javascript e colar o código.

Mas se você já usa o botão do +1 do Google no seu blog você pode trocar somente a primeira linha do código e não precisa alterar o restante. Ou seja, trocar a linha: <g:plusone></g:plusone> por:

<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>.

Claro que isso varia conforme a configuração que já tinha no botão do Google e a nova configuração que escolher. Clique no botão abaixo para ver o funcionamento do novo botão do Google e aproveite para compartilhar nossas dicas entre seus amigos do Google Plus.

Veja outras dicas úteis sobre usar as redes sociais para divulgar seu blog:
Botão para Redes Sociais no Wordpress, Blogger, Firefox e muito mais
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
Colocar Botões de Compartilhamento em Forma de Coração no Blog

Como já dissemos no inicio do tutorial o que mudou foi somente a aparência do botão então você deve ver qual dos estilos do botão combina mais com seu template e boa sorte com seu blog nas redes sociais. E o que você achou dessa mudança do botão do Google+ ou quais outros tipos de botões de compartilhamento gosta mais e acha que dão melhores resultados no seu blog?

Como Excluir um Blog e Como Recuperar um Blog Excluído

2012-04-25T16:19:00.002-03:00

Apagar um blog ou ter de volta um blog que excluiu por engano é fácil de fazer. Você só precisa entrar nas paginas certas do novo painel do blogger e poderá excluir ou recuperar seus blogs em alguns segundos. Caso o seu problema seja senha roubada ou não conseguir fazer login vamos mostrar também o link para recuperar o acesso a sua conta Google, mas recomendamos que assim que possível veja como Aumentar a Segurança da Senha e Proteger Melhor sua Conta Google.

Para excluir um blog entre no painel do blogger depois em configurações > outros. Veja que temos a opção importar blog, exportar blog e excluir blog. Então para apagar seu blog clique na opção excluir blog isso mostra uma janela de confirmação da exclusão do blog e também dá a opção de fazer um download do seu blog completo achamos que pode ser útil fazer esse download das suas postagens do blog, mas veja também como fazer o download do seu template: Fazer Backup ou Colocar Template no Blogger (Novo Painel).

Após clicar no botão excluir blog já está tudo pronto o blog não aparece mais na internet, mas caso você se arrependa é possível recuperar seu blog. Para isso volte ao painel do blogger e veja que aparece o item blogs excluídos então só precisa clicar nele e verá o nome do seu blog.

Então entrará numa pagina com o nome do blog excluido e um botão para desfazer a exclusão.

Quando clicar neste botão seu blog voltará ao normal e aparecerá novamente na internet, mas isso tem o limite de 90 dias após esse tempo o blog será apagado definitivamente pelo blogger e não tem como recuperar.

Para recuperar o acesso a sua conta Google veja esse link das paginas de ajuda do Blogger: Problemas com Login.

Isso tudo que falamos funciona para blogs excluídos por engano ou em caso de arrependimento, mas veja também outros motivos que podem fazer você perder seu blog:

Como Evitar Punições do Google e Aparecer nos Resultados das Buscas
Regras do Adsense: Evite Punições, Cliques Inválidos
Proteja-se de Crimes Virtuais: Como Melhorar sua Segurança na Internet
Varias Pessoas Fazendo Postagens - Blog Compartilhado

Nós já falamos desse assunto anteriormente, mas agora com a mudança para o novo painel do blogspot as coisas tinham trocado de lugar devido à mudança no layout do blogger por isso achamos que deveríamos atualizar com esse novo tutorial.

Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos

2012-04-23T14:12:00.002-03:00

Vamos mostrar algumas maneiras de personalizar os links de postagens relacionadas feitas pelo Linkwithin que muitos blogueiro usam para gerar mais pageviews no blog e assim fazer os visitantes do blog ler mais postagens e ficarem mais tempo no seu site. Mostrar sugestões de outras postagens no seu blog é muito útil, mas você pode alterar as cores de fundo, cor de texto e também os feitos do Linkwithin apenas adicionando algumas linhas de código. Porém se estiver procurando como trocar o texto padrão do Linkwithin veja neste tutorial: Mudar o texto You might also like.

Para modificar a aparência dos assuntos relacionados no blog entre na pagina modelo > editar html > use o ctrl F para achar o trecho ]]></b:skin> e cole o código antes dele:

.linkwithin_posts {width: 700px !important;}
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
.linkwithin_posts a:hover{background-color: #FC3 !important;}
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}

Agora veja como alterar as cores do Linkwithin no Blogger. Em todos eles o que você precisa fazer é modificar os valores ou colocar o código HTML da cor que desejar e você pode ver os códigos neste link: Código das Cores.

.linkwithin_posts {width: 700px !important;}
700 é a largura total do gadget de posts relacionados, então se quiser que ele fique mais estreito e ocupando duas linhas diminua o valor.

.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
Aqui temos a cor de fundo de cada link background-color: #FF0. O espaço entre cada link background-color: #FF0 e a altura do gadget (200px) isso é útil caso o titulo do seu posts ultrapasse o final do gadget e fique fora da cor de fundo, então poderá aumentar esse valor.

.linkwithin_posts a:hover{background-color: #FC3 !important;}
#FC3 é a cor de fundo quando o mouse está sobre cada link.

.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Aqui temos #F00 que é a cor do texto quando o mouse está sobre o link.

Como já falamos anteriormente é só mudar o código das cores e os números referentes a larguras e se quiser pode ver aqui o código para usar bordas. Mas se quiser veja aqui outras opções de assuntos relacionados para usar no blogspot:
Lista de Posts com Assuntos Relacionados no Blog (somente texto)
Acessório para Mostrar Posts Relacionados no Blog (get.2leep)
Postagens Populares no Blogger: Gadget Posts mais Visitados

Achamos importante fazer algumas dessas alterações para fazer que links dos posts relacionados do seu blog combinem melhor com o template e as cores que usa no layout do seu blog, afinal a aparência do site é muito importante para agradar e conquistar mais visitantes e pessoas que gostam do nosso blog.

Colocar Botões de Compartilhamento em Forma de Coração no Blog

2012-04-20T15:02:00.002-03:00

Usar botões para compartilhar as postagens com formato de coração no blog pode ajudar (atrair a atenção) dos seus visitantes para os botões de compartilhamento das redes sociais e com isso ajudar a conseguir mais visitas de sites como Facebook, Twitter, Orkut, Pinterest e outros. Mas se você quiser mostrar botões no modelo padrão pode ver nosso post sobre: 7 Opções de Botões para Divulgar Blog nas Redes Sociais.

Para colocar esse acessório de compartilhamento de postagens em forma de coração no blogger você deve modificar o código HTML então sugerimos fazer backup do seu template antes de começar. Então entre na pagina editar HTML, use o ctrl F, encontre a linha </head> e coloque esse código antes dela:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Agora procure e insira esse outro código antes de </body>

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>

E já está tudo pronto. Se você quiser mudar o lugar que o coração aparece na sua pagina é só alterar o trecho:
<div style='position: fixed; bottom: 2%; left: 2%;'>

Para colocar na parte de cima da pagina troque bottom por top e se quiser o gadget de coração do lado direito troque left por right. Em ambos os casos o valor 2% é a distancia da margem da pagina então pode modificar isso como quiser. Apenas tenha cuidado com os outros sinais como, por exemplo, os dois pontos, ponto e vírgula porque eles fazem parte do código de posicionamento do botão para compartilhar e se apagar ou trocar algum de lugar o código não funciona corretamente no blog.

Como pode notar esse javascript foi desenvolvido pelo site Spice Up Your Blog e nós estamos apenas divulgando o código por achar que é interessante de usar um gadget em forma de coração para compartilhar postagens nas redes sociais. Mas é claro isso terá utilidade dependendo muito do tipo de conteúdo e visitantes do seu blog.

Veja outras dicas para compartilhar e divulgar seu blog:
Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress
Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog
5 Dicas para Ajudar na Divulgação de Blogs

Esse tutorial é para responder a uma duvida deixada em um dos comentários deste blog e aproveitamos para dizer que não publicamos tutoriais sobre outras perguntas e sugestões que recebemos porque nem tudo é possível fazer no blog ou são coisas que apresentam muitos erros conforme o template, mas realmente pesquisamos sobre todos os assuntos sugeridos. Abraços a todos!

Colocar Favicon no Tumblr: Personalizar Imagem na Barra de Endereço

2012-04-18T16:40:00.000-03:00

Veja como trocar a imagem na barra de endereço do seu blog no Tumblr. Usar um favicon personalizado é importante para ajudar os visitantes lembrarem-se do seu site e você pode usar até imagens animadas na barra de endereço do seu blog. Nós já mostramos como fazer isso no blogger em vários tutoriais tanto usando o HTML(Colocar Favicon no Blogger - Imagem na Barra de Endereços) como pela pagina layout().

Para colocar uma imagem na barra de endereço do Tumblr primeiro você precisa ter o favicon pronto (imagem) no site http://www.iconj.com você tem um gerador de favicon que converte qualquer imagem para o formato certo para usar na barra de endereço do blog. Além disso, você pode achar favicons com movimento (gifs animados) e se quiser você poderá ver aqui dicas para achar imagens, icones para Blog. Mas vamos mostrar como enviar uma imagem e converter para o formato de ícone (.icon). Clique no botão selecionar arquivo e depois clique em upload now.

Agora você pode ver a imagem já no formato de ícone para usar na barra de endereços do navegador. A pagina mostra dois códigos e o link de download. Embora o código pronto com o ícone já hospedado pelo site funcione, nós sugerimos que faça o download da imagem e use outro site de hospedagem para garantir que o seu favicon não desapareça.

Mas aqui neste tutorial para demonstrar vamos usar o segundo código que já tem o favicon hospedado no site. Então quando enviar a sua imagem copie esse código pronto que está depois de Simply copy and paste the code below in the head of your web pages. Agora entre no painel do Tumblr clique em Customize theme > editar HTML e procure e apague a linha:

<link rel="shortcut icon" href="{Favicon}" />

Agora coloque o código que copiou no site que gerou o ícone no lugar da linha que acabou de apagar. Depois disso só precisa clicar para salvar as alterações e visualizar seu Tumblr com a nova imagem na barra de endereço funcionando. Caso não apareça clique no botão F5 para atualizar a sua pagina porque às vezes o computador usa o histórico de internet mostrando uma versão salva do seu blog, leia mais sobre isso aqui: Evite erros no blog por causa do histórico de internet.

Veja algumas outras dicas para seu Tumblr:
Como Colocar Música no Tumblr ou Blogger
Personalizar Link Resumo da Postagem no Tumblr
Como Enviar Atualizações do Tumblr para o Facebook e Twitter

Essa é uma alteração bem simples de fazer e ajuda a melhorar a aparência do seu blog afinal todos os sites têm um favicon personalizado para ajudar as pessoas memorizarem a pagina de internet que visitam. Esperamos que gostem e aproveitem mais essa sugestão para personalizar o Tumblr. Abraços a todos.

Como Colocar Botão Pin it do Pinterest no Blogger ou Wordpress

2012-04-16T14:42:00.000-03:00

Coloque um botão (botão Pin It) no Blogger ou Wordpress para compartilhar as imagens do seu blog no Pinterest que é uma rede social especializada em compartilhar fotos e imagens que está crescendo muito rápido e pode ajudar na divulgação do seu blog através das imagens que você publica em seus posts e claro conseguirem mais visitas através das imagens que utiliza no seu blog (veja também: Aparecer na Pesquisa de imagens Google). Portanto divulgar as imagens do seu blog nesta nova rede social pode ajudar a conseguir muitas visitas e mais lucros dependendo do tipo de conteúdo e interesse das pessoas que visitam suas paginas.

E para os blogueiros que utilizam o Blogger você só precisa de um código para colocar o botão Pin It da rede social de imagens (Pinterest) no seu blog. Entre na pagina editar HTML, sugerimos que faça um backup do seu template por segurança depois clique em editar HTML, marque a opção expandir modelo de widgets, procure por post.body (use o ctrl F) e cole esse código logo abaixo do post.body:

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script></b:if>

Isso faz o botão para compartilhar imagens aparecer somente nas paginas individuais das postagens do blogger, mas se quiser poderá utilizar o código em um gadget e deixar aparecer em todas as paginas do seu blog, então para fazer isso entre na pagina layout, adicionar gadget, html/javascript e cole esse código:

<a href='javascript:void(run_pinmarklet1())'><img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/></a>
<script type='text/javascript'>
function run_pinmarklet1() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Agora é só escolher um bom posicionamento para o gadget na sua pagina. Podendo inclusive deixar o botão fixo no canto da pagina como mostramos em nosso tutorial: , neste caso é só trocar o código do addthis que está no tutorial do link por esse que acabamos de mostrar.

Outro detalhe interessante deste código para o botão do Pinterest é que você pode trocar a imagem do botão por qualquer outra que desejar apenas alterando o endereço (http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png) da imagem neste trecho:

<img src="http://2.bp.blogspot.com/-lRae8bdMpuA/TzuLrnycXaI/AAAAAAAACQE/YVYUjfs7dm8/s1600/pinmask2.png" style='margin:0; padding:0; border:none;'/>

Você pode encontrar uma imagem pronto ou se quiser fazer uma imagem veja alguns Sites para Fazer Imagens Online e tenha cuidado com erros no endereço da imagem por isso se tiver duvidas leia sobre: Imagem não aparece no Blog ou Site.

Para colocar o botão do Pin It no Wordpress é muito simples existe um plugin do Pinterest para Wordpress que você pode encontrar no diretório de Plugins para Wordpress: Plugin Pin It.

A imagem compartilhada no exemplo está na postagem:Pensamentos e Frases Filosóficas sobre a Vida e o Amor

Veja algumas informações sobre a rede social Pinterest, ela já é a terceira rede social mais popular nos Estados Unidos. No mês de fevereiro o Pinterest conseguiu 104 milhões de visitas, atrás apenas do Facebook (7 bilhões de visitas) e do Twitter (182 milhões) e na frente do LinkedIn (86 mi) e Google+ (61 mi). Então aproveite também e veja como colocar botões dessas redes sociais no seu blog:
Como Colocar Botão Linkedin no Blog
Colocar Gadgets no Blog para Google Plus: Botão +1 e Seguir Pagina
Botão Curtir e Enviar do Facebook Juntos
Twitter button no seu blog - botão retweet

Esperamos que gostem de mais essa dica para divulgar seu blog em redes sociais, mas é claro que sabemos que cada tipo de blog pode ter mais ou menos vantagens em cada rede por isso vale à pena testar e descobrir o quanto as imagens que usa no seu site podem ajudar a conseguir mais visitas.

Para que Serve um Blog? Afinal o que é um Blog e Qual a sua Utilidade

2012-04-13T16:26:00.002-03:00

Existem milhões de blogs, mas qual a razão da criação de um blog? Para que ele serve ou qual utilidade cada pessoa encontrou para fazer um blog? Essas são boas perguntas que a maioria dos blogueiros já respondeu para si mesmo até de forma inconsciente. Mas a internet e os blogs estão cada vez mais profissionais e como já falamos hoje em dia os blogs estão parecendo micro empresas (leia mais sobre Seu Blog é uma Empresa!), por isso vamos fazer uma enquete para saber o motivo que levou você a criar seu blog.

Além desta já publicamos diversas outras , por exemplo:
Qual a Idade dos Blogueiros?
Há quanto tempo você é blogueiro?

São tantas as explicações sobre o que e para que serve um blog que podemos ficar perdidos nelas, mas de modo geral a idéia é divulgação de algo (produto, opinião) ou até mesmo divulgação pessoal no caso de blogs de políticos ou blogs de freelancers que demonstram seu conhecimento sobre algo e podem prestar serviços para empresas ou pessoas e claro existem aqueles que apenas querem se divertir um pouco. Recomendamos que leiam também:
Como Garantir que um Blog tenha Sucesso na Internet?
Ganhar Tempo e Conseguir mais Visitas no Blog

Mas deixe sua opinião em nossos comentários dizendo qual foi a motivação que fez criar seu blog, há quanto tempo você é blogueiro. E claro pode ajudar a dar uma explicação sobre o que é um blog. Abraços a todos!!

Tire suas Duvidas sobre Blogs: 13 Dicas para Melhorar seu Blog

2012-04-11T16:23:00.000-03:00

Essa é uma lista com 13 dicas para ajudar a melhorar seu blog. Veja como: corrigir links quebrados, usar melhor as meta tags e técnicas de SEO (otimização de blogs e sites), dicas para divulgar sua pagina do facebook, melhores posicionamentos dos anúncios adsense no blog, fazer um banner animado, como ter sucesso como blogueiro e varias outras dicas para ajudar seu blog.

Como Garantir que um Blog tenha Sucesso na Internet? Será que é possível ter certeza que um blog fará sucesso na internet? Claro que é necessário trabalho e dedicação, mas certamente a internet é uma ótima oportunidade para todos terem sucesso e ganhar dinheiro com blogs e sites.

Como Centralizar os Anúncios do Google Adsense no Blog: Veja como modificar o alinhamento dos anúncios do Google no seu blog, assim você poderá ajustar melhor a posição dos anúncios ao seu template.

Ocultar Marcador e Personalizar o Menu dos Marcadores do Blog: Veja como fazer para quando as pessoas entram na pagina de um marcador do seu blog esse marcador não apareça no menu (gadget marcadores).

Criar Banner Animado com as Postagens Recentes do Blog: O FeedBurner tem vários modelos de banners animados com as postagens do seu blog já pronto para você usar, então veja como fazer para usar esse banner para divulgar seu blog.

Você Acompanha as Estatísticas de Visitas e Ganhos do Blog? Pesquisa sobre a frequência que as pessoas olham as estatísticas do blog. Veja nossa enquete que já recebeu mais de 230 votos.

Colocar Anúncios Google Adsense entre Postagens do Blogger: Usar os anúncios entre as postagens pode ser uma ótima maneira de ganhar mais dinheiro com seu blog, afinal quem leu a postagem e chega ao final dela está interessado no seu site e tem mais chances de clicar nos anúncios. Esse é um dos posicionamentos de anúncios sugeridos pelo adsense.

Colocar Pop Up para Divulgar Pagina de Fãs do Facebook no Blogger: Fazer um pop up com sua pagina de fãs do facebook pode ajudar a conseguir mais seguidores para sua pagina além de gerar mais divulgação na rede social.

Mudança no Endereço (url) do Blogspot para o Domínio cada País: Leia sobre a mudança nos endereços do blogger que agora tem domínios em cada país e isso assustou algumas pessoas quando o endereço mudou para blogspot.com.br

Encontrar e Corrigir Links Quebrados no Blogger e no WordPress: Resolver o problema com links errados no seu blog pode ajudar bastante no desenvolvimento do seu blog, afinal muita gente quando clica num link que não funciona simplesmente fecha a janela e vai para outro site. Então verifique os links quebrados do seu blog e não perca visitas por isso.

Blogger Melhora Recursos de SEO (Personalizar Preferências de Busca): As mudanças e melhorias do blogger foram muitas nestes últimos tempos e as recentes modificações permitindo personalizar a pagina de erro (404) e outras novidades relacionadas à otimização de sites (SEO) estão mostrando que esse ano será muito bom para o blogger.

Colocar Descrição em cada Postagem do Blogger - Usar Meta Tags: Usar descrição e tags personalizadas nas postagens do blog pode ajudar a melhorar seu posicionamento nos resultados do Google e outros sites de busca. Essa é uma coisa relativamente fácil de fazer e dá bons resultados.

Como usar e o que é Redirecionamento de Pagina (url) do Blogger: Redirecionar paginas é muito útil para evitar que as pessoas entrem na pagina de erro (não encontrada) do seu blog. Com essa novidade do blogger você poderá escolher para qual pagina o visitante será levado no caso de alguma pagina que você excluiu.

Não Permitir seu Blog Abrir Dentro de um Frame ou Iframe: Os resultados de busca de imagens do Google e alguns outros sites mostram seu blog dentro de um iframe, mas se você quiser poderá impedir isso colocando uma javascript na sua pagina.

Essas dicas foram publicadas neste blog no mês passado e esse é uma espécie de resumo do mês de março, então além da sua opinião sobre as dicas ou duvidas sobre seu blog gostaríamos de perguntar o que você acha dessa idéia de fazer uma lista todo mês com as postagens do mês anterior. Devemos ou não continuar publicamos esses resumos de dicas de cada mês?

Como Fazer Avaliação de Blogs: Entender Estatísticas e Resultados

2012-04-09T15:18:00.004-03:00

Com varias novidades do Blogger surgindo em poucos dias muitos blogueiros fazem diversas alterações em seus sites ao mesmo tempo e fica muito complicado saber quais das mudanças no seu blog deram resultados positivos ou negativos. Por isso mesmo com tantas coisas para fazer como falamos no artigo: Blogger Melhora Recursos de SEO, onde falamos sobre varios assunto. Recomendamos que tenham um pouco de calma para poder avaliar melhor o que está acontecendo no seu blog para poder entender e escolher os melhores caminhos a seguir.

Você avaliar corretamente as modificações que fez no blog dando algum espaço de tempo entre elas e observando os dados do seu contador de visitas, mas não somente o numero total de visitas, mas informações como a velocidade do site, taxa de rejeição, tempo que as pessoas passam no seu blog e outras coisas.

Por exemplo , quando você troca gadgets de lugar ou coloca novos gadgets no seu blog, veja se nota diferenças no tempo de carregamento da pagina e tempo que as pessoas ficam no seu blog, além disso, sugerimos que veja nosso artigo sobre: Gadgets, Widgets e Acessórios mais úteis para Blog, afinal cada tipo de blog tem um publico alvo que gosta de certos tipos de sites.

Sobre as mudanças em meta tags, técnicas de SEO para otimizar o blog e conseguir mais visitas isso leva mais tempo para avaliar porque precisa que o Google atualize as mudanças nos seus resultados de buscas, portanto se alterar a descrição do seu blog você deve observar se nota diferença no comportamento das visitas do seu blog depois de uma semana.

Além você pode usar as estatísticas sobre os visitantes do seu blog até para ter novas idéias para postagens descobrindo o que as pessoas mais gostam, mas já falamos sobre isso em tutoriais como:
Usar Informações do Contador de Visitas para Melhorar o Blog
Quais os Melhores Assuntos para Blogs: o que Faz mais Sucesso

A mensagem principal deste post é dizer aos blogueiros tenham calma. Nós sabemos que no momento que aparecem diversas coisas novas no Blogger temos vontade de fazer tudo que for possível, mas se modificar coisas demais não conseguirá saber quais ajudaram a melhorar seu blog. Por isso preste atenção em quais mudanças faz para avaliar o resultado. E lembre-se sempre que fazer um blog de sucesso é um trabalho a longo prazo e certamente exige bastante trabalho e dedicação.

Colocar Gadgets no Blog para Google Plus: Botão +1 e Seguir Pagina

2012-04-07T17:27:00.002-03:00

O Blogger lançou dois novos gadgets para melhorar a integração entre seu blog e seu perfil no Google Plus. Um dos novos acessórios é o botão +1 do Google que já era possível ser adicionado manualmente através de códigos como já mostramos no tutorial: Colocar Botão +1 do Google no Blog. E o outro gadget é para seguir a pagina do seu blog no Google Plus que também era possível ser instalado através de códigos html (Gadget para Divulgar sua Pagina no Google Plus no Blog). Contudo adicionar um gadget é muito mais fácil do que copiar e editar códigos HTML no seu blog e por essa razão estamos falando destes gadgets hoje.

Seja qualquer um dos gadgets que deseje adicionar ao seu blog é só entrar na pagina layout e clicar para adicionar um gadget, então para colocar o gadget Botão +1 é muito simples você só precisa clicar nele, escolher o modelo de botão +1 que vai usar no seu blog e depois clicar no botão salvar e já está pronto.

Colocar o gadget Selo do Google+ também é fácil você clica para adicionar o gadget e depois precisa copiar o endereço da pagina do seu blog no Google Plus, mas atenção não é o endereço do seu perfil, veja aqui se tiver duvidas: Como Criar Paginas no Google Plus para o Blog. Então cole o endereço no local indicado.

Não use as barras nem o endereço completo. Copie apenas os números e quando colocar no gadget verá a mensagem: ficou ótimo! Então clique em salvar e depois pode visualizar seu blog e testar esses novos acessórios para blogs que está usando.

Veja outras dicas sobre redes sociais:
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

Como mencionamos no inicio do tutorial essas ferramentas para blogs não são nenhuma novidade apenas ficou mais fácil colocar elas no seu template usando os gadgets. Esperamos que gostem e aproveitem.

Configurar Tags de cabeçalho de robôs personalizadas no Blogger

2012-04-05T15:23:00.000-03:00

Você pode fazer a configuração personalizada das paginas do seu blog para os robôs de busca. Isso vai evitar o problema de conteúdo duplicado do seu blog no Google e com isso deve melhorar o desempenho do seu site na internet. Essa é mais uma das novidades do blogger que já falamos no post: Blogger Melhora Recursos de SEO (Personalizar Preferências de Busca).

Os sites de busca (Google, Yahoo, Bing e outros) quando fazem a indexação de sites podem achar varias paginas com o mesmo conteúdo normalmente isso é plagio(Como saber quem copiou meu blog) e deve ser penalizado pelos sites, afinal todos querem mostrar conteúdos de qualidade e originais, mas o problema é que no blogger quando fazemos uma postagem além da pagina individual do post ela também vai para a pagina dos marcadores e dos arquivos do blog, ou seja, corremos o risco do Google e outros sites considerarem isso conteúdo duplicado. Recomendamos que leiam sobre as Mudanças nos Resultados das Buscas do Google e também como evitar punições do Google e saber como resolver esse problema no seu blog.

Mas antes de começar vamos mostrar o que significa cada uma das tags:

all: Não há restrições para indexação.
noindex: Não mostrar esta página nos resultados de busca e não mostram um link "Em cache" nos resultados de busca.
nofollow: Não siga os links nesta página
none: Equivalente a noindex, nofollow
noarchive: Não mostrar um link "Em cache" nos resultados de busca.
nosnippet: Não mostrar um trecho nos resultados da pesquisa para esta página
noodp: Não utilize metadados do Open Directory Project por títulos ou trechos mostrados para esta página.
notranslate: Não oferecer tradução desta página nos resultados de busca.
noimageindex: Faça imagens não índice desta página.
unavailable_after: [RFC-850 Data / hora]: Não mostrar esta página nos resultados da pesquisa após a data / tempo especificado. A data / hora deve ser especificado na RFC 850.

Para resolver isso podemos configurar corretamente as Tags de cabeçalho de robôs no blogspot entrando em configurações > preferências de pesquisa > tags de cabeçalho de robôs personalizadas. Então clique para editar essas tags.

Vamos por partes mostrar como fazer a configuração das Tags de cabeçalho do blogger. No primeiro trecho pagina inicial recomendamos deixar a opção all marcada, ou seja indexar tudo.

Na parte Páginas de arquivo e pesquisa achamos melhor marcar a opção noindex, porque essas são as paginas de arquivos ou paginas de pesquisa que já foram indexadas nas paginas de postagens.

E finalmente Padrão para postagens e páginas que devemos deixar na opção all. Tenha muita atenção para trocar as configurações, pois essa é a configuração para indexar todas as postagens e paginas extras do seu blog. Então depois que terminar é só clicar em salvar.

Depois que fizer essas alterações ativando as tags personalizadas do blogspot você poderá escolher as tags de cada postagem, veja na pagina de postagem as configurações de postagens que encontrará o item tags de robôs personalizadas. E o funcionamento é o mesmo que já falamos anteriormente neste tutorial.

Mas lembrem-se essas alterações não podem ser notadas imediatamente no seu blog ou no Google, portanto preste atenção se tem alguma mudança importante no numero de visitas nos próximos dias. Sobre acompanhar as estatisticas do blog veja os seguintes artigos:
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
Usar Informações do Contador de Visitas para Melhorar o Blog

Nessas alterações que o blogger fez tem coisas mais simples e outras para quem entende um pouco mais de HTML, técnicas de SEO então recomendamos ter cuidado nas alterações que fizer e ter atenção para saber como desfazer qualquer mudança. Mas no caso desta e das outras alterações de SEO no blogger que estão nas configurações de pesquisa para desfazer e voltar ao padrão é só clicar para editar e marcar que não quer personalizar.

Site para Fazer Imagens Online e Criar Banners com Efeitos

2012-04-03T15:14:00.003-03:00

Sites ou programas para editar imagens são muito úteis para os blogueiros e webmasters, afinal sempre precisamos criar ou editar imagens para usar nos blogs e sites e as utilidades dos editores de imagens são muitas deste criar banners, fazer imagens para usar como template ou até mesmo enfeites para colocar no blog. Nós já fizemos até uma enquete sobre qual o melhor programa gratuito para editar imagens (já tem mais de 1180 votos), mas hoje vamos mostrar mais um site que permite criar e editar imagens online grátis.

Recebemos a sugestão do site http://www.sumopaint.com/start em um comentário e achamos muito interessante esse site de edição de imagens ele tem muitas funções e lembra um pouco o photoshop. Você pode escolher se deseja criar uma nova imagem, enviar uma imagem do seu computador ou editar uma imagem da internet usando a url dela.

Neste site você pode colocar efeitos nas imagens como sombra, brilho, bordas e outros apenas clicando no botão FX.

Além disso, outro recurso muito útil são as camadas, ou seja, você pode adicionar varias imagens ou desenhos e editar cada uma delas separadamente se correr o risco de estragar a outra.

E quando terminar é só clicar no menu file > save to my computer e escolher a opção jpg ou png. Lembramos que o formato png permite fundo transparente. Depois é só hospedar a imagem em algum site ou até mesmo no blogger e usar como quiser.

Veja a seguir alguns outros sites de edição de imagens e criação de banners online como para escolher qual site vai usar é importante saber como ele é vamos colocar algumas imagens, portanto clique na imagem para ver o tutorial sobre o site.

Como Fazer Imagens e Banners Online

Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores

Criar Imagens Animadas com Textos - Gerador de Gifs Animados

Editor de Imagens, Fotos e Banners Online

Mesmo que goste desses sites para fazer imagens online achamos importante que você baixe um programa para editar imagens no seu computador assim poderá aprender mais sobre o programa e trabalhar cada vez melhor, veja o link da enquete sobre programas gratuitos para editar imagens. E veja também:

Achar e baixar imagens, fotos, icones para Blog
25 sites com Imagens Grátis para Baixar e Usar
Escrever sobre Fotos e Imagens - Criar Marca d'agua

Se estiver querendo criar ícones para redes sociais ou qualquer outra coisa sugerimos que veja nosso post sobre: afinal será mais fácil encontrar um ícone pronto do que fazer. E você gostou desta dica de site? Deixe sua opinião sobre esse ou algum outro programa ou site que use para criar as imagens que usa no seu blog.

Não Permitir seu Blog Abrir Dentro de um Frame ou Iframe

2012-03-31T14:44:00.002-03:00

Muitos sites de agregadores de conteúdo e a pesquisa Google de imagens entre outros abrem o blog dentro de um frame ou iframe, mas colocando um código no blogger ou um plugin no wordpress é possível impedir que seu blog abra dentro de um frame e abra diretamente na janela inteira do navegador. Fazendo assim a navegação no seu site ficar mais fácil e com mais espaço.

Se você tem duvidas sobre o que é um iframe é como se fosse uma janela dentro de outra. Nós já usamos isso em nossos tutoriais sobre: Colocar Vários Vídeos do Youtube no Site ou Blog e Fazer uma Galeria de Imagens no Blog. Então se quiser pode usar o endereço do seu blog no lugar do endereço do vídeo do youtube para ver e testar seu blog dentro de um iframe.

Para conseguir impedir que o Blogger apareça dentro de um iframe ou frame você deve entrar na pagina editar HTML, usar o ctrl F para encontrar a linha </head> e colar o código antes dele.

<script type='text/javascript'>
if(top.location!=this.location) top.location=this.location;
</script>

Depois é só clicar em salvar e pronto.

Para não permitir seu blog Wordpress abra dentro de frame ou iframe existe o plugin No Frames (http://wordpress.org/extend/plugins/no-frames) que você pode instalar no Wordpress como pelo painel do mesmo jeito que faz com qualquer outro plugin para Wordpress e assim evitar os frames.

Veja outras dicas para ajudar a divulgar e proteger seu blog:

Aparecer na Pesquisa de imagens Google
Aumentar a Segurança da Senha e Proteger Melhor sua Conta Google

Em ambos os casos (blogger e wordpress) para testar você só precisa pesquisar no Google imagens e ver se funcionou corretamente e apareceu sua pagina aberta na janela completa do navegador.

Como usar e o que é Redirecionamento de Pagina (url) do Blogger

2012-03-29T15:02:00.003-03:00

O redirecionamento de paginas serve para corrigir links quebrados devido a paginas excluídas do seu blog, ou seja, quando alguém tentar entrar na pagina que não existe ele vai automaticamente para outra pagina que você escolher. Isso faz parte das mudanças recentes do blogger, veja mais informações aqui:Blogger Melhora Recursos de SEO.

Entre na pagina Configurações > preferências de pesquisa e use a opção erros e redirecionamentos, veja onde tem redirecionamentos personalizados e clique em editar. Então adicione o endereço da pagina que não existe mais no seu blog no primeiro campo (de: http//..., veja na imagem pagina que não existe), mas coloque apenas o endereço da pagina, por exemplo, no caso de nossa pagina com dicas sobre assuntos diversos o endereço dela é:

http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html

Então colocaríamos apenas a parte /p/lista-de-tutoriais.html, assim mesmo com a barra no inicio.

E no campo para colocamos a pagina que será exibida (pagina que aparecerá) quando alguém tentar entrar no link acima e isso é feito da mesma forma começando o endereço com a barra. Caso queira que redirecione para a pagina inicial do seu blog coloque apenas a barra "/". Depois é só clicar para salvar e pronto. Se quiser testar é só tentar entrar na pagina que colocou no primeiro campo e verá que automaticamente entrará no segundo endereço que colocou.

Você pode usar a central de webmasters do Google para ver os links não encontrados do seu blog como mostramos na dica: Encontrar e Corrigir Links Quebrados no Blogger e no WordPress. Então use essa novidade do blogger que permite o redirecionamento de links que é muito melhor do que deixar as pessoas entrarem na notificação de pagina não encontrada (pagina de erro 404), afinal redirecionando a pagina você poderá escolher uma pagina com conteúdo similar e provavelmente melhor do que a excluída. Veja também como usar informações do contador de visitas para melhorar o blog

Usar corretamente os redicionamentos de pagina é uma das tecnicas de SEO para conseguir melhorar sua posição nos resultados das pesquisas Google e outros sites de busca. Esperamos que essa dica ajude a resolver os problemas com paginas que não existem mais no seu blog e você pode criar quantos redirecionamentos de pagina precisar no seu blog.