Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1503007350
Vida do cache: 1503050550
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Widget de Boas Vindas e Feed no Blogger

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



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

4 Comentários

  1. Batalha Vips disse:

    Dica maravilhosa, já coloquei esse Widget no meu Blog 😀

  2. Fabio disse:

    sii retirar os creditos do codigo funciona ?

  3. Avelino disse:

    OLá Clau!

    Instalei está tudo ok mais como faço para tirar a borda do widget pois quando fecha fica a borada do widget,não sei se é porque estou logado,desculpe a pergunta besta!!rsrs

    Abraços!

  4. Cáh disse:

    Oi! Eu amo esse blog, me ajuda muito ^-^ Eu queria saber se você podia dar umas dicas de LiveBlogging… Obrigada :*

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.