Productos Google, Tutoriales

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

Publicado por Claudia en enero 7, 2012

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.

Google Apps

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.

formulario Google Apps

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 <head> 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?
Tags:
Tutoriales

Optimizar imágenes para la web con PhotoFiltre

Publicado por Claudia en enero 5, 2012

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.

PhotoFiltre

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 programa\PhotoFiltre, 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.

PhotoFiltre

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.
Tags:
Tutoriales

Añadir Nivo Slider en Blogger

Publicado por Claudia en enero 3, 2012

Nivo Slider

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 </body>:

1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Luego, incluye el script de Nivo Slider directamente en tu plantilla justo abajo del código anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Nivo Slider v2.3
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);
//]]>
</script>
 
<script type='text/javascript'>
jQuery(window).load(function() {
 jQuery(&#39;#slider&#39;).nivoSlider();
 });
</script>

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 ]]></b:skin> 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 <div id='main-wrapper'>, y en las nuevas, bajo
<div class='main-outer'>.

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
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='crosscol'>
<div id='slider-container'>
 
<div id='slider'>
 
  <a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>
 
 <img alt='' src='http://4.bp.blogspot.com/-dPjpuC2oyXM/Ts2hwaYzI_I/AAAAAAAACq8/PRrUt7GLXV8/s1600/5.jpg' title='Introducing WP Theme'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=21' title='Another image in a post'>
 
 <img alt='' src='http://1.bp.blogspot.com/-ENdSWyspy08/Ts2iKJP5szI/AAAAAAAACrI/QAvlVIReZQA/s1600/4.jpg' title='Another image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=17' title='An image in a post'>
 
 <img alt='' src='http://4.bp.blogspot.com/-bUQ83dpjBt8/Ts2ij6O9sFI/AAAAAAAACrU/4PSoxsafNug/s1600/31.jpg' title='An image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=6' title='Testing HTML elements'>
 
 <img alt='' src='http://1.bp.blogspot.com/-mUFbtJqKGsE/Ts2i2Ty0AAI/AAAAAAAACrg/WwLy-uer-5w/s1600/2.jpg' title='Testing HTML elements'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=1' title='Category Hierarchy'>
 
 <img alt='' src='http://3.bp.blogspot.com/-uZG3YUPpUwg/Ts2jH1REctI/AAAAAAAACrs/qgyW1JddFRQ/s1600/1.jpg' title='Category Hierarchy'/>
 
 </a>
 
 </div>
 
<br clear='all'/>
 
</div>
 
      </div>
</b:if>
</b:if>

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.
Tags: ,
Tutoriales

Menú desplegable con jQuery Superfish en Blogger

Publicado por Claudia en octubre 30, 2011

Tiempo atrás les hablaba de un tutorial para crear menús desplegables sólo con CSS. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de implementar, basada en los menús desplegables de las plantillas de Premium Blogger Templates. Este menú usa el plugin jQuery Superfish, y debiese funcionar bien para todos.

Agregando un menú desplegable a tu plantilla Blogger, paso a paso

1. Carga la última versión de jQuery

Si no tienes jQuery en tu plantilla, puedes cargarlo directamente desde Google, incluyendo la siguiente línea de código en la Edición de HTML de tu plantilla (todos los cambios se harán allí mismo), justo antes de </body>:

1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

2. Agrega Superfish

Sigue leyendo

Tags: ,
Tutoriales

Cómo añadir Google Fonts en tu blog de Blogger o WordPress

Publicado por Claudia en agosto 31, 2011

Añadir fuentes personalizadas es una tendencia en diseño web que quizás nunca pase de moda: está muy en voga, le da un toque personal a tu blog y permite mejorar su estética. Y a la hora de hacerlo, Google Fonts es una de las mejores opciones, porque es fácil y rápido de incorporar y cuenta con una numerosa cantidad de familias de fuentes (actualmente, 247 y creciendo).

google web fonts

Cómo hacerlo, paso a paso:

1. Selecciona una fuente

Ve a Google Fonts y elige la fuente que más te agrade. Si a primera vista no logras decidirte, puedes añadir varias fuentes a tu colección (pulsando el botón “Add to collection“). Una vez que has escogido, haz click en “Use” o “Quick-use“.

2. Obtén el código

Hay fuentes con 1, 2 ó más estilos. Naturalmente, una fuente con más estilos te permite más opciones: normal, negrita, cursiva, etc.

Yo elegí la fuente “Droid Serif“, y seleccioné los 4 estilos que tiene.

El sitio me entregará un código como el siguiente:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Dicho código debe ser incorporado exactamente después de <head>. En WordPress, en tu header.php, en Blogger, en Diseño/Edición de HTML (al inicio de tu plantilla).

Antes de guardar, no olvides añadir un slash (/) de cierre antes del signo “mayor que“, de modo que el código a añadir quede de la siguiente forma:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

3. Modifica los encabezados en tu hoja de estilos

Busca los lugares donde hay encabezados (h1, h2, h3, etc.), e incorpora el nombre de la fuente como normalmente lo harías con cualquier otra fuente, usando la propiedad “font-family“.

Ejemplo:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
}

Nótese que aquí también se utiliza la propiedad “font-weight“. En este caso, así como en el de muchas otras fuentes, “400″ es normal y “700″ es bold o negrita.

También puedes cambiar el estilo a cursiva (o itálico) con la propiedad “font-style“:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
font-style: italic;
}

Finalmente, aquí hay otro ejemplo, que incorpora además la propiedad “text-shadow“:

#header h1 {
font-family: 'Droid Serif', Helvetica, arial, sans-serif;
color: #000;
font-size: 40px;
font-weight: 700;
font-style: italic;
text-shadow: 2px 2px 0 #E5E0D0;
}
Tags: , , ,