Web 2.0

Photophin: Fotos gratuitas con licencia Creative Commons para bloggers

Publicado por Claudia en enero 6, 2012

Photopin

A menudo los bloggers necesitamos imágenes de calidad para complementar nuestros posts. ¿Cómo encontrarlas sin violar las licencias? ¿qué servicio usar?

A la larga, el mejor banco fotográfico termina siendo Flickr. Lo que no me gusta de Flickr, es que resulta un lío buscar fotos cuyas licencias nos permitan usarlas libremente y, más aún, dar con la imagen adecuada que ilustre apropiadamente eso de lo cual hablamos.

Photopin, buscador de imágenes con Creative Commons, nos facilita enormemente el trabajo. Utilizando principalmente el motor de búsqueda de imágenes de Flickr, nos ofrece fotos de gran calidad relacionadas con nuestros términos de búsqueda, las cuales podemos descargar en distintos tamaños (y sin necesidad de registro) para evitar tener que redimensionarlas posteriormente.

Al tratarse de fotos con licencia Creative Commons, no debemos olvidar incluir el respectivo link en nuestras entradas si queremos usarlas gratuitamente con fines personales o comerciales. En ese sentido, el sitio también nos facilita el trabajo al entregarnos el respectivo código HTML para copiar y pegar.

Enlace: PhotoPin | Vía: Pc Digital

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: ,
Herramientas, Redes y marcadores sociales

Coloca un botón compartir de Facebook en tus entradas de Blogger

Publicado por Enrique en enero 2, 2012

Seguro que has visto en algunas entradas de blogs de noticias u otros tipos, que en la esquina del blog está el botón de Facebook que dice “Compartir“. ¿Lo quieres poner en tu blog? Pues este es el lugar correcto para aprender. Veamos este blog de prueba. ¿Puedes ver el enlace compartir? Veamos como se hace.

Hay 3 estilos para este botón.

Primer estilo

El primero es “button”, este botón sólo presenta la imagen compartir sin contar cuantas veces se ha compartido la entrada. Para colocarlo vamos al editor HTML de blogger a expandir artilugios y buscamos:

[Podemos buscar mas fácil poniendo presionando Ctrl + F]

<div class='post-body entry-content'>

Y Justo debajo de eso ponemos:

<b>
<div style='float:right;padding:5px'>
<a name="fb_share" href="http://www.facebook.com/sharer.php">Compartir</a>
</div>
</b>

Y Guardamos.

Segundo estilo

Ahora para poner el estilo numero 2 este es el mismo botón compartir pero presenta cuántas veces ha sido compartido. Buscamos:

<div class=’post-body entry-content’>

Y Justo debajo ponemos:

<b>
<div style='float:right;padding:5px'>
<a href='http://www.facebook.com/sharer.php' name='fb_share'>Compartir</a>
</div>
</b>

Tercer estilo

O, para el tercer estilo en vez de poner el código de arriba ponemos éste:

<b>
<div style='float:right;padding:5px'>
<a href='http://www.facebook.com/sharer.php' name='fb_share'>Compartir</a>
</div>
</b>

Este presentará la caja de las veces que se ha compartido más grande.

 

Espero que esto les haya servido, deje un comentario para saber como le ha ido.

Tags:
Vectores

Christmas Vector: Vectores navideños gratuitos

Publicado por Claudia en diciembre 14, 2011

Hay un sitio que encontré el año pasado, y que les puede ser de utilidad. Se llama “Christmas Vector“, y está dedicado únicamente a la recopilación de vectores navideños. Allí puedes encontrar más de 160 imágenes vectoriales que puedes descargar gratuitamente y usar en tus proyectos.

Enlace: ChristmasVector

¿Qué tal unas lindas tarjetas de navidad con esos vectores? Puedes combinar distintos materiales (fotos, papeles, cintas, etc.) para obtener resultados originales. En Etsy hay mucho material para que te inspires.

Tags: