• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Este Widget permite mostrar uma mensagem de saudação diferente para os seus visitantes para cada origem , dependendo da sua URL de referência.

Veja DEMO

Por exemplo, quando visitantes chegam ao seu blog através do google, eles visualizarão uma mensagem sugerindo a eles para assinarem o seu feed RSS.
Exibe também para visitantes vindos de outros sites, como BlogsBlogs, Technorati, Facebook, Twiiter etc.
Com este Widget, seu visitante verá uma imagem e uma mensagem de saudação diferente dependendo do URL de referência, acompanha um conjunto de ícones dos principais sites e redes sociais.
O Widget pode ser inserido em qualquer lugar, no seu blog, mas eu recomendo que a instalçao seja feita na parte superior, bem acima da coluna de postagens.
O script original foi desenvolvido por Classic Tutorials e foi modificado e traduzido por mim.
A instalação é super simples e fácil, e você verá logo abaixo como proceder.

1. Configurar o local onde o widget será instalado – Acima da coluna de postagens:

Para instalar o widget acima da coluna de postagens, antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possiblidade de adicionar um gadget acima da coluna de postagens, através de “Elementos de Página”.
Se não houver, você terá que fazer algumas modificações no código.

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets” e procure por:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Onde está escrito showaddelement=’no’ troque por showaddelement=’yes’e salve as modificações.

Se você retornar em “Elementos de Página” verá um campo para “Adicionar Gadget” bem acima da coluna de postagens do blog, é lá que você irá colar o código do Widget de Boas Vindas que você vai instalar.

(Veja imagem)

2. Instalando Código do Widget:

Ainda na aba “Design” >>”Elementos da página”, no campo acima da coluna de postagens, clique em “Adicionar um Gadget” e Selecione a opção “HTML/JavaScript” e cole o seguinte código dentro dele:

<script src="http://widgetboasvindas.googlecode.com/files/GreetBox.js" type="text/javascript"></script>
<div id="mainDisplayDiv" style="background:#fff;border:1px solid #B6AFA9;margin:0 auto 50px auto;display:none">
<div style="float: right; margin-right: 5px; margin-top: 5px;">
<a href="#" onclick="closeGreetBox('7')">
<img border="0" alt="x" src="http://lh4.ggpht.com/_UCfxgWHzU98/S21DcwKbx9I/AAAAAAAAByU/XVXEvhvu7rA/closeicon.gif" />
</a>
</div>
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "URL-DO-SEU-FEED-AQUI";
var dynamicHTMLText = displayRequiredText(feedURL); document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
</script>
</div>
<script src="http://widgetboasvindas.googlecode.com/files/Hideshow-v03.js" type="text/javascript">
</script>
<script type="text/javascript">
showHideDiv();
</script>

Salve.
Não esqueça de acrescentar a url do seu Feed no local destacado.

Você pode personalizar alguns elementos como o background e bordas:
Alterar cor de fundo: altere o código referente a cor em “background”.
Alterar borda: edite a cor da borda se quiser, ou se preferir retirar a borda, basta apagar a linha -> border:1px solid #B6AFA9;

Agora faça um teste: vá até o google e pesquise algum termo ou pela url do seu blog, clique no link do resultado da busca que redirecionará para seu blog e veja o que acontece com script. Agora, tente o mesmo com a busca do Yahoo e veja as mudanças da mensagem.

Este Widget não é compatível apenas com o Blogger, é compatível com WordPress ou qualquer outro site ou blog onde possa utilizar HTML/JavaScript. Portanto, use-o onde você preferir.

Fonte:Classic Tutorials

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn