Añade el widget

Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):

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

<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
 
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
 
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
 
 
if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
 
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
 
 
if (showpostsummary == true) {
 
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}
 
var towrite='';var flag=0;
document.write('<br><strong>');
 
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
 
document.write(towrite);
 
document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Para que funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.

Vista previa del widget

Algunas opciones de configuración…

En general, puede ser que no necesites hacer ningún cambio extra al widget ya añadido; sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.

En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.

Al final del código veremos una serie de variables, donde:

• numposts: indica el número de posts que se muestran (por defecto, “5″).
• numchars: indica el número de caracteres de los resúmenes (por defecto, “80″).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

• showpostthumbnails: muestra miniaturas de imagen.
• displaymore: muestra el enlace “Más”.
• displayseparator: muestra una línea de separación entre cada ítem.
• showpostdate: muestra la fecha de cada post.
• showpostsummary: muestra un resumen de cada post.

Posts relacionados

• Leer más con thumbnail para Blogger
• Dos interesantes hacks vietnamitas para Blogger
• Mostrar anuncios de Adsense sólo a los visitantes de buscadores en WordPress y Blogger

Si buscas mejorar tu pagerank y obtener más visitas para tu blog y eres bueno diseñando plantillas exclusivas para Blogger (o haciendo adaptaciones CSS de temas diseñados para otras plataformas) o tienes alguna que quieras compartir con todo el mundo, te dejo un listado de más de 30 directorios para enviar tus templates.

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

http://www.allblogtools.com/
http://www.bestbloggertemplates.net/
http://besttheme.net/
http://www.bietemplates.com/
http://www.bloggertemplatesblog.com/
http://bloggertemplateshub.com/
http://www.bloggertipz.com/
http://www.bloggertricksandtoolz.com/
http://www.blogspottemplate.net/
http://blogtemplate4u.com/
http://www.blog-zone.info
http://borneotemplates.com/
http://btemplates.com
http://www.btemplates4u.com/
http://www.btheme.info/
http://csstemplates.net/
http://www.coolbthemes.com/
http://www.denidi.net/
http://www.dhetemplate.com
http://javatemplates.com
http://www.mybloggerthemes.com/
http://www.mytemplatez.com/
http://www.newbthemes.com
http://www.premiumbloggertemplates.com/
http://www.premiumbtemplates.com/
http://www.probloggertemplate.com
http://www.raytemplates.com/
http://www.templatebloggers.com
http://www.templategator.net/
http://www.templates-blogger.com/
http://freethemes4all.com/
http://thetemplatebank.com/
http://www.zoomtemplate.com/

Algunas recomendaciones prácticas:

• Procura que tu template se vea limpio, y tenga una mínima calidad para que sea aceptado en los distintos directorios. Plantillas más bonitas, que sirven para múltiples nichos y con más características suelen tener más descargas.
• Incluye instrucciones precisas.
• Busca algún servicio de hosting seguro para subir tus plantillas, si no dispones de hosting propio. Por ejemplo, Box.net.
• Incluye los scripts en la misma plantilla (si usa), y hospeda las imágenes en Blogger o álbumes web de Picasa (no photobucket ni imageshack, porque el ancho de banda es limitado).
• No olvides incluir un enlace a tu sitio en el footer, indicando la licencia de la plantilla.

Posts relacionados

• Los 12 mejores lugares para encontrar plantillas Blogger (según Blogger)
• Trix: Generador de plantillas Blogger
• 3 plantillas CSS adaptadas para Blogger

Esta nueva mejora el sistema de comentarios de Blogger funciona automáticamente en nuevas plantillas y sin necesidad de entrar en Blogger in Draft, siempre y cuando el usuario, en su Panel de Control, haya elegido las siguientes opciones:

• En Configuración/Otros/Permitir feed del blog: Completo
• En Configuración/Entradas y comentarios/Ubicación de los comentarios: Debajo de la entrada

Lo positivo de los comentarios anidados, es que al incluir el botón “Responder”, facilitan la interacción entre los visitantes, permitiendo identificar claramente cuándo hacen comentarios generales o cuándo están respondiendo a alguien en particular. No obstante, los comentarios anidados funcionarán sólo en las nuevas plantillas Blogger lanzadas en año pasado y en instalaciones recientes de las plantillas de diseño de 2006.

Quienes hayan instalado plantillas diseñadas por terceras partes o hecho modificaciones en el código, deberán “Restablecer plantillas de artilugios a los valores predeterminados“, en la Edición de HTML del blog y previo respaldo de la plantilla por si algo no llegara a funcionar bien.

Vía | Way2Blogging, Google Operating System

Posts relacionados

• Blogger permite que muestres tu avatar en los comentarios
• Guía completa para solucionar los errores BX- en Blogger
• Blogger quiere mejorar

A simple vista se ve bonito, y le otorga un toque muy moderno a tu blog. No obstante, no tiene por qué gustarte, y no puedes quitarlo desde el menú de configuración ni mucho menos removiendo código en tu plantilla.

Lo peor ocurre si tienes Lytebox o un plugin similar instalado, porque se abrirán dos ventanas modales en vez de una. Además, puede ocasionar conflictos con los links que has añadido a las imágenes, o resultar demasiado pesado o molesto.

Si definitivamente no te gustó y ya no lo quieres ver más, Mark de Code from English Coffe Drinker (vía Vagabundia) recomienda añadir la siguiente función llamada “kill lightbox” antes de </head> para deshabilitar el lightbox de Blogger:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName('img');
 for (var i = 0 ; i < images.length ; ++i) {
  images[i].onmousemove=function() {  
   var html = this.parentNode.innerHTML;   
   this.parentNode.innerHTML = html;
  };
 }
}
 
if (window.addEventListener) {
 window.addEventListener('load',killLightbox,false);
} else {
 window.attachEvent('onload',killLightbox);
}
//]]>
</script>

Santo remedio.

No hay posts relacionados

En Blogger puedes añadir tooltips con jQuery TipTip de manera similar a la incorporación en WordPress:

1. Asegúrate de tener cargado jQuery en tu blog

Si ya lo tienes, no lo cargues de nuevo. Si no, puedes incluirlo pegando el siguiente código en tu plantilla desde Diseño/Edición de HTML, antes de </head>:

1

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

De esta manera, se estará cargando la última versión (minificada) de jQuery desde Google.

2. Agrega TipTip directamente en tu plantilla

Antes de </head>, pega los siguientes códigos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type='text/javascript'>
//<![CDATA[
 
 /*
 * TipTip
 * Copyright 2010 Drew Wilson
 * www.drewwilson.com
 * code.drewwilson.com/entry/tiptip-jquery-plugin
 *
 * Version 1.3   -   Updated: Mar. 23, 2010
 *
 * This Plug-In will create a custom tooltip to replace the default
 * browser tooltip. It is extremely lightweight and very smart in
 * that it detects the edges of the browser window and will make sure
 * the tooltip stays within the current window size. As a result the
 * tooltip will adjust itself to be displayed above, below, to the left 
 * or to the right depending on what is necessary to stay within the
 * browser window. It is completely customizable as well via CSS.
 *
 * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function($){$.fn.tipTip=function(options){var defaults={activation:"hover",keepAlive:false,maxWidth:"200px",edgeOffset:3,defaultPosition:"bottom",delay:400,fadeIn:200,fadeOut:200,attribute:"title",content:false,enter:function(){},exit:function(){}};var opts=$.extend(defaults,options);if($("#tiptip_holder").length<=0){var tiptip_holder=$('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');var tiptip_content=$('<div id="tiptip_content"></div>');var tiptip_arrow=$('<div id="tiptip_arrow"></div>');$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))}else{var tiptip_holder=$("#tiptip_holder");var tiptip_content=$("#tiptip_content");var tiptip_arrow=$("#tiptip_arrow")}return this.each(function(){var org_elem=$(this);if(opts.content){var org_title=opts.content}else{var org_title=org_elem.attr(opts.attribute)}if(org_title!=""){if(!opts.content){org_elem.removeAttr(opts.attribute)}var timeout=false;if(opts.activation=="hover"){org_elem.hover(function(){active_tiptip()},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}else if(opts.activation=="focus"){org_elem.focus(function(){active_tiptip()}).blur(function(){deactive_tiptip()})}else if(opts.activation=="click"){org_elem.click(function(){active_tiptip();return false}).hover(function(){},function(){if(!opts.keepAlive){deactive_tiptip()}});if(opts.keepAlive){tiptip_holder.hover(function(){},function(){deactive_tiptip()})}}function active_tiptip(){opts.enter.call(this);tiptip_content.html(org_title);tiptip_holder.hide().removeAttr("class").css("margin","0");tiptip_arrow.removeAttr("style");var top=parseInt(org_elem.offset()['top']);var left=parseInt(org_elem.offset()['left']);var org_width=parseInt(org_elem.outerWidth());var org_height=parseInt(org_elem.outerHeight());var tip_w=tiptip_holder.outerWidth();var tip_h=tiptip_holder.outerHeight();var w_compare=Math.round((org_width-tip_w)/2);var h_compare=Math.round((org_height-tip_h)/2);var marg_left=Math.round(left+w_compare);var marg_top=Math.round(top+org_height+opts.edgeOffset);var t_class="";var arrow_top="";var arrow_left=Math.round(tip_w-12)/2;if(opts.defaultPosition=="bottom"){t_class="_bottom"}else if(opts.defaultPosition=="top"){t_class="_top"}else if(opts.defaultPosition=="left"){t_class="_left"}else if(opts.defaultPosition=="right"){t_class="_right"}var right_compare=(w_compare+left)<parseInt($(window).scrollLeft());var left_compare=(tip_w+left)>parseInt($(window).width());if((right_compare&&w_compare<0)||(t_class=="_right"&&!left_compare)||(t_class=="_left"&&left<(tip_w+opts.edgeOffset+5))){t_class="_right";arrow_top=Math.round(tip_h-13)/2;arrow_left=-12;marg_left=Math.round(left+org_width+opts.edgeOffset);marg_top=Math.round(top+h_compare)}else if((left_compare&&w_compare<0)||(t_class=="_left"&&!right_compare)){t_class="_left";arrow_top=Math.round(tip_h-13)/2;arrow_left=Math.round(tip_w);marg_left=Math.round(left-(tip_w+opts.edgeOffset+5));marg_top=Math.round(top+h_compare)}var top_compare=(top+org_height+opts.edgeOffset+tip_h+8)>parseInt($(window).height()+$(window).scrollTop());var bottom_compare=((top+org_height)-(opts.edgeOffset+tip_h+8))<0;if(top_compare||(t_class=="_bottom"&&top_compare)||(t_class=="_top"&&!bottom_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_top"}else{t_class=t_class+"_top"}arrow_top=tip_h;marg_top=Math.round(top-(tip_h+5+opts.edgeOffset))}else if(bottom_compare|(t_class=="_top"&&bottom_compare)||(t_class=="_bottom"&&!top_compare)){if(t_class=="_top"||t_class=="_bottom"){t_class="_bottom"}else{t_class=t_class+"_bottom"}arrow_top=-12;marg_top=Math.round(top+org_height+opts.edgeOffset)}if(t_class=="_right_top"||t_class=="_left_top"){marg_top=marg_top+5}else if(t_class=="_right_bottom"||t_class=="_left_bottom"){marg_top=marg_top-5}if(t_class=="_left_top"||t_class=="_left_bottom"){marg_left=marg_left+5}tiptip_arrow.css({"margin-left":arrow_left+"px","margin-top":arrow_top+"px"});tiptip_holder.css({"margin-left":marg_left+"px","margin-top":marg_top+"px"}).attr("class","tip"+t_class);if(timeout){clearTimeout(timeout)}timeout=setTimeout(function(){tiptip_holder.stop(true,true).fadeIn(opts.fadeIn)},opts.delay)}function deactive_tiptip(){opts.exit.call(this);if(timeout){clearTimeout(timeout)}tiptip_holder.fadeOut(opts.fadeOut)}}})}})(jQuery);
 
//]]>
</script>
 
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".tooltip").tipTip();
});
//]]>
</script>

Ahora, antes de ]]></b:skin>, copia el siguiente código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

/* TipTip CSS - Version 1.2 */
 
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
 
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
 
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
 
#tiptip_holder.tip_right {
padding-left: 5px;
}
 
#tiptip_holder.tip_left {
padding-right: 5px;
}
 
#tiptip_content {
font-family: Arial, sans-serif;
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
*background-color: #000;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
 
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
 
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
 
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
 
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
 
/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}

3. Haz que funcione

Tanto en tus entradas como en tu plantilla puedes incluir TipTip de forma manual usando el atributo “title” y la clase (class=”tooltip”) en tus enlaces, de la siguiente manera:

1

<a href="http://chicablogger.com" title="Recursos para Blogger y WordPress" class="tooltip">Chica Blogger</a>

Posts relacionados

• Incorporar jQuery TipTip en WordPress
• Menú desplegable con jQuery Superfish en Blogger
• Cómo añadir paginación en WordPress sin plugin

La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.

Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.

Cómo hacerlo, paso por paso:

1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.

2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.

Ahora, sólo agrega tu enlace, como se muestra a continuación:

Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.

Posts relacionados

• Pure CSS Menu: Generador de menús desplegables sin javascript
• Menú desplegable con jQuery Superfish en Blogger
• Sencilla opción para proteger los enlaces del diseñador en Temas WordPress

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.

3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (‘). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}

Posts relacionados

• Menús CSS desplegables sin javascript
• 9 sitios para descargar menús CSS
• CSS-sprit.es: Un generador de CSS sprites

Blogger es la plataforma preferida por millones de usarios alrededor del mundo no sólo porque es gratis, sino también porque es relativamente “segura”, fácil de usar, y maneja políticas poco restrictivas. En un par de minutos ya puedes tener un blog funcionando, con subdominio propio y plantilla estándar. Lo básico que aparenta ser, hace pasar por alto el tener que hacer un respaldo completo de tu blog, cosa que por las dudas (o para evitar futuros problemas) debieras hacer sí o sí.

Entonces, ¿cómo hacer Backup en Blogger?

1. Backup de posts y comentarios.

Puedes hacerlo directamente desde el panel, en Configuración/Básico/Exportar blog, descargando el correspondiente archivo .xml a tu escritorio.

Desde que Blogger habilitara la función para importar/exportar entradas, no se hace necesario utilizar programas como Blogger Backup Utility; sin embargo, es recomendable hacer uso de DownThemAll, una extensión para Mozilla Firefox que te permite descargar todos los links de las imágenes contenidos en un sitio web. Puede ser especialmente útil si alojas tus imágenes en hostings gratuitos, dado que en lgún momento tu cuenta podría sobrepasar el ancho de banda ofrecido.

2. Backup de plantilla y widgets

Antes de instalar una nueva plantilla o de hacer grandes cambios en el código, lo mejor es respaldar tu vieja plantilla. La práctica dice que no todo siempre resulta como estaba planeado, o que quizás te aburras del diseño actual y quieras volver al anterior.

A la hora de hacer el respaldo de la plantilla, lo mejor es hacerlo desde la opción “Descargar plantilla completa” de Diseño/Edición de HTML. Si haces copy/paste en un archivo de texto, podrías no estar copiando todo el código, o tener graves desajustes en el diseño.

No existe manera de respaldar los artilugios o widgets de HTML o texto que no se agregan desde Blogger mismo, pero es práctico hacer un copy/paste de su contenido en uno o varios blocks de notas.

3. Backup de imágenes y archivos contenidos en plantillas

Cuando comienzas a usar Blogger, no sueles preguntarte dónde están hospedadas las imágenes que aparecen en la plantilla XML. Se da por sentado que se almacenan en los servidores de Blogger.com, porque las imágenes sencillamente “están ahí”. En las plantillas que vienen por defecto en Blogger, no es necesario relojar ninguna imagen; pero, en las plantillas diseñadas o adaptadas por terceros, hacerlo es un deber, especialmente si ves que el hosting de imágenes usado es PhotoBucket, Imageshack u otro que sea gratis y tenga un ancho de banda limitado.

Debo reconocer que siempre fui un poco porfiada al respeto, pero Francisco me enseñó que no existe un lugar más seguro para alojar imágenes que Blogger mismo, con ayuda del menú Herramientas/Información de la página/Medios de Firefox para descargar todas las imágenes de una sola vez y la extensión DragDropUpload para subirlas de un viaje. Si quien distribuye la plantilla que usas alojó las imágenes en Imageshack o Photobucket (en especial este último), su uso masivo hará que en cosa de semanas o un par de meses parte importante del diseño se pierda.

Pasa exactamente lo mismo con los archivos javascript de plantillas tipo magazine o con bonitos slideshows, que dejan de funcionar de la noche a la mañana, para muchos “inexplicablemente”. Para prevenir imprevistos, es recomendable descargar todos los archivos javascript de tu plantilla (buscando “.js” con ayuda del buscador de tu navegador y copypasteando la URL en la barra de direcciones) al menos para mantenerlos a mano por si el hosting original dejase de funcionar, cosa que siempre ocurre en algún momento. Si no tienes una cuenta para alojar archivos javascript, siempre existe la opción segura de pegar el contenido en la plantilla misma, bajo ]]></b:skin>, de la siguiente manera:

<script type='text/javascript'>
//<![CDATA[
contenido del archivo
//]]>
</script>

El seguimiento de pasos simples (que a veces no se realizan por pereza) puede ahorrarte futuros dolores de cabeza.

* Imagen de Sⓘndy, vía Flickr, bajo licencia Creative Commons Attribution-ShareAlike.

Posts relacionados

• Blogger, ahora también premium

Hace un tiempo, Cebong mostraba una forma de crear un widget de etiquetas multicolumnas añadiendo una nueva sección en el footer o la sidebar.

En realidad, es mucho más simple de lo que parece: no es otra cosa que determinar anchos (%) para las listas de esa sección. En otras palabras, puedes hacer lo mismo si ya añadiste un widget de etiquetas a tu sidebar, pero con un código CSS simplificado a ser añadido antes de ]]></b:skin>:

#Label1 ul li{
float: left;
width: 45%;
}

A considerar:

• El ancho (width) va a depender de cuántas columnas quiera incluir, y no siempre es exacto, porque el widget de etiquetas va a heredar el padding de las listas de la sidebar (.sidebar ul li o similar). En este caso, 45% está bien para dos columnas; para 3 columnas, quizá ande bien con 30 ó 33%.
• El selector #Label1, puede variar. Por defecto, el widget de etiquetas (si tienes sólo uno), debiera ser Label1; pero, si tienes dos, tendrías un widget de ID Label1, y otro Label2.
• Puedes dividir cualquier widget de lista (ejemplo, lista de enlaces) de la misma forma, averiguando su ID.

Posts relacionados

• Cómo crear dos columnas de posts en Blogger
• Títulos de dos colores en el sidebar de Blogger
• Widget de Posts recientes con imágenes para Blogger

¿Cómo incluir estos botones cuando usas Blogger? Hay al menos 6 formas de hacerlo:

AddThis

Una de las herramientas más populares. Es personalizable, soporta 50 lenguajes (se traduce automáticamente) y más de 150 servicios, incluyendo Twitter, Facebook, Myspace, Menéame y opciones para compartir por correo y agregar a favoritos.

Te da la opción de instalar en la sidebar o incluir el código en el post-footer de tu plantilla, pudiendo hacer un seguimiento de tus estadísticas (mediante registro).

ShareThis

Otra conocida opción fácil de instalar, pero que requiere registro. Se añade como si fuera un widget, incorporándose automáticamente al pie de tus posts. Eso sí, es mucho más limitado que AddThis: Aunque te da la posibilidad de mostrar botones rotatorios, es escasamente personalizable; y además, soporta sólo 45 servicios y está en inglés.

AddtoAny

Uno de mis favoritos: amigable, personalizable, e incorpora una gran cantidad de servicios (más de 120), incluyendo Menéame (aunque sigo extrañando a Bitácoras en el listado).
Entre las opciones de customización incluye: cambio de colores, encabezados, prioritización de servicios y posibilidad de incorporar servicios adicionales, entre otras. También te ofrece un botón adicional que facilita la suscripción a tus lectores.
Se instala manualmente copypasteando el código bajo el post-body de tu plantilla.

Wikio Buttons

Es el botón de suscripción universal para compartir y votar del cual hablaba hace meses. Puedes generarlo desde la sección de Herramientas de Wikio, escogiendo los servicios que vas a añadir. Lo que me gusta de Wikio, es que es simple pero llamativo, y que incorpora redes sociales hispanas como Bitácoras, Menéame, Fresqui y el mismo Wikio.

Si tienes problemas para incluirlo en tu blog, puedes revisar el video que preparó Wikio (para instalar como widget) o revisar el post de Rosa María para añadir en el pie de las entradas.

Pretty Sociable

Si eres lector frecuente de Mashable, sabrás que en Septiembre pasado implementaron un sistema para compartir imágenes y videos con el arrastre de tu mouse. El servicio, gentileza de Meebo (sí, el mismo sitio donde puedes acceder a tu messenger online), es pago; no obstante, puedes implementar tu propia versión – que nada tiene que envidiarle a Meebo – con jQuery. En Eliseos, Alexis explica cómo hacerlo.

Sexy bookmarks

Probablemente has sexy bookmarks visto en muchos blogs en inglés, con mensajes como “sharing is sexy” o “sharing is caring”. La gracia de sexy bookmarks, es el simple pero atractivo efecto mouse-hover que da “movimiento” a los íconos y hace honor a su nombre.
El plugin ha sido adaptado por CSS Reflex para ser incorporado en Blogger y recreado en su versión latina por Pizcos (recomendado). Puedes adaptar la técnica para poner tus propios botones.

¿Cuál preferir?
Pienso que siempre es mejor añadir íconos de social media de tu preferencia para que éstos se adapten al diseño. Sino, me parece que el botón de Wikio es la mejor alternativa: es funcional, estético e incluye las redes sociales hispanas.

Posts relacionados

• Wikio Buttons: Botones para compartir contenidos
• Coloca un botón compartir de Facebook en tus entradas de Blogger
• ShareTabs: Una forma de compartir tus links como miniaturas