Estadísticas

Diseño web, Recursos, Programación, Blogs | Virtual ES!

Comparte tus ideas, no importa sin son una locura

Tratamos de que todo salga bien, y llevarte a un lugar sin problemas

Te enseñamos si no sabes, te guiamos paso a paso

Siempre tendras a alguien cerca, para tu ayuda

next prev

AutoKey&Click - Auto Click y Auto Teclas

Virtual ES! | 12:11


AutoKey&Click es una herramienta 2 en 1 muy util si deseas que este programa haga por ti Clicks en algun lugar específico de tu Pantalla. 
Sin embargo esta herramienta no solo envía clicks sino también envía pulsaciones de teclas que ud. lo programe.
AutoKey&Click es una de las herramientas mejor desarrolladas en su funcionamiento, sus opciones de configuración y su utilidad en un sin fin de cosas que se te ocurra.

Características Principales

Permite Capturar la ventana en la que trabajarás, de este modo si algun programa salta a tu pantalla el autoclick volverá a la ventana que elejiste. (Ejm. A veces el antivirus salta y el autoclick no hace los clicks en la ventana que dejaste sino en la ventana del antivirus).

 Permite grabar la posición del cursor, de modo que los clicks siempre sean en el mismo lugar que dejaste.

 Envia pulsaciones de mas de una tecla y puedes configurar el intervalo de tiempo totalmente independiente al Click.

 Envía Clicks con un intervalo de tiempo que tu elijas en segundos.

 Permite enviar un segundo click(No es dobleclick)

 El programa se minimiza en la barra de tareas de windows.

 F2 es la tecla de atajo para detener el programa.

Características Secundarias

El Programa está diseñado en Delphi por lo que no requiere instalación del mismo ni ningún tipo de otros programas adicionales para su funcionamiento.

 Es muy intuitivo y facil de aprender.

Alguna preguntas frecuentes.

1.- ¿Porque los intervalos en Segundos?

Porque algunas veces al estar en milisegundos (click menos de un segundo) te causa problemas debido a que el mouse se hace click por toda la pantalla a velocidad que no puedes controlarlo. Con AutoKey&Click queremos evitar esto y de paso en caso ocurriera esto SIMPLEMENTE PRECIONA LA TECLA F2 para detener el programa.

2.- ¿Como elegir la ventana donde hacer los clicks?.

Muy facil, Precionas el botón Capturar y luego vas a la ventana donde quieres hacer los clicks, posicionas el cursor y PRECIONAS la TECLA F2 para grabar la ventana y la posición del Cursor. Y ya estas listo para trabajar en esa ventana. Si no quieres esta opcion simplemente haz doble click en el casillero de Ventana de Trabajo. Esto borrará la ventana capturada y hará clicks sobre todas las ventanas activas.
Dejo a la creatividad de los usuarios los otros usos del AutoKey&Click
AutoKey&Click Virtual ES! Descargar

AutoKey&Click - Auto Click y Auto Teclas

Microsoft office 2007 no instala (Solucionado)

Virtual ES! | 8:44
A veces nos hemos topado con algun problema cuando estamos instalando el Office 2007, va por un 50% se va la luz, se reinicia o se queda paralizada y reinicias forzosamente y al iniciar nuevamente la instalación dice que Office ha detectado un error durante la instalación.. y tratas de desinstalarlo y sigue igual sale el mismo error parece ser que no se desistalo como se debia y tratas de  borrar la carpeta y causo mas daño pero hay algo que inpide la instalacion.

Opcion 1
Si te desinstalaron el Office 7 se han de haber quedado registros anteriores, sigue estos pasos.
Descarga:

CCleaner 

 En su opcion "Limpiador" pulsas Ejecutar el Limpiador.
Luego usa su opción "Registro" pulsas Buscar Problemas, Despues Reparar Seleccionados
y Reparar todas las seleccionadas (haciendo copia de seguridad).

 Vuelve a instalar Office 2007

Y si el problema aun sigue aremos el siguinte paso

Opcion2
Cómo desinstalar los conjuntos de aplicaciones de Office 2003, Office 2007 u Office 2010 si no se pueden desinstalar desde el Panel de control


Microsoft fix it banner

El Solucionador de problemas del programa de instalación y desinstalación puede corregir automáticamente el problema descrito en este artículo.
Ejecutar ahora


NOTA : En el apartado Solucionarlo en mi lugar, puedes descargar el Fix para desinstalar automáticamente todas las aplicaciones de Office 2003, Office 2007 y Office 2010.


Microsoft office 2007 no instala (Solucionado)

Tabla de Codigos ASCII

Virtual ES! | 13:49


ASCII
Hex
Símbolo
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F

 NUL
SOH
STX
ETX
EOT
ENQ
ACK
BEL
BS
TAB
LF
VT
FF
CR
SO
SI

ASCII
Hex
Símbolo
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

 10
11
12
13
14
15
16
17
18
19
1A
1B
1C
1D
1E
1F

 DLE
DC1
DC2
DC3
DC4
NAK
SYN
ETB
CAN
EM
SUB
ESC
FS
GS
RS
US

ASCII
Hex
Símbolo
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

 20
21
22
23
24
25
26
27
28
29
2A
2B
2C
2D
2E
2F

 (space)
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/

ASCII
Hex
Símbolo
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

 30
31
32
33
34
35
36
37
38
39
3A
3B
3C
3D
3E
3F

 0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?

ASCII
Hex
Símbolo
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

 40
41
42
43
44
45
46
47
48
49
4A
4B
4C
4D
4E
4F

 @
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

ASCII
Hex
Símbolo
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

 50
51
52
53
54
55
56
57
58
59
5A
5B
5C
5D
5E
5F

 P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_

ASCII
Hex
Símbolo
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

 60
61
62
63
64
65
66
67
68
69
6A
6B
6C
6D
6E
6F

 `
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o

ASCII
Hex
Símbolo
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

 70
71
72
73
74
75
76
77
78
79
7A
7B
7C
7D
7E
7F

 p
q
r
s
t
u
v
w
x
y
z
{
|
}
~


Tabla de Codigos ASCII

Tabla de ASCII HTML

Virtual ES! | 13:22


Tabla de ASCII estándar, nombres de entidades HTML, ISO 10646, ISO 8879, ISO 8859-1 romano 1
 Soporte para browsers: todos los browsers

ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47		 20
21
22
23
24
25
26
27
28
29
2A
2B
2C
2D
2E
2F
!
"
#
$
%
&
'
(
)
*
+
,
-
.
/		 &#32;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#39;
&#40;
&#41;
&#42;
&#43;
&#44;
&#45;
&#46;
&#47;

&quot;



&amp;









 espacio
signo de cierre de exclamación
comillas dobles
signo de número
signo de dólar
signo de porcentaje
signo "&" / ampersand
comilla / apóstrofe
paréntesis izquierdo
paréntesis derecho
asterisco
signo de más / adición
coma
signo de menos / sustracción / guíon
punto
barra oblicua - barra de división


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63		 30
31
32
33
34
35
36
37
38
39
3A
3B
3C
3D
3E
3F		 0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?		 &#48;
&#49;
&#50;
&#51;
&#52;
&#53;
&#54;
&#55;
&#56;
&#57;
&#58;
&#59;
&#60;
&#61;
&#62;
&#63;











&lt;

&gt;

 cero
uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
dos puntos
punto y coma
signo de menor que
signo de igual
signo de mayor que
signo de interrogación - cierre


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79		 40
41
42
43
44
45
46
47
48
49
4A
4B
4C
4D
4E
4F		 @
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O		 &#64;
&#65;
&#66;
&#67;
&#68;
&#69;
&#70;
&#71;
&#72;
&#73;
&#74;
&#75;
&#76;
&#77;
&#78;
&#79;















símbolo arroba

















ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95		 50
51
52
53
54
55
56
57
58
59
5A
5B
5C
5D
5E
5F		 P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_		 &#80;
&#81;
&#82;
&#83;
&#84;
&#85;
&#86;
&#87;
&#88;
&#89;
&#90;
&#91;
&#92;
&#93;
&#94;
&#95;


























corchete izquierdo
barra inversa
corchete derecho
signo de intercalación - acento circunflejo
signo de subrayado


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111		 60
61
62
63
64
65
66
67
68
69
6A
6B
6C
6D
6E
6F		 `
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o		 &#96;
&#97;
&#98;
&#99;
&#100;
&#101;
&#102;
&#103;
&#104;
&#105;
&#106;
&#107;
&#108;
&#109;
&#110;
&#111;















acento grave


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127		 70
71
72
73
74
75
76
77
78
79
7A
7B
7C
7D
7E
7F		 p
q
r
s
t
u
v
w
x
y
z
{
|
}
~

 &#112;
&#113;
&#114;
&#115;
&#116;
&#117;
&#118;
&#119;
&#120;
&#121;
&#122;
&#123;
&#124;
&#125;
&#126;


























llave de apertura - izquierda
barra vertical
llave de cierre - derecho
signo de equivalencia / tilde
(no definido en estándar HTML 4)


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143		 80
81
82
83
84
85
86
87
88
89
8A
8B
8C
8D
8E
8F















































(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159		 90
91
92
93
94
95
96
97
98
99
9A
9B
9C
9D
9E
9F















































(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)
(no definido en estándar HTML 4)


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175		 A0
A1
A2
A3
A4
A5
A6
A7
A8
A9
AA
AB
AC
AD
AE
AF
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯		 &#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;		 &nbsp;
&iexcl;
&cent;
&pound;
&curren;
&yen;
&brvbar;
&sect;
&uml;
&copy;
&ordf;
&laquo;
&not;
&shy;
&reg;
&macr;		 espacio sin separación
signo de apertura de exclamación
signo de centavo
signo de Libra Esterlina
signo de divisa general
signo de yen
barra vertical partida
signo de sección
diéresis - umlaut
signo de derechos de autor - copyright
género feminino - indicador ordinal f.
comillas anguladas de apertura
signo de no - símbolo lógico
guión débil
signo de marca registrada
macrón - raya alta


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191		 B0
B1
B2
B3
B4
B5
B6
B7
B8
B9
BA
BB
BC
BD
BE
BF		 °
±
²
³
´
µ

·
¸
¹
º
»
¼
½
¾
¿		 &#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;		 &deg;
&plusmn;
&sup2;
&sup3;
&acute;
&micro;
&para;
&middot;
&cedil;
&sup1;
&ordm;
&raquo;
&frac14;
&frac12;
&frac34;
&iquest;		 signo de grado
signo de más o menos
superíndice dos - cuadrado
superíndice tres - cúbico
acento agudo - agudo espaciado
signo de micro
signo de fin de párrafo
punto medio - coma Georgiana
cedilla
superíndice uno
género masculino - indicador ordinal m.
comillas anguladas de cierre
fracción un cuarto
fracción medio - mitad
fracción tres cuartos
signo de interrogación - apertura


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207		 C0
C1
C2
C3
C4
C5
C6
C7
C8
C9
CA
CB
CC
CD
CE
CF		 À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï		 &#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;		 &Agrave;
&Aacute;
&Acirc;
&Atilde;
&Auml;
&Aring;
&AElig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&Igrave;
&Iacute;
&Icirc;
&Iuml;		 A mayúscula con acento grave
A mayúscula con acento agudo
A mayúscula con acento circunflejo
A mayúscula con tilde
A mayúscula con diéresis
A mayúscula con anillo
diptongo AE mayúscula (ligadura)
C cedilla mayúscula
E mayúscula con acento grave
E mayúscula con acento agudo
E mayúscula con acento circunflejo
E mayúscula con diéresis
I mayúscula con acento grave
I mayúscula con acento agudo
I mayúscula con acento circunflejo
I mayúscula con diéresis


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223		 D0
D1
D2
D3
D4
D5
D6
D7
D8
D9
DA
DB
DC
DD
DE
DF		 Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß		 &#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;		 &ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&times;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;		 ETH islandesa mayúscula
N mayúscula con tilde - eñe mayúscula
O mayúscula con acento grave
O mayúscula con acento agudo
O mayúscula con acento circunflejo
O mayúscula con tilde
O mayúscula con diéresis
signo de multiplicación
O mayúscula with slash
U mayúscula con acento grave
U mayúscula con acento agudo
U mayúscula con acento circunflejo
U mayúscula con diéresis
Y mayúscula con acento agudo
THORN islandesa mayúscula
s minúscula (alemán) - Beta minúscula


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239		 E0
E1
E2
E3
E4
E5
E6
E7
E8
E9
EA
EB
EC
ED
EE
EF		 à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï		 &#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;		 &agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;		 a minúscula con acento grave
a minúscula con acento agudo
a minúscula con acento circunflejo
a minúscula con tilde
a minúscula con diéresis
a minúscula con anillo
diptongo ae minúscula (ligadura)
c cedilla minúscula
e minúscula con acento grave
e minúscula con acento agudo
e minúscula con acento circunflejo
e minúscula con diéresis
i minúscula con acento grave
i minúscula con acento agudo
i minúscula con acento circunflejo
i minúscula con diéresis


ASCII HTML HTML
Dec Hex Símbolo Numero Nombre
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255		 F0
F1
F2
F3
F4
F5
F6
F7
F8
F9
FA
FB
FC
FD
FE
FF		 ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ		 &#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;		 &eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&divide;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;		 eth islandesa minúscula
eñe minúscula - n minúscula con tilde
o minúscula con acento grave
o minúscula con acento agudo
o minúscula con acento circunflejo
o minúscula con tilde
o minúscula con diéresis
signo de división
o barrada minúscula
u minúscula con acento grave
u minúscula con acento agudo
u minúscula con acento circunflejo
u minúscula con diéresis
y minúscula con acento agudo
thorn islandesa minúscula
y minúscula con diéresis


 HTML 4.01, ISO 10646, ISO 8879, alfabeto romano extendido A y B,
 Soporte para browsers: Internet Explorer > 4, Netscape > 4

HTML HTML
Dec Hex Símbolo Numero Nombre
338
339
352
353
376
402		 152
153
160
161
178
192		 Œ
œ
Š
š
Ÿ
ƒ		 &#338;
&#339;
&#352;
&#353;
&#376;
&#402;





OE mayúscula (ligadura)
oe minúscula (ligadura)
S mayúscula con caron
s minúscula con caron - acento hacek
Y mayúscula con diéresis
f minúscula itálica - signo de función


HTML HTML
Dec Hex Símbolo Numero Nombre
8211
8212
8216
8217
8218
8220
8221
8222
8224
8225
8226
8230
8240
8364
8482		 2013
2014
2018
2019
201A
201C
201D
201E
2020
2021
2022
2026
2030
20AC
2122		 –
—
‘
’
‚
“
”
„
†
‡
•
…
‰
€
™		 &#8211;
&#8212;
&#8216;
&#8217;
&#8218;
&#8220;
&#8221;
&#8222;
&#8224;
&#8225;
&#8226;
&#8230;
&#8240;
&#8364;
&#8482;












&euro;

 raya corta
raya larga
comilla izquierda - citación
comilla derecha - citación
comilla de citación - baja
comillas de citación - arriba izquierda
comillas de citación - arriba derecha
comillas de citación - abajo
cruz
doble cruz
viñeta - bullet
puntos suspensivos
signo de pro mil
signo de euro
signo de marca registrada - trade mark

Tabla de ASCII HTML

Resaltar de forma simple CSS, HTML, Jquery o cualquier código

Virtual ES! | 15:26

En este tutorial veremos como resaltar de forma simple códigos CSS, HTML, JQuery o otro código  que necesites. Muchos bloguers usan Blockquote para resaltar
sus códigos, por lo que no podemos diferenciar un código HTML, CSS, JQuery o cualquier otro código, con este tutorial podremos diferenciar dichos códigos.

Vamos a Blogger>>Plantilla>>Edicion HTML.
Buscamos la siguiente linea
]]></b:skin>
Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.
pre.code {
    margin:20px 25px;
    border:1px solid;
    border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    position:relative;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.08);
    box-shadow:0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
    font-family:sans-serif;
    font-weight:bold;
    font-size:13px;
    color:#4b555c;
    position:absolute;
    left:1px;
    top:16px;
    text-align:center;
    width:60px;
}
pre.code code {
    font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    display:block;
    margin:0 0 0 60px;
    padding:15px 16px 14px;
    border-left:1px #E5EAEE solid;
    overflow-x:auto;
    font-size:13px;
    line-height:19px;
    color:#333;  
}
pre.code-css code {
    color:#D84400;
}
pre.code-html code {
    color:#4576D5;
}
pre.code-jquery code{
   color: #38761d;
}
pre.code-otro code
   color: #7f6000;
}
NOTA: Como ven hay una linea llamada otro podemos cambiarlo por lo queramos, así también jquery, css, html por lo que deseamos.
Guardamos los cambios realizados en la plantilla.

Ahora agregaremos nuestro re-saltador de codigos CSS, HTML, JQuery u otro

 Dentro de una entrada agregaremos el código HTML.
<pre class="code code-html"> <label>HTML</label>
<code>
 Código HTML iría aquí        </code>
</pre>
<pre class="code code-css"> <label>CSS</label>
<code>
Código CSS iría Aquí </code>
</pre>
<pre class="code code-jquery"> <label>Jquery</label>
<code>
Código JQuery iría qui </code>
</pre>
</div>
<pre class="code code-otro"> <label>Otro</label>
<code>
Código Otro iría aquí
</code>
</pre>

Listo ya podríamos mostrar nuestros códigos de una forma simple

Resaltar de forma simple CSS, HTML, Jquery o cualquier código

Crear block de notas para blogger

Virtual ES! | 15:15

En este tutorial veremos como crear block de notas para blogger usando CSS. Ya hemos visto varios estilos de notas, aunque este estilo de notas me agrada muchos mas. Dandalo un toque mas profecional a nuestro blog.

Vamos a Blogger>> Plantilla>> Edicion HTML  
Buscamos la siguiente linea
 ]]></b:skin>
 Justo por encima de ]]></b:skin> pegamos nuestro código CSS.
 .informacion, .tips, .peligro {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.informacion {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg082mgpFSY13c4ngz3kj119PQg-mOMo29ECkAc84q1qrWaxn4zDsO6HMT0BV0R9Is6HXYwo5gErzxZpOHabGbf3p2rPj9Pb6_g_FMpV2OFiFAGC1q2VXEbqkxIs9ll77VUWGsKbHkA2oE/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI4u5DF7OALL_D1kDpr7oIe7orylbzND7sLEjAFFSwS1qgENtBI9p8uARwacEivS_fnWZ1eli2QMu-TtRU8I0mdmiG3lWKt5ZVEkJCbaRjGoz9EnaSqlPi2JWE_nZw5_HFBFVrGDf_tcw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.peligro
{
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7VW3X8mskc_K6QWcTYr996v55-PRK2YNf1hEFv4yRcirJpySHCD6yY9oHX8yS887XBsRFMSY3tAPu2lGeWFF_Nu0kNByhX92q7J1SISaDctGFZ9FKI-i9Vi9q9W0tEJDL83GYK_0isU/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}
 Guardamos los cambios realizados en la plantilla

Ahora agregaremos nuestras notas en una entrada: Para eso seguimos estos pasos 

Dentro de una entrada pegamos el siguiente código HTML

 Para información:
 <div class="informacion">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
 Para Tips:
 <div class='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
 Para Peligro
 <div class='peligro'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

Crear block de notas para blogger

Botones para compartir estilo Taringa

Virtual ES! | 15:16

En esta entrada vamos a ver cómo poner los botones para compartir estilo Taringa, que incluye los botones de Facebook, Taringa, +1, y Twitter.

Para colocar estos botones entra en la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y agrega antes de ]]></b:skin> los estilos:
.taringa-post-share li {
float: right;
margin-left: 5px;
list-style:none;
}
.taringa-post-share {
padding: 5px 35px 10px 1px;
margin-bottom: 10px;
margin-right: 0px;
background: url(URL de la imagen) no-repeat bottom right;
}
.clearfix:after {content:"0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

Luego busca esta línea:
 <div class='post-footer'>

Arriba de ella pega este código:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='taringa-post-share clearfix'>
<li><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></li>

<li class='t-big'><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></li>

<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></li>

</ul>
</b:if>
Ahora, como la imagen del listón no se ajusta al ancho de las entradas, y como todos tienen un ancho distinto, he hecho tres imágenes, una de 500px de ancho, otra de 600px y otra más de 700px, así que donde se indica en el primer código pon la URL de la imagen que se ajuste más a tu blog.
Aquí abajo están las URLs de las imágenes en sus tres medidas.
IMAGEN DE 500px
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt43M2rtZsjcou1znbKaPk3N2NM2XzuXxYcOBRY0cFaUB2H5vcfVZWYCMb5zAldy42eqrOnnj5n1nXZy_ep2pZaOp0PHZqqN2Vhs3oVY2hfqXy90gRUtq_24cNqwts07BYSX4AxUyslpQ/s500/ribbon-taringa500px.png

IMAGEN DE 600px
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0muy_oZ_yJvPUWMwJ62B_ulGj0ADdr_6s2cyoWRy8KtODxXa6jQkMBVVUWpE08Gl1DFttYU__TImTgWRSo9HtdCb3hB60BB_jxiFV_VO-Uj2g3LDEHK1tTOGPXuGVQJO_O9a8XTTEP8/s600/ribbon-taringa600px.png

IMAGEN DE 700px
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfKAE30ddpVuYIbWsQZK535gUVYKozZONzXaLtyyg96mXKBM4tNnjAyJhx9hxTXtqM2wiS4BcTpb0unA0UElmiDUe50mlNzNJzpTEfKaEHORa2WvCKJhY92bFn-Yc1oMt328nRUYoo5R0/s700/ribbon-taringa700px.png


Habiendo puesto la imagen ya estará todo listo. Los botones no se verán en la portada, así que debes ingresar a una entrada individual para poder verlos.

En caso de que no se vieran, busca la línea del segundo paso, y revisa si la tienes dos veces, si así fuera pega el código en la otra repetida.

El listón se verá inclinado hacia la derecha, si quisieras centrarlo habrá que aplicar un margen derecho, así que cambia donde dice margin-right: 0px; por un valor más alto, por ejemplo:
margin-right: 30px;
Eso hará que se desplacen a la izquierda.

Como puedes ver los botones lucirán muy bien, y seguro sera una forma muy llamativa de invitar a tus lectores a compartir las entradas de tu blog.

Botones para compartir estilo Taringa

Estilos para texto citado en Blogger

Virtual ES! | 14:30
Un texto citado o blockquote corresponde a secciones de texto en las cual se resalta contenido. En el caso de mi blog, lo utilizo para enmarcar códigos.
En esta oportunidad les enseñaré a modificar el estilo de este texto citado.

Esto es un Blockquote:
 Ejemplo texto citado.
Dependiendo del estilo que tengamos establecido, es como se verán los blocquotes.

¿Cómo cambiar el estilo del texto citado en Blogger?

Primero vamos a ''Diseño/Edición HTML'' y buscaremos el siguiente código:
.post blockquote {
Elimarás este código hasta el cierre del estilo ''}''  y en su lugar utilizarás el del estilo deseado.

si no lo tienen agregar el anterior estilo de citado pega antes de ]]></b:skin> uno de los estilos que mas te guste:

Tipos de estilo:

Estilo 1: Líneas laterales dobles:
.post blockquote{
margin:1em 20px;
border-left:4px double #704B0F;
border-right:4px double #704B0F;
padding-left:10px;
font-size:100%;
color:#333;
font:Arial Georgia Serif;
}


Estilo 2: Borde izquierdo y cuadrícula:
.post blockquote{
width:350px;
font:14px/22px normal helvetica,sans-serif;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#ffffff url(http://bp1.blogger.com/_sbaQpFxeL1Q/R8yT9e_CdPI/AAAAAAAAAFw/4E0nxy2orrs/s400/code-bg.gif);
}


Estilo 3: Entre comillas:
.post blockquote {
background: url(http://www.benlawries.co.uk/images/blockquotes_top.gif) left top no-repeat;
padding: 19px 22px 10px;
text-align: left;
color:#1a0603;
border:1px solid #9e8e91;
margin:15px 15px;
}


Estilo 4: Entre líneas horizontales:
.post blockquote {
float:left;
color:#777;
width:200px;
padding:6px;
margin-right:10px;
position:relative;
font-size:15px;
text-align:left;
font-style: italic;
border-top:4px solid #dadada;
border-bottom:4px solid #dadada;
}


Estilo 5: Fondo negro y margen rojo:
.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #fff;
   background: #000;
   border-left: 4px solid #BA0033;
   border-bottom: 3px solid #BA0033;
}


Estilo 6: Borde izquierdo y cuadrícula:
.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#fff url(https://lh5.googleusercontent.com/-f5pQL971Jg4/TYaSXKTKggI/AAAAAAAAAek/aReaOraSA2I/s1600/%2528PNG+Imagen%252C+10x10+pixels%2529.png) repeat;
padding:10px 10px 10px 15px;
}


 Estilo 7: Borde izquierdo blanco:
.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #dadada;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
border-right:1px solid #dadada;
overflow:auto;
background:#fff urlrepeat;
padding:10px 10px 10px 15px;
}

Se pueden conseguir estilos bastante buenos sólo con modificar un poco el CSS. Si quieres añadir tus atributos propios basta con crear la síntaxis de la siguiente forma:
.post blockquote {
/*Acá van los atributos*/
}

Estilos para texto citado en Blogger

Araña interactiva para el blog, que se mueve

Virtual ES! | 9:39

Esto es parte de la modernidad web, hecho en canvas, y se trata de una araña que se mueve por si sola dentro de su telaraña, y que podemos arrastrar con el cursor, tanto a la araña como a la telaraña y sus puntos de apoyo. El demo aquí mismo.

Este gracioso experimento es de Sub Protocol, y nos servirá como parte de las decoraciones de Halloween en el blog. Este arácnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempeño de estas canvas son más eficientes si alojamos los scripts directo en la plantilla, o al menos a mí esa percepción me ha dado.

Para colocar esta araña interactiva en tu blog ingresa en Diseño | Añadir un gadget | HTML/Javascript y ahí pega este código:
 <script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>


Si quieres también puedes hacer que sea "flotante", es decir, que permanezca estática sin importar si subimos o bajamos el scroll de la página. Para conseguirlo sólo añade lo siguiente debajo del código anterior.
 <style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo cámbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha cámbialo por right. Toma en cuenta que al hacerla flotante podría obstruir algún elemento de tu blog que quede por debajo de ella.

Con esta araña, esta próxima noche de brujas tú y tus lectores podrán entretenerse un rato en el blog jugando con ella, eso sí, no la saques de su red o la pobre morirá :(

Araña interactiva para el blog, que se mueve

Barra de Carga de Youtube para Blogger

Virtual ES! | 12:02

He estado algún tiempo sin publicar algo nuevo, también he estado respondiendo varios comentarios que muchos bloggers hacen en mis publicaciones. Hoy me he animado a realizar un pequeño aporte para engalanar y personalizar nuestros blogs.
Seguramente has visto la barra progresiva de color rojo que se mueve en la parte superior cuando se carga un vídeo en Youtube. Sentí mucha curiosidad sobre como instalarla en blogger, y me puse en la tarea de investigar. 
Inicie mi búsqueda y encontré un script llamado Nprogresss.js. Comencé a hacer algunas pruebas con el script original pero no obtenía resultados, así que profundice en la búsqueda hasta hallar en algunos blogs anglosajones e hindues este script adaptado para Blogger.
La barra de carga esta instalada en este blog de pruebas
Sin mas que decir, vamos a instalar el Gadget. Esto sera sencillo, puesto que solo habrá que hacer una operación para instalarlo. 
Para eso ve a Blogger-Plantilla-Editar HTML, das un clic dentro de la plantilla y oprimes Ctrl+F y buscas por: <body>
Pega este código justo después:

<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;
left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress
 .peg{-ms-transform:rotate(3deg) translate(0px,-4px);
-webkit-transform:rotate(3deg) translate(0px,-4px);
box-shadow:0 0 10px #29d, 0 0 5px #29d;display:
block;height:100%;opacity:1.0;position:absolute;right:0;
transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress 
.spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}
#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms 
linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 
2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:
#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate
(360deg);transform:rotate(360deg)}.photo{display:none}</style>

<div id='loadMore'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='http://goo.gl/10Okof'/>
El código resaltado en verde es Jquery, si ya lo tienes insertado en tu blog, debes omitirlo.
El código resaltado en azul, define el color de la barra. Modifícalo a tu gusto. Utiliza el selector de colores
El código resaltado en rojo ajusta el ancho de la barra. Cámbialo a tu parecer.

Con esto ya estaría funcionando la barra de carga en tu blog.

Barra de Carga de Youtube para Blogger

Suscribirse a: Entradas (Atom)