Nuevos tutoriales de blogger y wordpress 2012

Así es sabados y domingos nuevos videos… www.juanluispc.com http www.juanluispc.com

Fuente Video:
Nuevos tutoriales de blogger y wordpress 2012

Crea tu correo profesional con Google Apps con tu dominio de Blogger

Hace dos años tengo un correo del tipo contacto@minombre.com. Lo doy porque es más fácil de deletrear, y es mucho más profesional que un correo hotmail o un gmail lleno de letras y números raros. A veces me preguntan cómo tengo ese correo. Es simple, respondo: Sólo tienes que comprar un dominio por unos US$8 al año.

Al final, tener un correo con tu nombre o el de tu organización, es mucho más sencillo y barato de lo que el común de la gente piensa. Yo tengo WordPress, y creo mis correos de contacto desde el CPanel, porque es más simple, pero cualquier persona que haya comprado un dominio puede tener un correo con su dominio usando Google Apps fácilmente.

¿Eres usuario de Blogger.com y tienes tu propio dominio? A continuación, te explicamos cómo crear tu correo @tudominio gratis, usando Google Apps.

Crea tu correo en Google Apps

El primer paso, es ir a la versión gratuita de Google Apps, que te permite crear hasta 10 correos electrónicos sin costo alguno.

Una vez allí, presionamos el botón “Cómo empezar“. Suponiendo que queremos usar un dominio ya existente, que hemos comprado previamente, ingresamos nuestro nombre de dominio sin www. Ejemplo: tipsdecocina.net. Presionando el botón “Empezar ahora”, veremos un formulario de registro, donde tendremos que completar los campos indicados.

Completando todos los datos, incluyendo un correo electrónico de referencia (ya existente, que podamos revisar posteriormente), hacemos click en “Continuar“, y saltamos al tercer paso de configuración de nuestro nuevo correo. Si resides en Chile, antepone un “9″ a tu número de celular (son 9 dígitos en total).

Ahora podemos elegir el nombre de usuario y contraseña de nuestro correo. Yo elegí hola@tipsdecocina.net. Aceptando los términos del servicio de Google Apps, seremos redireccionados a un panel de opciones de escritorio, donde veremos las aplicaciones que podemos usar: Email, Google Calendar, Google Docs, etc. Tu correo está casi listo para ser usado.

El último paso: verifica tu dominio

Para comenzar a usar el nuevo correo creado, necesitas verificar que el dominio en cuestión es tuyo. Para ello, necesitas hacer click en el enlace “Verify your domain” que aparece bajo el ícono de Email en tu escritorio, o ir a la opción Setup/Verify domain ownership
. Haciendo click en el botón “Next“, tendrás que ingresar con tu nuevo correo electrónico y contraseña.

Si usas Blogger, para verificar que eres dueño de tu dominio, en la pestaña “Alternate methods“, puedes elegir una de estas tres opciones: añadir una meta tag en tu plantilla, usar tu cuenta de Google Analytics (si ya tienes), o modificar tus registros DNS en la configuración de tu dominio. Recomiendo la primera alternativa, porque es más simple: sólo será cosa de copiar el código dado bajo la etiqueta en la edición de HTML de tu plantilla.

Una vez hecho esto, hacemos click en “Verify“, y podremos acceder a nuestro nuevo correo en 5 a 10 minutos (por lo general, inmediatamente).

En Setup/Users and groups, tenemos la opción de crear correos para los demás miembros de nuestro equipo.

Ingresa a tu nuevo correo

Una vez que has creado tu correo y verificado tu dominio, podrás acceder:

• Desde http://mail.google.com/a/tudominio, ingresando tu nombre de usuario y contraseña
• O desde Gmail.com, ingresando tu correo completo (ej. hola@tipsdeconina.net) y contraseña.

Consideraciones finales

• Si ya tienes una cuenta de Gmail, puedes revisar tu nueva cuenta de correo @tudominio desde tu viejo correo (es algo que veremos en otro tutorial).
• Tener un correo con tu dominio, le dará más profesionalismo y lo que haces y ayudará a promocionar tu blog o página web. Si ya tienes tu propio dominio, ¿qué esperas para crear tu correo?

Posts relacionados

• Crea URLs cortas con bit.ly en Google Docs y Gmail
• Google quiere ayudarte a mejorar tu web con Site Clinic
• Actualiza Facebook y Twitter desde tu Google Plus

Leer el original :

Crea tu correo profesional con Google Apps con tu dominio de Blogger

Crea tu correo profesional con Google Apps con tu dominio de Blogger

Hace dos años tengo un correo del tipo contacto@minombre.com. Lo doy porque es más fácil de deletrear, y es mucho más profesional que un correo hotmail o un gmail lleno de letras y números raros. A veces me preguntan cómo tengo ese correo. Es simple, respondo: Sólo tienes que comprar un dominio por unos US$8 al año.

Al final, tener un correo con tu nombre o el de tu organización, es mucho más sencillo y barato de lo que el común de la gente piensa. Yo tengo WordPress, y creo mis correos de contacto desde el CPanel, porque es más simple, pero cualquier persona que haya comprado un dominio puede tener un correo con su dominio usando Google Apps fácilmente.

¿Eres usuario de Blogger.com y tienes tu propio dominio? A continuación, te explicamos cómo crear tu correo @tudominio gratis, usando Google Apps.

Crea tu correo en Google Apps

El primer paso, es ir a la versión gratuita de Google Apps, que te permite crear hasta 10 correos electrónicos sin costo alguno.

Una vez allí, presionamos el botón “Cómo empezar“. Suponiendo que queremos usar un dominio ya existente, que hemos comprado previamente, ingresamos nuestro nombre de dominio sin www. Ejemplo: tipsdecocina.net. Presionando el botón “Empezar ahora”, veremos un formulario de registro, donde tendremos que completar los campos indicados.

Completando todos los datos, incluyendo un correo electrónico de referencia (ya existente, que podamos revisar posteriormente), hacemos click en “Continuar“, y saltamos al tercer paso de configuración de nuestro nuevo correo. Si resides en Chile, antepone un “9″ a tu número de celular (son 9 dígitos en total).

Ahora podemos elegir el nombre de usuario y contraseña de nuestro correo. Yo elegí hola@tipsdecocina.net. Aceptando los términos del servicio de Google Apps, seremos redireccionados a un panel de opciones de escritorio, donde veremos las aplicaciones que podemos usar: Email, Google Calendar, Google Docs, etc. Tu correo está casi listo para ser usado.

El último paso: verifica tu dominio

Para comenzar a usar el nuevo correo creado, necesitas verificar que el dominio en cuestión es tuyo. Para ello, necesitas hacer click en el enlace “Verify your domain” que aparece bajo el ícono de Email en tu escritorio, o ir a la opción Setup/Verify domain ownership
. Haciendo click en el botón “Next“, tendrás que ingresar con tu nuevo correo electrónico y contraseña.

Si usas Blogger, para verificar que eres dueño de tu dominio, en la pestaña “Alternate methods“, puedes elegir una de estas tres opciones: añadir una meta tag en tu plantilla, usar tu cuenta de Google Analytics (si ya tienes), o modificar tus registros DNS en la configuración de tu dominio. Recomiendo la primera alternativa, porque es más simple: sólo será cosa de copiar el código dado bajo la etiqueta en la edición de HTML de tu plantilla.

Una vez hecho esto, hacemos click en “Verify“, y podremos acceder a nuestro nuevo correo en 5 a 10 minutos (por lo general, inmediatamente).

En Setup/Users and groups, tenemos la opción de crear correos para los demás miembros de nuestro equipo.

Ingresa a tu nuevo correo

Una vez que has creado tu correo y verificado tu dominio, podrás acceder:

• Desde http://mail.google.com/a/tudominio, ingresando tu nombre de usuario y contraseña
• O desde Gmail.com, ingresando tu correo completo (ej. hola@tipsdeconina.net) y contraseña.

Consideraciones finales

• Si ya tienes una cuenta de Gmail, puedes revisar tu nueva cuenta de correo @tudominio desde tu viejo correo (es algo que veremos en otro tutorial).
• Tener un correo con tu dominio, le dará más profesionalismo y lo que haces y ayudará a promocionar tu blog o página web. Si ya tienes tu propio dominio, ¿qué esperas para crear tu correo?

Posts relacionados

• Crea URLs cortas con bit.ly en Google Docs y Gmail
• Google quiere ayudarte a mejorar tu web con Site Clinic
• Actualiza Facebook y Twitter desde tu Google Plus

Visitar enlace :

Crea tu correo profesional con Google Apps con tu dominio de Blogger

Optimizar imágenes para la web con PhotoFiltre

Quienes comienzan con un blog, generalmente omiten un paso fundamental para mejorar el rendimiento y la carga de su blog: la optimización de imágenes para la web. Optimizar las imágenes es especialmente útil para mejorar la usabilidad de nuestro sitio y reducir el porcentaje de rebote de los visitantes. Usualmente, cuando hablamos de optimización para la web, nos referimos a la compresión de imágenes, esto es, la reducción de su tamaño y peso, sin afectar visiblemente la calidad del archivo original.

¿Qué formato usar?

En general, prefiero usar *.PNG para el diseño del blog, y *.JPG para las imágenes de las entradas. Hay quienes prefieren usar *.GIF pero, dependiendo del caso, me quedo sólo con los formatos antes mencionados para garantizar la calidad de las imágenes sin que ello perjudique el tiempo de carga del blog.

Reduciendo el tamaño y peso de tus fotos con PhotoFiltre

Uso Photoshop, y también Gimp para editar imágenes, pero considero que son programas algo complejos (y de lenta carga) para una tarea tan simple como la optimización de imágenes para la web, especialmente para quienes no están familiarizados con este tipo de programas. Por ello, uso PhotoFiltre para este tipo de tareas.

PhotoFiltre es un software de edición de imágenes para Windows del cual podemos obtener una versión completamente gratuita y legal (Descarga PhotoFiltre). La versión en inglés pesa 4MB comprimida, y cuenta con archivos de traducción a distintos idiomas que se ponen en la carpeta de instalación del programa. Por ejemplo, si quieres traducir PhotoFiltre al español, deberás copiar el archivo TranslationES.plg en C:Archivos de programaPhotoFiltre, quitando el archivo de traducción al inglés. También hay una versión portable para que lleves en tu memoria USB a todas partes.

Podrás notar que el programa se abre inmediatamente, sin tiempos de espera, y que es muy sencillo de usar. En él, hay cuatro herramientas que uso frecuentemente: Tamaño de Imagen y Tamaño de Lienzo (ambos en el menú Imagen); Cortar, que aparece al presionar el botón derecho del mouse luego de seleccionar una porción de la imagen ;y Compresión, que aparece al momento de guardar las imágenes.

Ejemplo de optimización con PhotoFiltre

Tomé una imagen de Sxc.hu (beautiful woman with sunflowers) de 3888?2592 píxeles y 6,36MB de peso. Sería una locura subirla tal cual y redimensionarla desde el editor de la entrada. Lo ideal es reducir su tamaño desde Tamaño de Imagen, hasta lograr el tamaño que efectivamente vayamos a usar en nuestro blog. Si la columna principal de mi blog tiene 600 píxeles de ancho, ese será el tamaño de referencia al momento de redimensionar.

Personalmente, prefiero usar siempre imágenes de no más de 500px de ancho. Por ello, cambié el tamaño original de la mujer con girasoles a 500?333 píxeles, con un peso de 200kb. Como 200kb aún es mucho, vamos a Archivo/Guardar como y bajamos la Compresión de 100 a 80 o menos, dejando las demás opciones por defecto (el formato a guardar debe ser *.JPG). La misma imagen, con un 75% de compresión, pesará 62kb en vez de 200kb, y la diferencia será apenas perceptible.

A modo de experimento, podemos seguir comprimiendo para probar cuál es el mínimo peso al que podemos llegar sin perder calidad de imagen.

Consideraciones finales

• PhotoFiltre tiene un montón de herramientas que podrás probar para mejorar tus imágenes (filtros y marcos, por ejemplo): ofrece lo esencial para quienes comienzan en el mundo del retoque fotográfico.
• Para ahorrar tiempo, prefiere comprimir las imágenes JPG en PhotoFiltre a un 80%, y sólo evaluando si la calidad y el peso son los adecuados, considera comprimir más o menos.
• Cabe preguntarse cuál es el peso ideal para una imagen de una entrada de blog. David Cantone piensa que lo ideal es que las imágenes pesen entre 20 y 40kb, pero buscando siempre el equilibrio entre peso y calidad.

Posts relacionados

• Subir imágenes a Photobucket con un click
• Photophin: Fotos gratuitas con licencia Creative Commons para bloggers
• Sprixi: Un buscador de imágenes de libre uso

Leer el post original :

Optimizar imágenes para la web con PhotoFiltre

Optimizar imágenes para la web con PhotoFiltre

Quienes comienzan con un blog, generalmente omiten un paso fundamental para mejorar el rendimiento y la carga de su blog: la optimización de imágenes para la web. Optimizar las imágenes es especialmente útil para mejorar la usabilidad de nuestro sitio y reducir el porcentaje de rebote de los visitantes. Usualmente, cuando hablamos de optimización para la web, nos referimos a la compresión de imágenes, esto es, la reducción de su tamaño y peso, sin afectar visiblemente la calidad del archivo original.

¿Qué formato usar?

En general, prefiero usar *.PNG para el diseño del blog, y *.JPG para las imágenes de las entradas. Hay quienes prefieren usar *.GIF pero, dependiendo del caso, me quedo sólo con los formatos antes mencionados para garantizar la calidad de las imágenes sin que ello perjudique el tiempo de carga del blog.

Reduciendo el tamaño y peso de tus fotos con PhotoFiltre

Uso Photoshop, y también Gimp para editar imágenes, pero considero que son programas algo complejos (y de lenta carga) para una tarea tan simple como la optimización de imágenes para la web, especialmente para quienes no están familiarizados con este tipo de programas. Por ello, uso PhotoFiltre para este tipo de tareas.

PhotoFiltre es un software de edición de imágenes para Windows del cual podemos obtener una versión completamente gratuita y legal (Descarga PhotoFiltre). La versión en inglés pesa 4MB comprimida, y cuenta con archivos de traducción a distintos idiomas que se ponen en la carpeta de instalación del programa. Por ejemplo, si quieres traducir PhotoFiltre al español, deberás copiar el archivo TranslationES.plg en C:Archivos de programaPhotoFiltre, quitando el archivo de traducción al inglés. También hay una versión portable para que lleves en tu memoria USB a todas partes.

Podrás notar que el programa se abre inmediatamente, sin tiempos de espera, y que es muy sencillo de usar. En él, hay cuatro herramientas que uso frecuentemente: Tamaño de Imagen y Tamaño de Lienzo (ambos en el menú Imagen); Cortar, que aparece al presionar el botón derecho del mouse luego de seleccionar una porción de la imagen ;y Compresión, que aparece al momento de guardar las imágenes.

Ejemplo de optimización con PhotoFiltre

Tomé una imagen de Sxc.hu (beautiful woman with sunflowers) de 3888?2592 píxeles y 6,36MB de peso. Sería una locura subirla tal cual y redimensionarla desde el editor de la entrada. Lo ideal es reducir su tamaño desde Tamaño de Imagen, hasta lograr el tamaño que efectivamente vayamos a usar en nuestro blog. Si la columna principal de mi blog tiene 600 píxeles de ancho, ese será el tamaño de referencia al momento de redimensionar.

Personalmente, prefiero usar siempre imágenes de no más de 500px de ancho. Por ello, cambié el tamaño original de la mujer con girasoles a 500?333 píxeles, con un peso de 200kb. Como 200kb aún es mucho, vamos a Archivo/Guardar como y bajamos la Compresión de 100 a 80 o menos, dejando las demás opciones por defecto (el formato a guardar debe ser *.JPG). La misma imagen, con un 75% de compresión, pesará 62kb en vez de 200kb, y la diferencia será apenas perceptible.

A modo de experimento, podemos seguir comprimiendo para probar cuál es el mínimo peso al que podemos llegar sin perder calidad de imagen.

Consideraciones finales

• PhotoFiltre tiene un montón de herramientas que podrás probar para mejorar tus imágenes (filtros y marcos, por ejemplo): ofrece lo esencial para quienes comienzan en el mundo del retoque fotográfico.
• Para ahorrar tiempo, prefiere comprimir las imágenes JPG en PhotoFiltre a un 80%, y sólo evaluando si la calidad y el peso son los adecuados, considera comprimir más o menos.
• Cabe preguntarse cuál es el peso ideal para una imagen de una entrada de blog. David Cantone piensa que lo ideal es que las imágenes pesen entre 20 y 40kb, pero buscando siempre el equilibrio entre peso y calidad.

Posts relacionados

• Subir imágenes a Photobucket con un click
• Photophin: Fotos gratuitas con licencia Creative Commons para bloggers
• Sprixi: Un buscador de imágenes de libre uso

Leer más aquí :

Optimizar imágenes para la web con PhotoFiltre

Añadir Nivo Slider en Blogger

Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configurable.

A continuación verás cómo incorporar Nivo Slider en pocos pasos en cualquier plantilla Blogger.

1. Carga Nivo Slider en tu plantilla

Primero carga la última versión de jQuery desde Google antes del cierre de :

1

?

Estarás añadiendo la versión 2.3 comprimida de Nivo Slider (experimenté problemas con la 2.7.1), con efectos de transición aleatorios.

Los estilos CSS del slider

Ahora, añade los estilos justo antes de ]]> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

/* NIVO SLIDER STYLES */
?
#slider-container {
margin-bottom: 50px;
}
?
.nivoSlider {
position:relative;
}
?
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
?
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
?
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
?
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background: #000;
color:#fff;
opacity:0.8;
width:100%;
z-index:89;
}
?
.nivo-caption p {
padding:5px;
margin:0;
font-size: 14px;
color: #FFF;
text-align: center;
}
?
.nivo-caption a {
display:inline !important;
color: #FFF;
}
?
.nivo-html-caption {
display:none;
}
?
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
?
.nivo-prevNav {
left:0px;
}
?
.nivo-nextNav {
right:0px;
}
?
.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;
}
?
.nivo-controlNav a.active {
font-weight:bold;
}
?
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
?
#slider {
position:relative;
width:560px;
height:280px;
background: #000 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s1600/loading.gif) no-repeat 50% 50%;
}
?
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
?
#slider a {
border:0;
display:block;
}
?
.nivo-controlNav {
position:absolute;
left:210px;
bottom:-30px;
}
?
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://1.bp.blogspot.com/-eVJeiVODCBI/Ts0P4-z2c6I/AAAAAAAACpo/31BXBfAbyP8/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}
?
.nivo-controlNav a.active {
background-position:0 -22px;
}
?
.nivo-directionNav a {
display:block;
width:30px;height:30px;
background:url(http://1.bp.blogspot.com/-MKlz8mA0xb4/Ts0P5ZLkoKI/AAAAAAAACp8/_DAgu3iSJWM/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
?
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
?
a.nivo-prevNav {
left:15px;
}
?
.nivo-caption {
text-shadow:none;
}
?
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

3. Añade el HTML del slider en tu plantilla

Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo

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

?

?
  
?
 
?
 
?
  
?
 
?
 
?
  
?
 
?
 
?
  
?
 
?
 
?
  
?
 
?
 
?
 

?


?


?
      

Jan201203

0

Añadir Nivo Slider en Blogger

Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configurable.

A continuación verás cómo incorporar Nivo Slider en pocos pasos en cualquier plantilla Blogger.

1. Carga Nivo Slider en tu plantilla

Primero carga la última versión de jQuery desde Google antes del cierre de :

1

?

Estarás añadiendo la versión 2.3 comprimida de Nivo Slider (experimenté problemas con la 2.7.1), con efectos de transición aleatorios.

Los estilos CSS del slider

Ahora, añade los estilos justo antes de ]]> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:

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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158

/* NIVO SLIDER STYLES */ ? #slider-container { margin-bottom: 50px; } ? .nivoSlider { position:relative; } ? .nivoSlider img { position:absolute; top:0px; left:0px; } ? .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } ? .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } ? .nivo-caption { position:absolute; left:0px; bottom:0px; background: #000; color:#fff; opacity:0.8; width:100%; z-index:89; } ? .nivo-caption p { padding:5px; margin:0; font-size: 14px; color: #FFF; text-align: center; } ? .nivo-caption a { display:inline !important; color: #FFF; } ? .nivo-html-caption { display:none; } ? .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } ? .nivo-prevNav { left:0px; } ? .nivo-nextNav { right:0px; } ? .nivo-controlNav a { position: relative; z-index:99; cursor:pointer; } ? .nivo-controlNav a.active { font-weight:bold; } ? /*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/ ? #slider { position:relative; width:560px; height:280px; background: #000 url(http://blogmagazine.es/wp-content/uploads/2012/02/acc8d0f6f9oading.gif.gif) no-repeat 50% 50%; } ? #slider img { position:absolute; top:0px; left:0px; display:none; } ? #slider a { border:0; display:block; } ? .nivo-controlNav { position:absolute; left:210px; bottom:-30px; } ? .nivo-controlNav a { width:22px; height: 22px; background: url(http://blogmagazine.es/wp-content/uploads/2012/02/0d9b46875bullets.png.png) no-repeat; text-indent:-9999px; border:0; margin-right:7px; float:left; } ? .nivo-controlNav a.active { background-position:0 -22px; } ? .nivo-directionNav a { display:block; width:30px;height:30px; background:url(http://blogmagazine.es/wp-content/uploads/2012/02/10ab1a1a04arrows.png.png) no-repeat; text-indent:-9999px; border:0; } ? a.nivo-nextNav { background-position:-30px 0; right:15px; } ? a.nivo-prevNav { left:15px; } ? .nivo-caption { text-shadow:none; } ? .nivo-caption a { color:#efe9d1; text-decoration:underline; }

Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

3. Añade el HTML del slider en tu plantilla

Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo

, y en las nuevas, bajo

.

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Este código con condicionales mostrará el slider sólo en la página principal, con 5 diapositivas. Puedes quitar o añadir más, aunque no es recomendable tener más de 6 porque puede retardar demasiado la carga de tu blog.

Para el código de cada diapositiva, tienes que modificar: (1) el enlace que dirige al post que quieras destacar; (2) el título (title) de dicho post; (3) El enlace directo (URL) a la imagen que quieras poner, que debe ser acorde a las dimensiones del slider (560?280 en este caso).

Consideraciones finales

• Esta es la utilización básica de Nivo Slider en Blogger. Puedes hacer todas las modificaciones que quieras, en especial si tienes conocimientos de CSS y HTML.
• Puedes cambiar las opciones y efectos como indica su autor: Nivo Slider jQuery Plugin Usage.
• Recuerda optimizar para la web las imágenes que uses en tu slider: no deben ser demasiadas (5 a 6 como máximo), ni muy pesadas o de gran tamaño.
• Finalmente, aunque las ventajas de Blogger como plataforma gratuita de blogs, son múltiples, hay cosas que siempre deberemos hacer de forma manual. En este caso, la única manera de hacer que tu slider funcione es modificando los códigos de las diapositivas manualmente, de acuerdo a los posts que quieras ir destacando temporalmente.

Posts relacionados

• Incorporar jQuery TipTip en Blogger
• Menú desplegable con jQuery Superfish en Blogger
• Cómo añadir Google Fonts en tu blog de Blogger o WordPress

Leer más:

Añadir Nivo Slider en Blogger

Dec201111

0

¿QUÉ CARACTERIZA A WORDPRESS?

Antes de comenzar con la serie de cursos de wordpress es necesario que conoscan sus caracteristicas…..

Fuente Video:
¿QUÉ CARACTERIZA A WORDPRESS?

Nov201123

0

Tutoriales para WordPress. Capítulo 9 "Temas"

Tutoriales para wordpress, novena entrega “temas”

Fuente Video:
Tutoriales para WordPress. Capítulo 9 "Temas"

Sep201122

0

7.0 Crea una pagina Web! – Etiquetas y Categorías en WordPress.

Bienvenidos a un nuevo vídeo curso de espaciogek.com , Vamos a ver para que se utilizan las categorías y etiquetas en wordpress. Web y Canal de renderschool www.youtube.com www.renderschool3d.com Vídeo anterior al curso: www.youtube.com Tutorial etiquetas 3D: www.youtube.com —————TWITTER: twitter.com —————WEB OFICIAL espaciogek.com —————FACEBOOK tuTEAM facebook.com —————FACEBOOK(App): apps.facebook.com —————FACEBOOK (HAZTE FAN): www.facebook.com —————FORO OFICIAL!: espaciogek.com Sitienes dudas o preguntas no olvides enviarnos un mail a: contacto@espaciogek.com Si quieres soporte en algo agregamer a msn: msn@espaciogek.com skype: thejerrypunck Patrocinado por: Parchate! Estampados Profesionales www.facebook.com OkHosting, Hostings | Dominios okhosting.com

Fuente Video:
7.0 Crea una pagina Web! – Etiquetas y Categorías en WordPress.

« Older Entries  

Categorias

• Blogger
• Bloggers
• Blogs
• Diseño
• General
• Shopping
• Videos
• Wordpress

• 
• 
• 
• 

Tags

avanzado blog Blogger cms Crear css código Cómo Diseño education entertainment español experto facebook functions General google howto & style instalar iphone marketing music news & politics opinion para php plugins principiante programación science & technology seguridad seo shopping sports Tutorial tutoriales tutoriales / trucos twitter video Videos web Wordpress wordpress.com wordpress.org wordpress 3.3

Photos on flickr