iklan banner
MASIGNCLEAN103

Incorporar jQuery ToolTip no Blogger

Administrador
domingo, 4 de novembro de 2012
iklan banner

titptip jquery wordpress

No Blogger você pode adicionar as dicas com TipTip jQuery de forma semelhante à que podemos ver em muitos blogs que utilizam WordPress :

1. Verifique se você jQuery instalado em seu blog

Se você tem isso, não carregá-lo novamente. Se não, você pode incluí-lo, colando o seguinte código em seu modelo de Design / Editar HTML antes de </ head> :
1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
Dessa forma, você vai estar carregando a versão mais recente (otimizada) jQuery do Google.

2. Adicionar TipTip diretamente ao seu modelo

Antes de </ head> , cole os seguintes códigos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script type='text/javascript'>
/ / <! [CDATA [
 
 / *
 * TipTip
 * Copyright 2010 de Drew Wilson
 * Www.drewwilson.com
 * Code.drewwilson.com / entry / tiptip-jquery-plugin
 *
 * Versão 1.3 - Atualizado: 23 de março de 2010
 *
 * Este plug-in irá criar uma dica de ferramenta personalizada para substituir o padrão
 Navegador * dica. É extremamente leve e muito inteligente em
 * Que ele detecta as bordas da janela do navegador e certifique-se
 * A dica fica dentro do tamanho da janela atual. Como resultado, o
 * Tooltip ajusta-se a ser exibida acima, abaixo, para a esquerda 
 * Ou para a direita, dependendo do que é necessário para ficar dentro da
 * Janela do navegador. É completamente customizável via CSS também.
 *
 * Este TipTip jQuery plug-in é dual licenciado sob as licenças MIT e GPL:
 * Http :/ / www.opensource.org / licenças / mit-license.php
 * Http :/ / www.gnu.org / licenses / gpl.html
 * /
(Function ($) {$. Fn.tipTip função = (opções) {var . opta = $ estender (o padrão, opções) if ($ ("# tiptip_holder") de comprimento <= 0.) {var tiptip_holder = $ ('<div id = "tiptip_holder" style = "max-width:' + opta . maxWidth + '"> </ div>'); tiptip_content var = $ ('<div id="tiptip_content"> </ div>'); tiptip_arrow var = $ ('div < id = "tiptip_arrow_inner"> </ div> ')))} else {var tiptip_holder = $ ("# tiptip_holder"); tiptip_content var = $ ("# tiptip_content"); tiptip_arrow var = $ ("# tiptip_arrow")} voltar this.each (function () {var org_elem opts.content = $ (this) if () {var org_title =} else {var opts.content if (opts.activation == "click") {org_elem.click (function () {active_tiptip (); retorno top = parseInt (org_elem.offset () ['top']); var esquerda = parseInt (org_elem.offset () ['esquerda']); org_width var = parseInt (org_elem.outerWidth ()); org_height var = parseInt ( org_elem.outerHeight ()); var tiptip_holder.outerWidth tip_w = () = tiptip_holder.outerHeight tip_h var () var w_compare = Math.round ((org_width-tip_w) / 2); var h_compare = Math.round ((org_height -tip_h) / 2); var marg_left = Math.round (esquerda + w_compare); var marg_top = Math.round (top + + opts.edgeOffset org_height) t_class var = ""; arrow_top var = ""; Arrow_left var = Math.round (tip_w-12) / 2 se (opts.defaultPosition == "fundo") {t_class = "_bottom"} else if (opts.defaultPosition == "top") {t_class = "_top"} else if (opts.defaultPosition == "esquerda") {t_class = "_Alt"} else if (opts.defaultPosition == "direita") {t_class = "_Right"} var right_compare = (w_compare + esquerda) <parseInt ($ (janela .) ScrollLeft ()); var
 
/ /]]>
</ Script>
 
<script type='text/javascript'>
/ / <! [CDATA [
Função $ (() {
$ ("Dica"). TipTip ().;
});
/ /]]>
</ Script>
Agora, antes de ]]> </ b: skin> , copiar o seguinte código CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/ * CSS TipTip - Versão 1.2 * /
 
# {Tiptip_holder
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
 
# {Tiptip_holder.tip_top
padding-bottom: 5px;
}
 
# {Tiptip_holder.tip_bottom
padding-top: 5px;
}
 
# {Tiptip_holder.tip_right
padding-left-: 5px;
}
 
# {Tiptip_holder.tip_left
padding-direito: 5px;
}
 
# {Tiptip_content
font-family: Arial, sans-serif;
font-size: 11px;
color: # fff;
text-shadow: 0 0 2px # 000;
padding: 4px 8px;
border: 1px rgba sólido (255,255,255,0.25);
background-color: rgb (25,25,25);
background-color: rgba (25,25,25,0.92);
* Background-color: # 000;
imagem de fundo:-webkit-gradient (linear, 0% 0% 0% a 100%, a partir de (transparente), a (# 000));
border-radius: 3px;
-Webkit-border-radius: 3px;
-Moz-border-radius: 3px;
box-shadow: 0 0 3px # 555;
-Webkit-box-shadow: 0 0 3px # 555;
-Moz-box-shadow: 0 0 3px # 555;
}
 
# Tiptip_arrow, # {tiptip_arrow_inner
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
 
# # Tiptip_arrow {tiptip_holder.tip_top
border-top-color: # fff;
border-top-color: rgba (255,255,255,0.35);
}
 
# # Tiptip_arrow {tiptip_holder.tip_bottom
border-bottom-color: # fff;
border-bottom-color: rgba (255,255,255,0.35);
}
 
# # Tiptip_arrow {tiptip_holder.tip_right
border-right-color: # fff;
border-right-color: rgba (255,255,255,0.35);
}
 
# # Tiptip_arrow {tiptip_holder.tip_left
border-left-color: # fff;
border-cor-left: rgba (255,255,255,0.35);
}
 
# # Tiptip_arrow_inner {tiptip_holder.tip_top
margem superior:-7px;
margin-left:-6px;
border-top-color: rgb (25,25,25);
border-top-color: rgba (25,25,25,0.92);
}
 
# # Tiptip_arrow_inner {tiptip_holder.tip_bottom
margem superior:-5px;
margin-left:-6px;
border-bottom-color: rgb (25,25,25);
border-bottom-color: rgba (25,25,25,0.92);
}
 
# # Tiptip_arrow_inner {tiptip_holder.tip_right
margem superior:-6px;
margin-left:-5px;
border-right-color: rgb (25,25,25);
border-right-color: rgba (25,25,25,0.92);
}
 
# # Tiptip_arrow_inner {tiptip_holder.tip_left
margem superior:-6px;
margin-left:-7px;
border-cor-left: rgb (25,25,25);
border-cor-left: rgba (25,25,25,0.92);
}
 
/ * Webkit Hacks * /
@ Mídia tela e (-webkit-min-device-pixel-ratio: 0) { 
 # {Tiptip_content
  padding: 5px 4px 8px 8px;
  background-color: rgba (45,45,45,0.88);
 }
 # # Tiptip_arrow_inner {tiptip_holder.tip_bottom 
  border-bottom-color: rgba (45,45,45,0.88);
 }
 # # Tiptip_arrow_inner {tiptip_holder.tip_top 
  border-top-color: rgba (20,20,20,0.92);
 }
}

3. Fazê-lo funcionar

Você pode utilizá-lo tanto em suas postagens quanto em seu template manualmente, por exemplo, inserir no título, alterando o atributo "title" e da classe (class=”tooltip”) em suas ligações, como segue:

1
<a href="http://chicablogger.com" title="Recursos para Blogger e Blogger WordPress" class="tiptip"> menina </ a>
Fonte: Chica Blogger
Share This :
Administrador

comment 0 comentários

more_vert
Emoticon Feedback
Assinar: Postar comentários (Atom)