[Atualizado] Colocar Identificador de IP, Navegador e S.O no Blog

Por:

| 10 de dez de 2015

E ae pessoal, blz?

Depois de muito tempo sem postar algo, hoje venho trazer à vocês uma novidade muito bacana...
Um "Widget Identificador de IP, Navegador e Sistema Operacional" que é disponibilizado pelo site Localizaip.com,  e que você pode personalizar e implementar no seu blog. Legal né?

Pois bem, vou ensinar agora como vocês podem estar colocando esta ferramenta em seus blogs.

Importante:
Antes de colocar este Widget em seu blog, leia os Termos de Uso e Política de Privacidade do site "Localizaip.com" para não correr o risco de ser 
impedido de usá-lo por algum desrespeito às regras do site detentor do 
widget.


Tutorial:

Primeiro acesse o link: http://www.localizaip.com/widget/

Lá você verá uma tela semelhante à esta:



Nesta tela há vários campos, onde você pode escolher cores, dimensões e funcionalidades do widget.
Tudo é bem intuitivo, então basta alterar e clicar em "Atualizar Pré Visualização"  para ver as alterações em tempo real. (ver imagem abaixo)




Após fazer todas as personalizações, é hora de obter o código para implementar o widget em seu blog. Para isso, clique no botão "Incorporar no Site", e copie o código HTML que aparece na "caixa de diálogo" (lightbox).




Mantenha essa janela aberta, e em uma nova aba do navegador, abra o painel administrativo do Blogger.

Vá em Layout e clique em "Adicionar um Gadget", e escolha o Gadget "HTML/Javascript".

 


Cole o código HTML obtido no site Localizaip.com  conforme imagem abaixo, e em seguida clique em "Salvar":




O resultado final pode ser visto na imagem abaixo, ou no canto direito da nossa página de testes: http://novotestebf.blogspot.com.br/ 






Leia mais ›

Caixinha link-me para blog

Por:

| 19 de jul de 2012

Este gadget exibe o banner do seu blog junto com o código html de incorporação para que outras pessoas possam linkar seu blog e assim ajudar na sua divulgação através de parcerias e etc... O método de instalação é bem simples, sem falar que o gadget é super fácil de configurar, pois não exige nenhum conhecimento em códigos html. A instalação deste widget é feita diretamente pelo próprio Blogger, acompanhe o tutorial.

Antes de iniciar o tutorial você deverá já ter criado o banner do seu blog, que deve estar preferencialmente no tamanho 120x60 pixels. Tendo feito isto, deve hospedar a imagem do seu banner em algum lugar público da web. caso não saiba como hospedar imagens na internet, leia este artigo.

Tutorial

Na Nova Interface do Blogger, vá em Layout e clique em "Adicionar um Gadget".
na janela que se abriu, clique em "Adicionar seu próprio" como se vê na imagem abaixo.

No campo onde está escrito http:// cole a seguinte URL:

http://gadgets-lab.googlecode.com/files/gadget_linkme_1.0.xml

Em seguida, clique em Adicionar por URL.
Você será redirecionado para esta outra janela.


Nesta tela que aparece, você poderá configurar o gadget com as suas preferências.
Preencha os seguintes campos!

Titulo - Titulo de exibição do gadget.
Altura - (não é necessário alterar nada)
Nome do Blog - Troque o padrão pelo nome do seu blog.
URL do Blog - Coloque o link do seu blog, no lugar do link que aparece.
URL da Imagem que será usada - Altere o link padrão pelo link do seu banner que deve estar hospedado na web.



Centralizar o gadget - Deixe marcado para que o gadget fique centralizado, ou desmarque para que ele fique alinhado á esquerda.
Exibir Créditos (Opcional) - Deixe marcado para exibir um link discreto para este blog logo abaixo do gadget.

Após preencher todos os campos, clique em Salvar.
Pronto!

O resultado final você pode conferir neste link.

Leia mais ›

Colocar icones das redes sociais no blog (Atualizado)

Por:

| 25 de jun de 2012


E ae pessoal, blz?
Hoje trago à vocês leitores uma novidade na qual estive trabalhando nos ultimos dias, que é um gadget personalizável com icones das principais redes sociais conhecidas.
A instalação deste gadget é super simples, pois você não precisará Editar HTML, ou coisas do tipo. Acompanhe!

Tutorial

Na nova Interface do Blogger, vá em: Layout

Clique em Adicionar um Gadget, em seguida clique em Adicionar seu próprio.

Aparecerá esta tela.


Insira a seguinte URL (link) no campo que aparece.

http://gadgets-lab.googlecode.com/files/icones-sociais-3.xml

e clique em "Adicionar por URL".

Você será direcionado para uma página de configuração do gadget.



Nesta página vc pode definir:
- Um "Titulo" para exibição de seu gadget.
- A "Altura" do widget que deve estar em pixels.
- Quais icones serão exibidos no gadget, sendo que para isto, basta marcar ou desmarcar a opção com o nome da rede social.

Logo abaixo de cada opção de rede social, há um campo para você colocar o link do seu respectivo perfil. Altere este campo!
Desssa forma, quando alguém clicar em um icone de rede social, será direcionado para o link do perfil social que você definiu.
Caso você não defina um link, será exibido um link padrão.

Por fim, você tem a opção de exibir ou não os créditos do gadget, que foi criado por mim.
Caso opte por exibir os créditos será exibido um pequeno link para este blog, logo abaixo do gadget. Mas como eu disse, isso é opcional. :D

Após fazer as alterações, clique em Salvar.
Pronto, seu gadget irá aparecer no seu blog.

Obs: É possivel que apareça uma barra de rolagem no gadget, dependendo de quantos icones você escolher exibir, para ocultar a barra de rolagem, basta clicar em editar o gadget e ir aumentando em pixels a sua altura.
Leia mais ›

Mostrar postagens recentes por categoria no blog

Por:

| 28 de nov de 2011

Através deste tutorial você aprenderá como exibir os posts mais recentes de uma determinada categoria em seu blog.
Em outro post aqui do blog já havia ensinado como exibir os posts mais recentes do blog, porém eles não eram divididos por categoria como neste caso.
O processo é bem simples. Acompanhe!
Tutorial

Na nova interface do Blogger, vá em Layout e clique em Adicionar um Gadget .
Escolha o gadget Feed.
(clique nas imagens para ampliar)



Em URL do feed cole o seguinte código:

http://seublog.blogspot.com/feeds/posts/default/-/CATEGORIA?orderby=updated&max-results=1000 


Altere o trecho seublog pelo endereço (URL) do seu blog.
Modifique também o trecho CATEGORIA pelo nome de exibição da categoria que desejar.

Obs: o nome deve ser igual ao que está na URL da categoria.
Ex:
Categoria: Dicas para blogs
URL: http://www.blogandofacil.com.br/search/label/Dicas%20para%20blogs

Note que existem uns caracteres estranhos entre as palavras Dicas para blogs na URL da categoria. Estes caracteres caso existam nas categorias do seu blog, devem ser mantidos na hora de alterar o código acima.

Ex:
http://www.blogandofacil.com.br/feeds/posts/default/-/Dicas%20para%20blogs?orderby=updated&max-results=1000

Após colar o código em URL do feed e alterar os trechos necessários, clique em Continuar.
Irá aparecer a seguinte tela.



Em Titulo, coloque o nome que quiser. Pode ser por exemplo o nome da categoria.
Em Exibir você pode definir a quantidade de posts que seão exibidos (no máximo 5 posts).

Após fazer as alterações no gadget, clique em Salvar e arraste o gadget para o local que quiser em seu blog. O resultado pode ser visto nesta página de testes:
http://novotestebf.blogspot.com/ 

Pronto!
Leia mais ›

Meta tag Keywords diferente em cada post

Por:

| 28 de set de 2011


Tempos atrás mostrei em um tutorial como colocar Meta tag de descrição diferente em cada post. Na ocasião a leitora Renata Fraia me perguntou se poderia usar o mesmo exemplo citado no post, porém com a meta tag de keywords (palavras-chave).
Como o método é um pouco diferente, resolvi criar este post para tirar a duvida da Renata e de outras pessoas.
Hoje ensinarei como colocar meta tag de keywords diferente em cada post de forma automática. Acompanhe!

- Inserindo meta tag de keywords diferente em cada post

Na Nova Interface do Blogger, vá na opção Modelo / Editar HTML.
Irá aparecer uma caixa com uma mensagem, clique em 'Prosseguir'.

Caso ainda esteja usando a interface antiga, vá em Design / Editar HTML.

Utilizando as teclas Ctrl+F do seu teclado, procure pelo seguinte trecho:

<b:skin><![CDATA[/*

Cole logo acima deste trecho o seguinte código:

 <b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='Keywords'/>
</b:if>

Caso não tenha encontrado o trecho citado acima, cole em qualquer lugar entre <head> e </head> .
Salve o modelo!
Pronto, agora as meta tags de keywords irão ser geradas de forma automatica, ficando diferentes em cada post.

Lembrando que a tag de keywords só irá aparecer nos posts individuais, e não na página inicial.


- Inserindo meta tag de keywords somente na página inicial

Caso queira colocar meta tag com keywords exclusivas na pagina inicial, use este outro código:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta content='palavras chave separadas por virgula' name='Keywords'/>
</b:if>


O modo e lugar para inserir o código é o mesmo usado acima.
Não esqueça de trocar o trecho em vermelho pelas palavras que queira usar como palavras-chave.

Obs: O Google deixa bem claro que não usa meta tag de keywords para definição de page rank, ou seja, colocar um site a frente nos resultados de busca, porém você pode usar esta meta tag para que seja detectada por outros motores de busca. Use com moderação! 
Imagens: www.google.com.br
Leia mais ›

Efeito mostrar e ocultar os comentários do blog com botão

Por:

| 26 de set de 2011

Depois de ficar um tempo sem postar, hoje trago uma dica que encontrei no blog do Maujor, onde ele usa um efeito chamado 'Box Toggle' para esconder e mostrar objetos.
Adaptei o código que ele postou em seu tutorial para ser usado para exibir e esconder os comentários dos posts do Blogger apenas clicando em um botão (link). Ver exemplo
Confira o tutorial.

Obs: Para este tutorial usaremos o plugin da Bliblioteca JQuery 1.3.1, portanto caso tenha ela ou uma versão posterior da mesma já adicionada em seu blog não será necessário adicioná-la novamente.

Antes de fazer qualquer alteração, faça um Backup do seu template.  

Na Nova Interface do Blogger, vá na opção Modelo / Editar HTML.
Irá aparecer uma caixa com uma mensagem, clique em 'Prosseguir'.

Caso ainda esteja usando a interface antiga, vá em Design / Editar HTML.

Utilizando as teclas Ctrl+F do seu teclado, procure pelo seguinte trecho:

</head>

Cole logo acima o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<style>
#box-toggle span{font:bold 15px Arial;color:#282828; display:block; cursor:pointer;}
</style>
<script type='text/javascript'>

/*
 * Tutorial original:
 * http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder
 *
 * Créditos do plugin:
 * http://mattkruse.com
 *
 * Adaptado para Blogger por:
 * http://www.blogandofacil.com.br
 *
 * Mantenha os Créditos
 */

jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp(&quot;(&quot;+a+&quot;|&quot;+b+&quot;)&quot;),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
    $(&#39;.tgl&#39;).before(&#39;<span>Mostrar depoimentos</span>&#39;);
    $(&#39;.tgl&#39;).css(&#39;display&#39;, &#39;none&#39;)
    $(&#39;span&#39;, &#39;#box-toggle&#39;).click(function() {
        $(this).next().slideToggle(&#39;slow&#39;)
        .siblings(&#39;.tgl:visible&#39;).slideToggle(&#39;fast&#39;);
  
        $(this).toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
        .siblings(&#39;span&#39;).next(&#39;.tgl:visible&#39;).prev()
        .toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
    });
})
</script>

Salve o Modelo!

Agora marque a opção 'Expandir Modelos de Widgets' e procure por este trecho:

<div class='comments' id='comments'>

Logo acima do trecho cole estas duas linhas:

<div id='box-toggle'>
<div class='tgl'>

Não tente salvar ainda ou dará erro!
Procure também pelo trecho:

<div id='backlinks-container'>

Logo acima cole estas outras duas linhas:

</div>
</div>

Agora sim... Salve o Modelo!

Se você fez tudo certinho como descrito no tutorial, ao entrar em uma postagem, não aparecerá o corpo dos comentários, mas sim um link escrito 'Mostrar Depoimentos'.
Clique neste link para exibir ou ocultar os comentários.

Pronto!

Obs: Se quiser pode substituir a palavra 'depoimentos' que está destacada em vermelho dentro do código pela palavra 'comentários'.
Créditos da imagem: http://psdstyle.net/2011/01/17/comments-icon-free-icon-template/
Leia mais ›

Colocar nome do autor e data abaixo do titulo do post

Por:

| 23 de ago de 2011

Neste tutorial ensinarei como colocar o nome do autor e a data abaixo do titulo do post , o que torna mais fácil aos leitores saber por quem e quando o artigo foi escrito logo no início das postagens. Acompanhe!

Tutorial

Acesse o painel do blogger.
Vá em Design / Editar HTML e marque a opção Expandir modelos de widgets.
Utilizando as teclas CTRL+F procure pelo seguinte trecho:

Modelos novos do Blogger


<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

ou em Modelos antigos do Blogger

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

Selecione e apague todo o trecho em vermelho. Salve o modelo!

Novamente vá em Editar HTML, clique em Expandir modelos de widgets e procure pelo trecho:

Modelos novos do Blogger

<b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

ou em Modelos antigos do Blogger

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Selecione e apague o trecho destacado em vermelho. Salve o modelo novamente!

No ultimo passo, ainda na opção Editar HTML marque a opção Expandir modelos de widgets e procure pelo trecho:

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

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>

Logo abaixo da seguinte linha...

   <div class='post-header'>

Cole todo este código:

<!--Autor e data-->
<div style='display:inline;width:auto;color:#999;font:normal 10px Arial;'>
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>
<b:if cond='data:post.dateHeader'>-
<data:post.dateHeader/>
        </b:if>
</div><p/>
<!--Fim -->

Salve o modelo e pronto!
Leia mais ›
- Topo