Gadget de Seguidores do Google+ no Blogger

Olá pessoal, já publiquei diversos artigos aqui no blog mostrando as integrações do Google + com o Blogger. Acredito que o Google + cada vez mais é uma rede social que você como blogueiro deve investir e uma boa forma de fazer isso é integrando seu blog é ela.

Veja abaixo o tutorial de como adicionar o gadget de seguidores do Google + com o seu blog, esse gadget é muito parecido com a Like Box do Facebook.

Seguidores do Google+

Tutorial
1. É necessário que você tenha uma página criado no Google +, caso já tenha é só seguir os próximos passos.
2. Após isso, acesse o painel de seu Blogger e vá ao "Layout" de seu blog.
3. Clique em "Adicionar um Gadget"
4. Agora adicione o gadget "Seguidores do Google+"

Adicionar gadget

5. Caso deseje, modifique o nome do gadget e clique em "Salvar"

Salvar gadget

6. Agora é necessário que no painel de seu blog, você acesse a opção "Google+". E depois clique acima da sua página, para que seja exibido os seguidores de sua página no gadget.

Vincular página do Google+



Pronto, o gadget foi adicionado e está vinculado a sua página no Google+.

PopUp para Curtir Fan Page do Facebook no Blogger - Com Cookies

O Facebook é uma ótima maneira de divulgação e de conectar os leitores ao seu blog, para que mais pessoas estejam conectadas por meio do Facebook é necessário que você busque aumentar o número de  fans de sua página.
Uma boa forma de aumentar o número de fans na fan page de seu Facebook é divulgando a mesma por meio de seu blog.
Usando esse PopUp que irei disponibilizar aqui certamente isso irá ajudar a aumentar o números de fans na sua fan page.

Colocando Sistema de Comentários do Facebook no Blogger
Like Box - Caixa de fãs do Facebook

PopUp - Curtir fan page - com cookies


O PopUp possui um sistema de Cookies, que faz com que ele só seja aberto na primeira visita do dia, o que faz que não incomode a quem está visualizando as páginas de seu blog.

Adicionando ao seu blog
1. Acesse o painel de seu blogger.
2. Vá para a página "Layout"
3. Clique em "Adicionar um Gadget"
4. Clique em "HTML/JavaScript"
5. Modifique o código abaixo, altere somente a parte "NOME-DA-SUA-FANPAGE", que está ao fim do código, coloque no lugar dele o nome da sua página no facebook, por exemplo a do nosso blog é da seguinte forma: www.facebook.com/DesenvolvendoBlogs, substitua por o nome final da sua página.


6. Cole no gadget e depois clique em "Salvar"

Pronto, PopUp adicionada!

Colocar widget de Previsão do Tempo em seu blog.

Como sabemos existem diversos acessórios para colocarmos em nossos blogs e alguns são muito interessantes, neste artigo vou mostrar como colocar o widget de previsão do tempo em seu blog.
Iremos utilizar de 3 sites que oferecem esse widget o Tempo Agora, Centro de Previsão do Tempo e o Climatempo.

- Acessórios para seu blog
PopUp para Curtir Fan Page do Facebook no Blogger - Com Cookies
Colocando Música em um Blog

Tempo Agora
Acesse a seguinte página: http://www.tempoagora.com.br/selos.html escolha o formato do widget, selecione o estado a cidade e depois clique em "Adcionar cidade" para adicionar a cidade depois clique em "Gerar código" e copie o código do widget.
Layout > Adicionar um Gadget > HTML/JavaScript > Cole o código do widget e salve.
Tempo Agora - Widget de Previsão do Tempo


Centro de Previsão de Tempo 
Acesse a seguinte página: http://www.cptec.inpe.br/previsaonoseusite.shtml coloque o nome de sua cidade, selecione o layout do widget ( modelo ), escolha uma fonte, uma cor e copie o código do widget.
Layout > Adicionar um Gadget > HTML/JavaScript > Cole o código do widget e salve. 
Centro de Previsão do Tempo - Widget de Previsão do Tempo

Climatempo
Acesse a seguinte página: http://www.climatempo.com.br/tempo-no-seu-site procure a região que você quizer, abaixo do widget que você quer clique no link "Previsão do tempo para todas as capitais da região xxx." vai abrir umas opções coloque seu nome, nome do site e email, depois  clique em "Ver código" e copie o código do widget.
Layout > Adicionar um Gadget > HTML/JavaScript > Cole o código do widget e salve.
Climatempo - Widget de Previsão do Tempo

Wibiya - Adicione uma Barra de Ferramentas em seu Blog

wibiya
O site Wibiya oferece um widget de uma barra de ferramentas que é muito útil para muitos blogs, ela possue um contador de visitantes online, um botão de tweetar, um chat e várias opções de compartilhamento.
Muitos blogueiros que utilizam desse acessório ( widget ) e gostam muito das opções oferecidas e do painel que o site oferece com estatísticas, opções de personalização, quantidade de plataformas aceitas e muito mais. Além de a barra ser descreta ela pode ser escondida caso o visitante de seu blog deseje.

Tutorial
1. Acesse o site http://wibiya.conduit.com
2. Na página inicial clique no botão "Get it now"
get it now

3. Vai abir um box e nele coloque o url de seu blog e a categoria do mesmo, depois clique em "Create Now"
Criar barra

4. Selecione os aplicativos que deseja colocar em sua barra, escolha uma cor e coloque seu email, sua senha e seu idioma para criar uma conta ( não precisa a confrimação do email, a conta é útil para a administração da barra, visualização de estatísticas e caso você queira mudar a barra ). Depois clique em "Get Your Bar"
Personalizar barra de ferramentas

5. Na página que abriu vai aparecer a plataforma de seu blog, clique no link "here" para adicionar o widget ao seu blog.
widget

6. Caso não esteja logado em seu blogger, faça login, selecione o blog onde a barra deve fica e depois clique em "Adicionar widget".
Adicionar widget no Blogger

7. Pronto a barra foi adicionada, mas volte a aba/guia do wibiya e clique no botão "Activate". Para ativar a criação da conta e para que você tenha acesso ao painel da barra.
Ativar conta


Clique na imagem para ampliar e ver como fica a barra.

Botões do Facebook e Twitter no rodapé das postagens.

Todos sabemos da grande importância e influência das redes sociais na internet e com isso temos que aderir e melhorar a a divulgação de nosso blog juntamente com os artigos nas mesmas.
Nesse tutorial vou mostrar um código de um widget dos botões de compartilhamento ( no rodapé das postagens ) do Facebook ( Curtir e Enviar ) junto com o do Twitter ( Tweetar ) que são muitos recomendados para a recomendação de seus artigos nessas redes sociais. Siga o tutorial abaixo para adicionar os botões ao rodapé das postagens de seu blog.
O código foi retirado do blog Códigos Blog

Tutorial
1. Faça login em seu blog e depois clique na guia "Modelo".
2. Clique em "Editar HTML" e procure pela linha abaixo:
<div class=’post-footer-line post-footer-line-1′/> ou <div class=’post-footer-line post-footer-line-1′>
3. Quando achar alguma das linhas acima, cole o código seguinte logo  abaixo.
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div style=’ height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;’>
<p style=’color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;’>Recomende:</p>
<div id=’fb-root’/><script src=’http://connect.facebook.net/pt_BR/all.js#xfbml=1′/><fb:like send=’true’ show_faces=’false’ width=’450‘/>

<a class=’twitter-share-button’ data-count=’horizontal’ href=’http://twitter.com/share’>Tweet</a>
<script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/><a href=”https://twitter.com/desenvolvendob” class=”twitter-follow-button” data-show-count=”false” data-lang=”pt”>Seguir</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
</div>
</b:if>
Alterações
Verde - Frase do widget
Laranja - Largura do widget, aconselho deixar a mesma que está no código
Vermelho - Nome de usuário do Twitter
Área grifada - Caso queira colocar a sua página do Facebook para que os usuários curtam no lugar de curtirem os artigos, substitua a área grifada pelo código abaixo, fazendo as alterações devidas ( coloque o link de sua página no Facebook ).
<div class=”fb-like” data-href=”http://facebook.com/desenvolvendob” data-send=”true” data-width=”450” data-show-faces=”true”></div>

Adicionar Caixa de "Inscrever-se" ( Subscribe ) do Youtube no Blog

O gadget de subscribe/inscrever-se para quem possue algum canal no Youtube e quer divugar esse canal em seu blog é muito útil, pois além de convidar a quem possue conta no mesmo a se inscrever no canal determinado, de alguma forma também convida as pessoas para visualizarem o canal e assim os vídeos.
Como sabemos vídeos no Youtube de certa forma aumentam o tráfego de muitos blogs que utilizam o Youtube para enviarem vídeos.

Para adicionar a caixinha ( gadget ) de subscribe em seu blog ou site é muito fácil, basta copiar o código abaixo, só fazendo uma altração, substituindo o NOME-DO-CANAL pelo nome de seu canal.
<iframe src=http://www.youtube.com/subscribe_widget?p=NOME-DO-CANAL style="overflow: hidden; height: 110px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
Por exemplo quem possue um canal no youtube possue seu canal e assim sua página personalizada, como www.youtube.com/herlanss então herlanss é o nome do canal.

Após isso é só adicionar a um gadget de seu blog e salvar.

Adcionar Gadget do Google Tradutor para Blogger

Uma boa opção para blogs que recebem muitas visitas de vários países e com isso diferentes idiomas é possível a adição de um tradutor em seu blog, para que com isso aumentar as visitas e facilitar o entedimento do conteúdo por estrangeiros.
O Blogger lançou a pouco tempo esse gadget do Google Translate que é muito fácil de ser adicionado ao seu blog. Siga o tutorial abaixo e veja.

Tutorial
1. Acesse o painel de seu blog.
2. Clique na guia "Layout"
3. Clique em "Adicionar um Gadget"
4. Clique no gadget "Google Tradutor"
Gadget Google Tradutor no Blogger

5. Após isso vai aparecer 3 opções para o formato do gadget, escolha uma que você desejar. Depois clique em "Salvar"
Adicionar gadget do Google Tradutor

6. Caso queira mudar o local do gadget é só o arrastar para o local que você desejar no layout de seu blog.

Resolver Maps - Gadget de Visitantes Online em um Globo

Revolver Maps
Como já falei em alguns artigos aqui no Desenvolvendo Blogs as estátisticas possuem grande importância para um blog, neste artigo vou mostrar uma gadget ofericido pelo site Revolver Maps que é muito legal para quem quer expor o número de visitantes que estão online em determinado blog. Ao contrario de muitos sites de estátisticas que oferecem um serviço mais completo como o Histats o Revolver Maps oferece somente alguns gadgets e entre eles está o que é muito utilizado que é globo que mostrar os visitantes online e os locais dos mesmos. Outra coisa que achei bom é que não precisa de cadastro e instalação é muito simples.

Globo de visitantes online

Tutorial
1. Acesse a seguinte página: http://www.revolvermaps.com/?target=setup
2. Após entrar na página, selecione o globo que você deseja.
selecionando globo

3. Escolha as dimensões ( em pixels ) do gadget do globo terrestre.
configurando dimensões

4. Escolha a cor dos pontos de marcação dos visitantes online.
marcação dos visitantes online

5. Configure o seu gadget marcando as opções caso você queira mostrar os número de visitas ( visitor counter ), número de hits ( hits ), estrelas ao fundo do globo ( stars ) e escolha a versão em flash que você deseja que o seu globo utilize.
configurando gadget

6. Agora copie o código e coloque em um gadget de seu blog.
6.1. Faça login no painel de seu blogger
6.2. Clique na guia "Layout"
6.3. Clique em "Adicionar um gadget"
6.4. Clique em "HTML/JavaScript"
6.5. E cole o código do gadget e depois clique em "Salvar"

nRelate - Instalando Widget de Artigos Relacionados com Imagens em seu Blog

nRelate

Olá amigos, já fiz dois artigos aqui no blog mostrando dois sites que oferecem widgets de artigos relacionados o LinkWithin e o 2leep. Neste artigo venho mostrar o nRelate que é um ótimo site principalmente pela simples forma que ele oferece para a instalação do widget.
Como sempre costumo ressaltar uma das melhores formas de aumentar as visualisações de páginas de seu blog é por meio dos artigos relacionados que mostram artigos semelhantes ao que o visitante de seu blog está lendo.

Tutorial
Criando uma conta
Para utilizar do widget do nRelate é necessário que você possua uma conta no site, até porque ele oferece um painel para que você sempre que quizer modifique o widget.

1. Acesse a página de cadastro: https://partners.nrelate.com/register, preencha o formulário com suas informações em Accounte Details adicione seu nome de usuário ( ursename ),  email ( coloque um válido, pois é preciso a confirmação da conta ), senha, em Profile Details coloque seu nome, em Domain o url de seu blog e em Ad Code não coloque nada caso não utilize do wordpress.

2. Após isso clique em "Complete Sign Up"
criando uma conta no nrelate

3. Pronto sua conta foi criada, mas ainda é necessário que você confirme a criação da conta em seu email.
confirme seu email

4. Após acessar seu e-mail e confirmar a criação da conta você irá para a página de login, coloque o nome de usuário e a senha de seu cadastro e clique em "Log in".
faça login em sua conta

Adicionando widget ao Blogger
1. Agora no menu ao topo passe o mouse em cima do nome 'Manage Setting' vai abrir um menu em abas e clique em "Blogger"
escolendo platarforma de instalção do widget - Blogger

2. Vai abrir uma página onde é necessário que você coloque a url de seu blog e depois é só clicar em "Submit"
subimit - envie seu blog

3. Na página que abriu você vai escolher se o widget deve ficar somente nas postagens quando abertas em suas páginas idividuais ( Posts Only ), nas postagens individuais e também na página inicial de seu blog ( Posts and Homepage ) e em todo o blog ( All blog section ). Eu aconselho colocar somente nas postagens individuais ( Posts Only ) pois algumas templates ficam bugadas ao colocarem o widget em todo o blog, lembrando que você pode remover o widget tranquilamente no layout do blogger.
formas do widget de artigos relacionados

4. Após clicar no que você preferir vai abrir uma nova aba/guia com uma página do blogger para que você adicione o widget, selecione o blog desejado e clique em "Adicionar widget"
adicionar widget no blogger

Pronto o widget de artigos relacionados do nRelate foi  adicionado a seu blog. Caso você queira personalizar o widget acesse a seguinte página: https://partners.nrelate.com/blogger/blogger-settings

Artigos Relacionados - nRelate


Espero que tenham gostado do artigo, até a próxima!

Coloque o Google Translate em seu Blog

Google Translate - Tradutor
Para tornar seu blog mais acessível para pessoas de outros países é necessário o uso de algumas ferramentas, entre elas eu recomendo um tradutor do Google Translate em seu blog. Neste artigo vou mostrar como colocar esse tradutor em seu blog de forma rápida e fácil.
widget google translate

Atualização: O Blogger adicionou o gadget do Google Tradutor a sua plataforma, clique aqui para saber mais.
Tutorial
1. Acesse a seguinte página: http://translate.google.com/translate_tools
2. Agora você vai configurar os recursos do widget.
configurações google translate

3. Na página que abriu na 'Etapa1' clique em "Adicione tradução a toda a página da web"
4. Na  'Etapa 2' selecione o idioma de seu blog.
5. Na 'Etapa 3' clique sobre "Mostrar configurações opcionais" para configurar algumas opções. Isso é por sua conta, você pode escolher se quer que o widget do Google Translate utilize de todos os idiomas ou só dos que você selecionar. Existem 3 modos de exibição 'Em linha', 'Tabulado' e 'Automático' ao lado o widget faz uma auto-demonstração para que você veja qual o melhor para o seu blog, configure também o 'Avançado' caso queira.
6. Após a configuração clique no botão "+ Add to Blogger" e adicione o widget em seu blog. O posicione da forma desejada e salve seu layout.
add blogger
7. Caso você queira o adicionar manualmente copie o código oferecido na 'Etapa 4' e cole em um gadget de seu blogger.
7.1. Acesse o painel de seu blog
7.2. Clique na guia "Layout"
7.3. Clique em "Adicionar um gadget"

google translate no blog
Desenvolvendo Blogs - em árabe

LinkWithin - Artigos Relacionados com Imagens

linkwithin

O site LinkWithin oferece um serviço de artigos relacionados ao rodapé das postagens. Ele gera um widget para ser adicionado a seu blog de forma rápida e fácil.
Todos sabemos a importância de melhorar o tempo de navegabilidade dos visitantes em nossos blogs, e uma boa forma de fazer isso é apontando links para as outras postagens, o LinkWithin cumpre muito bem isso e ainda é bem aperfeiçoado pelo motivo das imagens ( thumbnails ) de demonstração dos artigos relacionados.
artigos relacionados


Tutorial
1. Acesse o site LinkWithin.com
2. E na direita preecha os campos solicitados.
  • Email coloque seu e-mail;
  • Blog Link coloque a url de seu blog;
  • Plataform Escolha a plataform em que você vai adicionar o widget. No caso deste tutorial Blogger;
  • Width escolha o número de artigos relacionados que você quer exibir ao rodapé dos posts.

Se o fundo de seu blog ( background ) for da cor preta, e as fontes com cores claras, marque a caixa "My blog has light text on a dark background".


3. Agora clique em  "Get Widget!"
get widget

4. Irá abrir uma página com o tutorial em inglês, dê uma olhada já para você ter uma idéia, mas aqui neste tutorial explicarei tudo de qualquer jeito.
Na página que abriu clique no link "Install Widget" no passo 1.
install widget

5. Você será redirecionado para uma página do blogger para que você adicione o widget. Na página que abriu escolha o blog que você vai querer o widget e clique em "Adicionar Widget"
adicionar widget no blogger

6. Agora arraste o widget para baixo das 'Postagens no blog' e clique em "Salvar".
gadget abaixo das postagens


Pronto o widget foi adicionado.

OBS: Desta forma os artigos relacionados irão aparecer em todas as postagens e inclusive na página inicial de seu blog ( home ), além de todas as outras páginas. E alguns templates não são compátiveis com o widget desta forma. Também alguns blogueiros que utilizam do widget não o querem em todas as postagens, mas sim somente quando se abrir individualmente o artigo.
Para solucionar isto basta seguir o tutorial abaixo.
artigos relacionados bugados


Colocando widget nas páginas individualmente
1. Acesse o seu blog e clique na guia "Modelo".
2. Procure pelo trecho abaixo ( Ctrl+F ):
<p class='post-footer-line post-footer-line-3'/>
3. Abaixo deste trecho adicione o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
CÓDIGO DO LINKWITHIN 
</b:if>
4. Abra uma nova guia em seu navegador e acesse o Layout de seu blog, no widget do LinkWithin, clique em "Editar" e copie o código dele. Após isso substitua o CÓDIGO DO LINKWITHIN, pelo código do widget.
código do linkwithin

2leep - Artigos relacionados com imagens para seu blog

2leep

A utilização de artigos relacionados abaixo de suas postagens hoje em dia é uma das melhores maneiras de estimular a navegação e com isso mais páginas vistas em seu blog. Fazendo com que os visitantes visualizem mais artigos semelhantes aos que acabaram de ler. Isso também pode ser uma boa forma de gerar mais renda para seu blog, pois muitos programas de afiliados pagam também por visualizações e não só por cliques, vendas, etc.
O site 2leep oferece um widget de artigos relacionados com imagens, muito fácil de ser adicionado em seu blog, personalizável e que possue um ótimo painel de controle que mostra as visualizações e cliques que o widget recebeu.

Tutorial
Personalizando o widget e criando uma conta
1. Acesse o site get.2leep.com e clique em "obter um widget".
obter um widget

2. Abaixo vai aparecer um campo onde você deve colocar a URL de seus feeds rss. e depois clique em "próximo".
feeds posts rss

Se você não sabe a url de seus feeds rss, bas inserir após o link de seu blog, esse trecho: feeds/posts/default?alt=rss, ex: http://www.desenvolvendoblogs.com/feeds/posts/default?alt=rss, caso utilize o blogger.
feeds rss
Clique na imagem para ampliar.
3. O 2leep vai analisar todos os artigos de seu blog, por meio de seu feed.
analisando feed

4. Escolha o formato do widget de posts relacionados. E depois clique em "próximo"
personalizano widget 2leep

5. O cadastro no site é fácil, é só colocar seu email e sua senha ( palavra-passe ), não precisa nem confirmar em seu email. Após isso clique em "registre-se"
registrando uma conta no site 2leep

6. Personalize o widget, cuidado com o tamanho e o número de artigos relacionados para não ficar cortando o widget quando você o colocar no blog. E depois clique no logotipo do Blogger, acima do código do widget.
blogger

Instalando o widget
1. Após clicar no logotipo do Blogger como mostra a imagem acima, vai abrir um box ensinado como o colocar em seu blogger, mas está em inglês, por isso vou mostrar aqui em português :)
2. Clique no link "install widget" que está no passo 1 do box que abriu.
box para adicionar o widget

3. Vai abrir uma página no Blogger como essa da imagem abaixo, para que você adicione o widget, clique em "Adicionar Widget"
autorizando widget no blogger
4. Pronto o widget já está em seu blog.
OBS: Coloque o widget abaixo das "Postagens no blog"
postagens no blog

Pronto pessoal, o widget foi adicionado.
Artigos relacionados 2leep


Analise a influência do widget ( artigos relacionados ) em seu blog.
Como eu disse no começo do artigo o site 2leep possue uma página de estátisticas com as visualisações e cliques dados no widget. Isso é muito útil onde você pode acompanhar se o widget faz efeito em seu blog.
Acesse o Painel de Controle ou o Dashboard do 2leep: get.2leep.com/dashboard/
dashboard do 2leep


Acabo aqui mais um tutorial, espero que gostem, o widget é muito bom e eu gostei muito das opções de personalização que o 2leep oferece. O tutorial ficou um pouco extenso porque gosto de utilizar de muitas imagens, para que não haja dúvida.