Inque

0

jQuery: Saudar os visitantes do blogue


No outro dia andava a procurar algo irrelevante para este artigo, quando me deparei com um script à base de jQuery que saudava os visitantes conforme a sua proveniência.
Então o script é utilizado para detetar de onde vêm os visitantes do teu blogue ou website e cumprimenta-os com uma mensagem baseada na sua proveniência.
Por exemplo, quando um visitante chega aqui pesquisando algo no Google, é recebido uma mensagem personalizada como utilizador desse motor de pesquisa.

NOTA: Como mencionei, este script necessita do jQuery para funcionar, por isso este deverá estar instalado no blogue!
Caso ainda não o tenhas no blogue, podes ler aqui Como colocar jQuery num blogue.

Continuando... quando encontrei esse script, pesquisei um pouco mais porque para considerar colocar algo desse tipo aqui ou noutro blogue meu, precisava duma maneira de evitar que se tornasse uma irritação para o visitante.
E foi assim que descobri uma outro script que também saudava o visitante, embora fosse só a quem vinha dum lugar específico, mas que funcionava com um cookie, o que fazia com que o visitante só visse a saudação uma vez a cada 7 dias.

Pode-se dizer que misturei os dois scripts para criar um que servisse o que eu queria. :D
Para efeitos de teste, por enquanto somente vou colocar o script nesta página.

Se ainda não viste a mensagem, e como o script utiliza um cookie para que a saudação só apareça uma vez a cada 7 dias, clica aqui para reiniciar o cookie, recarregar a página, e puderes ver a saudação. ;)

Como personalizei o script para mim, incluí o Feedly, que é um agregador de feeds onde tenho a minha lista de locais que gosto de ler, e também o Nexus Mods porque uma das opções que tenho em mente para este script poderá ser para colocar na página onde partilho os Meus Mods porque recebo muitos visitantes através do meu perfil lá...
O código completo consiste num pouco de CSS para estilizar a mensagem e utiliza o jQuery para definir o cookie e mostrar a mensagem, neste caso, ao cimo da página.

Vou publicar a seguir o código completo com os respectivos comentários para que possam saber como e onde editar para o personalizarem se desejarem dar uma nova aparência à mensagem em si, ou se quiserem alterar os locais que vos enviam visitantes a cumprimentar com uma mensagem especifica.

Atenção: Tanto os estilos no CSS como as definições no script a seguir foram personalizados com o MEU BLOGUE em mente, é muito provável que tenhas que alterar algumas coisas para se ajustar às necessidades do teu blogue.

ver código
imprimir?
01<style type="text/css"> /*inicio da tag style*/
02#greeting { /* Define a aparência da div que contém a tua mensagem de saudação  */
03    background: rgb(0,0,0); /*cor de fundo substituta para navegadores que não suportam rgba*/
04    background: rgba(0,0,0,0.9); /*cor de fundo com opacidade para os navegadores modernos*/
05    top: -80px; /*esconde a mensagem de saudação acima da janela do browser até que seja necessário - repara no número*/
06    color: #fff; /*cor da letra da mensagem*/
07    display: none; /*esconde a mensagem até que o script altere este estado*/
08    font-family: Tahoma, Geneva, sans-serif; /*tipo de fonte*/
09    font-size: 1em; /*tamanho da fonte*/
10    height: 79px; /*altura da div que contém a mensagem -- deve ser ligeiramente inferior os número em top: xxpx*/
11    position: fixed; /*posição da mensagem, neste caso fixado ao cimo da janela do navegador*/
12    width: 100%; /*largura da div que contém a mensagem*/
13    z-index: 999999; /* este número faz que que a mensagem se sobreponha aos outros elementos presentes na página*/
14}
15#greeting .msg_img { /* Define a div com a imagem que acompanha a tua mensagem  */
16    width: 70px; /*largura da div da imagem*/
17    height: 70px; /*altura da div da imagem*/
18    display: inline-block; /*aparece num bloco alinhado com o texto*/
19    margin: 0 10px; /*margem de 10px para os lados*/
20    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4hnyGCL5nCr_KpayRuLWysJED6bwdlP-MV3Wgj1QPIl6KPBRbEnfqan-Krr4w6Et22WWPFQVql6WE18s1zme9hrZ7qTgIINtGaJGZV818iWrQFQr5VqsAqtW3x_6LMx-tPjNwznrPzQNxJNUsbSkFDD5JVrVMl9mXLXzxWYMwNKD4Mmkrr-LBmYZUIq2/s618/wave36.gif) no-repeat 50% 50% /contain; /*a imagem propriamente dita que vai surgir ao lado da mensagem de saudação -- ATENÇÃO, o endereço da imagem neste código é o que utilizo neste exemplo mas RECOMENDO que alterem para uma vossa porque posso decidir eliminar esta imagem em qualquer momento futuro*/
21}
22#greeting p { /*define como vai parecer o texto da saudação*/
23    margin: 20px 0 20px 5px; /*margens do texto*/
24    display: inline-block; /*aparece num bloco alinhado com a imagem*/
25    vertical-align: top; /*alinhado ao cimo*/
26    font-family: 'Metamorphous'; /*fonte do texto, no caso do Google Fonts: https://fonts.google.com/specimen/Metamorphous */
27    font-weight: 600; /* dá um pouco de negrito à fonte*/
28    line-height: 200%; /*define a distância entre as linhas de texto*/
29}
30#greeting .img_emo { /*span que contém um emoticon no fim do texto da saudação: <span class="img_emo">:)</span> -- caso não desejes colocar este ou outro emoticon, podes remover esta parte do CSS e a respectiva span no script abaixo*/
31    width: 32px; /*largura da div do emoticon*/
32    height: 32px; /*altura da div do emoji*/
33    display: inline-block; /*aparece num bloco alinhado com o texto*/
34    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMLsbGhCNO793YJkWrCWoF-X3sdTf6OwC16_Z47tItlSXtMhILNX-FHK318FHkYuIX7uVLElqA-SKGtQYJdfks6d6ZK7B530B-J5U-7MQGlGsWLRLq1zpIptz-_ns_mlUJ2kF9Rf10IHHs3y-le4cWGapYfzIj0SPmyPBhKr_H2ob_eAxm1OLaT8cs_UQ/s45/gentleman.gif) no-repeat 50% 50% /contain; /*o emoji que vai surgir ao lado da mensagem de saudação -- ATENÇÃO, o endereço da imagem neste código é o que utilizo neste exemplo mas RECOMENDO que alterem para uma vossa porque posso decidir eliminar esta imagem em qualquer momento futuro*/
35    overflow: hidden; /*esconde tudo o que sai fora das dimensões da span*/
36    text-indent: -35px; /*move o texto da span [:)] para fora da mesma para o ocultar*/
37    vertical-align: baseline; /*alinha a span à base em relação ao texto*/
38    filter: drop-shadow(0 0 20px #fff); /*dá uma aura de luz em redor do emoji*/
39}
40#greeting .close-button { /*estilos do botão para fechar a mensagem de saudação*/
41    cursor: pointer; /*tipo de cursor ao passar o rato*/
42    font-weight: bold; /* dá um negrito ao texto*/
43    margin: 5px 20px 5px 5px; /*margens do botão fechar*/
44   
45    position: absolute; /*posição do botão em relação à div da mensagem*/
46    right: -8px; /*posição à direita*/
47    bottom: -20px; /*posição em baixo*/
48    z-index: 10; /*faz com que o botão se sobreponha à div da mensagem*/
49    background: #fff; /*cor de fundo do botão*/
50    border-radius: 4em; /*cria o redondo do botão*/
51    height: 30px; /*altura do botão*/
52    width: 30px; /*largura do botão*/
53    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*pequena sombra em redor do botão*/
54}
55#greeting .close-button:before { /*símbolo X do botão utilizando a FontAwesome: https://fontawesome.com/search */
56  position: absolute; /*posição do símbolo */
57  left: 50%; /*esquerda*/
58  top: 50%; /*cimo*/
59  font-family: FontAwesome;
60  content: "\f00d"; /*unicode do icone*/
61  color: #000; /*cor do texto*/
62  font-size: 25px;/*tamanho do texto*/
63  transform: translate(-50%, -50%); /*posição na direção horizontal e/ou vertical*/
64}
65#greeting .close-button:hover:before { /*Estilos do símbolo ao colocar o rato em cima do botão*/
66  color: #b34; /*cor do texto*/
67  transition: background 350ms cubic-bezier(0.42, 0, 0.58, 1) 10ms, all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms; /*transição da cor do texto*/
68  transform: translate(-55%, -48%) rotate(-0.25turn); /*reposiciona na direção horizontal e/ou vertical e roda o símbolo*/
69}
70#greeting .close-button span { /*span que contém o texto no botão*/
71    display: none; /*esconde o texto*/
72}
73</style> /*fecho da tag style*/
ver código
imprimir?
001<script type="text/javascript"> /*inicio da tag script*/
002/* !!!CRÉDITOS DO(S) AUTOR(ES) DO SCRIPT--NÂO RETIRAR!!!
003JavaScript for the demo: Referrer Specific jQuery Greeting
004Author: Ian Lunn
005Author URL: http://www.ianlunn.co.uk/
006Demo URL: http://www.ianlunn.co.uk/demos/referrer-specific-jquery-greeting/
007Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/referrer-specific-jquery-greeting/
008License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
009*/
010// URLs usando expressões regulares que queres que o script detecte
011var msgs = [
012// null url : tráfico directo
013{'url':null, 'msg':'Olá. Fico contente que ainda te lembres do meu blogue, disfruta da visita <span class="img_emo">:)</span>'}
014// A url do MEU blogue para que a mensagem não apareça a quem passeia pelas páginas do mesmo, precisas alterar conforme o teu blogue!
015,{'url':/^https?:\/\/([^\/]+\.)?cqapa\.blogspot\.com/,    'msg':null}
016// URLs com mensagens personalizadas
017,{'url':/^https?:\/\/([^\/]+\.)?google\.com/,      'msg':'Bem-vindo/a através do Google, espero que encontres o que procuras <span class="img_emo">:)</span>'}
018,{'url':/^https?:\/\/([^\/]+\.)?bing\.com/,         'msg':'Bem-vindo/a através do Bing, espero que encontres o que procuras <span class="img_emo">:)</span>'}
019,{'url':/^https?:\/\/([^\/]+\.)?feedly\.com/,         'msg':'Bem-vindo/a do Feedly, espero que gostes do que encontras aqui <span class="img_emo">:)</span>'}
020,{'url':/^https?:\/\/([^\/]+\.)?nexusmods\.com/,      'msg':'Bem-vindo/a do Nexusmods, espero que encontres aqui o mod que procuras <span class="img_emo">:)</span>'}
021//padrão genérico: para mostrar uma mensagem genérica aos visitantes para os quais não especificaste uma proveniência
022// URLs genéricas
023,{'url':/^https?:\/\//,               'msg':'Olá. Bem-vindo/a... Espero que encontres aqui o que procuras <span class="img_emo">:)</span>'}
024]; 
025function findMatch(ref) {
026for(var i=0; i<msgs.length; i++)
027if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
028return msgs[i].msg;
029return null;
030}
031 
032$(document).ready(function() {
033 
034    //$.cookie("greeting", null); //<-- remove o comentário(//) se quiseres eliminares o cookie enquanto testares o script
035     
036    if($.cookie("greeting") != "off"){ //se a saudação não tiver sido mostrada ou desactivada previamente...
037     
038      var referrer = document.referrer.toLowerCase(); //detecta o referenciador e converte-o em minúsculas
039 
040      var msg = findMatch(referrer);
041         
042            img = '<div class=\"msg_img\" />'; //esta é a div que vai conter a imagem que acompanha a tua mensagem - imagem essa que será definida no CSS          
043             
044            $('body').append("<div id=\"greeting\"><div class=\"close-button\"><span>Close X</span></div>" + img + "<p>" + msg + "</p></div>"); //anexa a mensagem antes do fecho da tag </body>
045            $('#greeting').css( "display", "flex" ); //altera o estado da div de saudação para display: flex (e revela-a)
046            $('#greeting').animate({top: '+=80'}, 1000); //anima a div #greeting para que se mova ao aparecer -- repara no número que deve coincidir com o que colocas em top: xxpx no CSS
047            $.cookie("greeting", "off", { expires: 7}); //define um cookie para que a saudação não apareça uma segunda vez, ou no caso antes de passados 7 dias
048         
049    }
050     
051    $(".close-button").click(function() { //se clicarem no botão para fechar a div...
052      $("#greeting").animate({top: '-=100'}, 1000); //anima a div #greeting para que se mova, no caso 100px, para fora da janela do navegador
053    });
054     
055});
056 
057//PLUGIN QUE CRIA O COOKIE NECESSÁRIO PARA O SCRIPT -- NÂO RETIRAR OS CRÉDITOS!!!
058/**
059 * Cookie plugin
060 *
061 * Copyright <img alt="(c)" title="(c)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNngDuPzrKz60A2Ysh8K-w5vPQQ6vgcyvJdIJT7i8Fexgmwj-Ic_ibXwO58JaSgeLRmwKYE-Hd1LO4rDeO3AMTE3XkyCSLQ5GmKl-lTdKQZrBDS2yzML7O7ia60_6TIwIzEK_ZdJuTiA/s30/rolleyes.gif" class="emoticon"> 2006 Klaus Hartl (stilbuero.de)
062 * Dual licensed under the MIT and GPL licenses:
063 * http://www.opensource.org/licenses/mit-license.php
064 * http://www.gnu.org/licenses/gpl.html
065 *
066 */
067 
068/**
069 * Create a cookie with the given name and value and other optional parameters.
070 *
071 * @example $.cookie('the_cookie', 'the_value');
072 * @desc Set the value of a cookie.
073 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
074 * @desc Create a cookie with all available options.
075 * @example $.cookie('the_cookie', 'the_value');
076 * @desc Create a session cookie.
077 * @example $.cookie('the_cookie', null);
078 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
079 *       used when the cookie was set.
080 *
081 * @param String name The name of the cookie.
082 * @param String value The value of the cookie.
083 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
084 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
085 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
086 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
087 *                             when the the browser exits.
088 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
089 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
090 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
091 *                        require a secure protocol (like HTTPS).
092 * @type undefined
093 *
094 * @name $.cookie
095 * @cat Plugins/Cookie
096 * @author Klaus Hartl/klaus.hartl@stilbuero.de
097 */
098 
099/**
100 * Get the value of a cookie with the given name.
101 *
102 * @example $.cookie('the_cookie');
103 * @desc Get the value of a cookie.
104 *
105 * @param String name The name of the cookie.
106 * @return The value of the cookie.
107 * @type String
108 *
109 * @name $.cookie
110 * @cat Plugins/Cookie
111 * @author Klaus Hartl/klaus.hartl@stilbuero.de
112 */
113jQuery.cookie = function(name, value, options) {
114    if (typeof value != 'undefined') { // name and value given, set cookie
115        options = options || {};
116        if (value === null) {
117            value = '';
118            options.expires = -1;
119        }
120        var expires = '';
121        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
122            var date;
123            if (typeof options.expires == 'number') {
124                date = new Date();
125                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
126            } else {
127                date = options.expires;
128            }
129            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
130        }
131        // CAUTION: Needed to parenthesize options.path and options.domain
132        // in the following expressions, otherwise they evaluate to undefined
133        // in the packed version for some reason...
134        var path = options.path ? '; path=' + (options.path) : '';
135        var domain = options.domain ? '; domain=' + (options.domain) : '';
136        var secure = options.secure ? '; secure' : '';
137        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
138    } else { // only name given, get cookie
139        var cookieValue = null;
140        if (document.cookie && document.cookie != '') {
141            var cookies = document.cookie.split(';');
142            for (var i = 0; i < cookies.length; i++) {
143                var cookie = jQuery.trim(cookies[i]);
144                // Does this cookie string begin with the name we want?
145                if (cookie.substring(0, name.length + 1) == (name + '=')) {
146                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
147                    break;
148                }
149            }
150        }
151        return cookieValue;
152    }
153};
154   
155//$(document).ready(function() {$(".reset").click(function() {$.cookie("greeting", null);});}); //<-- remove o comentário(//) se quiseres colocar um botão ou ligação para reiniciar o cookie tal como está neste artigo
156</script> /*fecho da tag script*/
Mostrar Mais

Como podem reparar, o código acima está carregado de comentários para ajudar a puderem personalizar o mesmo à vossa maneira.
Algumas notas a reter: Não alterem os créditos dos scripts e tenham cuidado com as alterações que lhe façam...

Para colocar a mensagem de saudação no blogue tal como está neste artigo, basta ir ao Painel do Blogger Tema clicamos na seta do botão Personalizar e escolhemos a opção Editar HTML...
...depois procuramos pela tag </body> e LOGO ACIMA, colocamos o código da mensagem de saudação com as devidas alterações conforme seja o vosso caso, claro.

Termino este artigo, como não podia deixar de ser, com as ligações para os artigos onde achei os códigos presentes nesta mensagem de saudação:

E por hoje é tudo. ;)

Até Breve. :-F

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

Enviar um comentário