Un rollover es una aplicación práctica y sencilla relacionada con el tratamiento de imágenes. El efecto creado es dinámico y consiste en  el paso de una imagen a otra con tan solo poner el cursor del mouse sobre ellas. Las imágenes se alternan de este modo. Cuando el cursor se va, vuelven a su estado inicial.

Un ejemplo:


  • Ubicación: gadget java.
  • Proceso:

Tan solo hay que pegar este script en el gadget:

<script language="JavaScript"><a href=""></a> 
knighted=new Image(200,381)//tamaño de imagen 1
knighted.src="URL IMAGEN 1"
knightred=new Image(200,381)//Tamaño de imagen 2
knightred.src="URL IMAGEN 2"
</script>
<!-- efecto -->
<a
onmouseout="document.knight.src=knighted.src" onmouseover="document.knight.src=knightred.src" target="_blank"><img src="URL IMAGEN 1"
border="0" name="knight"/>
</a
onmouseout="document.knight.src=knighted.src"></center></p>

Sustituir URL IMAGEN 1 (está dos veces) y URL IMAGEN 2 por los enlaces de las imágenes. Hay que tener en cuenta el tamaño de las mismas en anchura y altura para que el rollover quede mejor. Es recomendable que las dos imágenes tengan las mismas medidas.

Las imágenes que se publican en los blogs están estáticas, no tienen ningún tipo de dinamismo. Con este tutorial sencillo y breve, las imágenes tendrán un efecto de giro al pasar el cursor del mouse por ellas. Así ganamos ese dinamismo perdido o faltante. El resultado final será así:
 
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: pegar los siguientes estilos antes de ]]></b:skin>

.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}

.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}

Hay que modificar el ancho (width) y alto (height) de las imágenes que se tengan en el momento, que por defecto están a 220 y 150 px, respectivamente. Si se desea se pueden cambiar los colores del background.

2.) EN EL GADGET: pegar este código

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Tan solo resta poner la URL del enlace que redireccionará la imagen, y también la URL de esta. El código se puede copiar tantas veces como imágenes queramos poner en el gadget. Si no se desea redireccionar la imagen a un enlace, tan solo hay que copiar el código sin la línea de la URL-ENLACE <a href="URL-ENLACE">. Solo hay que dejar la clase "imagerotate" y la línea de la URL-IMAGEN.

Las imágenes que se publican en los blogs están estáticas, no tienen ningún tipo de dinamismo. Con este tutorial sencillo y breve, las imágenes tendrán un efecto de giro al pasar el cursor del mouse por ellas. Así ganamos ese dinamismo perdido o faltante.

El resultado final será así:
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: pegar los siguientes estilos antes de ]]></b:skin>

.imagerotate img {
-moz-border-radius:5px;
-moz-transition: -moz-transform 1s ease 0s;
background:#B292A9 !important;
border: 1px solid #ffffff !important;
border-radius: 5px 5px 5px 5px;
height: 150px; margin: 5px;
padding: 0px;
position: relative;
width: 220px;
}

.imagerotate img:hover {
background:#AD184E !important;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-ms-transform:rotate(15deg);
}

Hay que modificar el ancho (width) y alto (height) de las imágenes que se tengan en el momento, que por defecto están a 220 y 150 px, respectivamente. Si se desea se pueden cambiar los colores del background.

2.) EN EL GADGET: pegar este código

<div class="imagerotate">
<a href="URL-ENLACE"><img alt="" src="URL-IMAGEN" /></a>
</div>

Tan solo resta poner la URL del enlace que redireccionará la imagen, y también la URL de esta. El código se puede copiar tantas veces como imágenes queramos poner en el gadget. Si no se desea redireccionar la imagen a un enlace, tan solo hay que copiar el código sin la línea de la URL-ENLACE <a href="URL-ENLACE">. Solo hay que dejar la clase "imagerotate" y la línea de la URL-IMAGEN.

Foto cortesía de Diyva
Con este truco se podrá visualizar en un gadget varias entradas aleatorias del blog con una imagen en miniatura. Una manera diferente de navegar por los posts publicados.
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: antes de ]]></b:skin> pegar lo siguiente (bloque de las miniaturas, perfectamente editable en el borde, alto y ancho de la imagen, fondo y flotamiento a la derecha o a la izquierda):




#random-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px}

2.) EN UN GADGET:  sencillamente pegar este script:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comentarios';
var rdp_disable='Deshabilitados';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh4.googleusercontent.com/-n3jTXCx96lw/UCs8lm3eUbI/AAAAAAAAAnE/XfxOEHz8GGc/s48/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Del script hay que tener en cuenta lo siguiente para editarlo, si se desea.

>> var rdp_numposts=5; número de post a mostrar.
>> var rdp_snippet_length=número de caracteres a mostrar.
>> var rdp_info='yes'; datos que aparecen debajo del nombre del post (la fecha de publicación y el número de comentarios (poner "no" si no queremos tales datos).
Foto cortesía de Diyva
Con este truco se podrá visualizar en un gadget varias entradas aleatorias del blog con una imagen en miniatura. Una manera diferente de navegar por los posts publicados.
  • Ubicación: plantilla y gadget java.
  • Proceso:

1.) EN LA PLANTILLA: antes de ]]></b:skin> pegar lo siguiente (bloque de las miniaturas, perfectamente editable en el borde, alto y ancho de la imagen, fondo y flotamiento a la derecha o a la izquierda):




#random-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px}

Clic para agrandar (+)
El formulario de comentarios en  Blogger peca de soso, muy pobre y nada alegre a la vista. Con este truco diremos adios a todo eso ya que efectuaremos un diseño acorde con lo que todos nos gustaría: un formulario elegante (no olvidemos que lo verán los comentaristas de nuestro blog). Le pondremos una imagen de cabecera y un fondo con borde estiloso.

DISEÑO DE MENSAJE

Para este primer caso, sustituiremos el clásico enlace "Publicar un comentario en la entrada" por una imagen. En el ejemplo, es la imagen conjunta de "Publica tu bibliofília" y "¡Participa y opina! ¿Qué piensas?".

  • Ubicación: plantilla.
  • Proceso:
  
1.) Buscar este bloque de códigos

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

2.) Y seguidamente sustituir la línea en verde y subrayada por esta otra <img src="URL DE LA IMAGEN"/> (la imagen puede crearse en MyLiveSignature o Cool Text).


DISEÑO DEL CAJÓN O VENTANA DE COMENTARIOS

Ahora toca diseñar el cajoncito de comentarios. Se podrá visualizar una imagen como fondo, la cual se aconseja sea de colores o tonos pastel para no desentonar mucho. En el ejemplo se ve que el fondo es de un grisáceo claro.

  • Ubicación: plantilla.
  • Proceso:

>> Buscar este código ]]></b:skin> y antes de éste pegar lo siguiente (es perfectamente modificable acorde a los gustos personales):

.comment-form {
background:#c0c0c0 url (url de la imagen si queremos fondo);
margin: 0 auto;
border:2px dashed #000;
padding-left:5px;
padding-right:5px;
}

NOTA IMPORTANTE: este truco es incompatible con los comentarios anidados. Si se aplica este la imagen del diseño de mensaje del formulario ("Publica tu bibliofília...") no saldrá visualizada si hay comentarios en la entrada (tan solo basta con que haya uno solo). Si no hay comentarios, el diseño completo del formulario se verá perfectamente.

Clic para agrandar (+)
El formulario de comentarios en  Blogger peca de soso, muy pobre y nada alegre a la vista. Con este truco diremos adios a todo eso ya que efectuaremos un diseño acorde con lo que todos nos gustaría: un formulario elegante (no olvidemos que lo verán los comentaristas de nuestro blog). Le pondremos una imagen de cabecera y un fondo con borde estiloso.

DISEÑO DE MENSAJE

Para este primer caso, sustituiremos el clásico enlace "Publicar un comentario en la entrada" por una imagen. En el ejemplo, es la imagen conjunta de "Publica tu bibliofília" y "¡Participa y opina! ¿Qué piensas?".

  • Ubicación: plantilla.
  • Proceso:
  
1.) Buscar este bloque de códigos

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

2.) Y seguidamente sustituir la línea en verde y subrayada por esta otra <img src="URL DE LA IMAGEN"/> (la imagen puede crearse en MyLiveSignature o Cool Text).

Blogger no ofrece nada similar a lo que, en cambio, sí figura en Wordpress, el mayor competidor de la plataforma de blogs de Google. Consiste en una cajita descriptiva a final de las entradas sobre el autor del blog. Incluye unas líneas de perfil y la imagen de la misma. Incluirlo en el diseño de Blogger es muy fácil.
 
  • Ubicación: plantilla.
  • Proceso: 
1.)  Eliminar el siguiente código (es lo que detalla el "Publicado por"):

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

2.) Debajo de <data:post.body/> pegar lo siguiente:

<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>

<style>

#Sobreauttrblcn {font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;color:#424242;font-size:12px;letter-spacing:0;margin:20px 0;padding:6px;text-transform:none;}
#blAAut {border-bottom:3px solid #DDDDDD;width:80%;}
#Sobreauttrblcn strong {padding-left:6px;color:#333333;font-weight:bold;font-size:13px;}
#Sobreauttrblcn img {background:#FFFFFF;border:1px solid #CCCCCC;float:right;
height:70px;margin:4px 4px 8px 6px;width:70px;}
</style>

>> Al código hay que efectuarle unos ligeros cambios:

URL IMAGEN: avatar del perfil.
AUTOR DEL ARTÍCULO: nombre del autor bloggero.
BREVE BIOGRAFÍA: texto descriptivo del perfil.  

El cajoncito aparecerá automáticamente al final de cada entrada escrita. 
 
Blogger no ofrece nada similar a lo que, en cambio, sí figura en Wordpress, el mayor competidor de la plataforma de blogs de Google. Consiste en una cajita descriptiva a final de las entradas sobre el autor del blog. Incluye unas líneas de perfil y la imagen de la misma. Incluirlo en el diseño de Blogger es muy fácil.
 
  • Ubicación: plantilla.
  • Proceso: 
1.)  Copiar el siguiente bloque después de esta línea <div class='post-footer'>

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='tw-authors'>
    <div class='tw-author clearfix'>
      <div class='author-image'><img alt='' class='avatar avatar-70 photo' height='70' src='URL DE LA IMAGEN' width='70'/> </div>
    <h3>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Entrada del autor'><data:post.author/></a></h3>
    <div class='author-title-line'/>
    <p> TEXTO </p>
    </div></div>
    </b:if cond>


Editar lo que figura en color rosa. 

Si aparece dos veces la línea <div class='post-footer'> copiar el bloque de nuevo bajo dicha línea.

2.) El siguiente paso son los estilos del cuadro (colores...). Buscar esta línea ]]></b:skin> y pegar antes el siguiente bloque:

/* Estilos para el cuadro de autor */
.tw-author {
margin: 50px 0;
padding: 20px;
background-color: #333;
margin-bottom: 20px;
}
.tw-author .author-image {
float: left;
margin-right: 30px;
margin-top: 15px;
}
.tw-author h3,.tw-author a {
color: #fff;
font-size: 13px;
}
.tw-author p {
margin: 0;
color: #fff;
margin-top: 10px;
}
.tw-authors {
float: left;
border-top: 1px solid #d2d2d2;
width: 625px;
}
.tw-author {
float: left;
}
.tw-author.clearfix h3 {
font-weight: bold;
text-transform: uppercase;
color: #fff!important;
margin: 0px;
margin-top: 10px;
}
.tw-authors p {
font-size: 13px;
}

Ahora hay que editarlo a gusto personal.

El cajoncito aparecerá automáticamente al final de cada entrada escrita. 
 
En este post ya se especifica qué es un scroll. Aquí se detalla cómo ponerlo en la sidebar, esto es, en un gadget. 

  • Ubicación: gadget java.
  • Proceso:

Simple, pegar el código en el gadget:

<div class="widget-content">

<ul style="height:150px;width:240px; overflow:auto; ">

<li>

TEXTO TEXTO TEXTO TEXTO

</li>

</ul></div>

Sustituir la línea de TEXTO por el contenido que se desea visualizar dentro del scroll. Las medidas de alto (height) y ancho (width) son modificables según las que disponga el blog. 


En este post ya se especifica qué es un scroll. Aquí se detalla cómo ponerlo en la sidebar, esto es, en un gadget. 

  • Ubicación: gadget java.
  • Proceso:

Simple, pegar el código en el gadget:

<div class="widget-content">

<ul style="height:150px;width:240px; overflow:auto; ">

<li>

TEXTO TEXTO TEXTO TEXTO

</li>

</ul></div>

Sustituir la línea de TEXTO por el contenido que se desea visualizar dentro del scroll. Las medidas de alto (height) y ancho (width) son modificables según las que disponga el blog. 


Foto cortesía de Chica Blogger
Con este truco podemos poner un gadget en el blog que muestre las últimas entradas escritas. El propio Blogger dispone de un gadget para ponerlo, pero peca de bastante soso y escueto. Este mostrará las entradas más recientes de una manera elegante y más bonita. 
  • Ubicación: gadget java.
  • Proceso: 
Simplemente pegar el siguiente código en el gadget:
 

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>

La ultimísima línea del código (100) hay que cambiarla. Donde dice "TUBLOG" ponemos el nombre de nuestro blog. Importante ponerlo bien ya que es la dirección RSS (Feeds) que se encargará de leer automáticamente las entradas que se visualizarán luego en el gadget.

Hay un par de variables que pueden modificarse:
  • numposts (línea 92): nº de posts que se muestran (por defecto “5″).
  • numchars (línea 99): nº de caracteres de los resúmenes (por defecto “80″).
El siguiente bloque de variables (al final del código, a partir de la línea 93) también es modificable. Todos están marcados con "true". Para anular alguno de ellos, y por tanto que no aparezca en el gadget, basta con ponerle la palabra "false":
  • showpostthumbnails: miniaturas de imagen.
  • displaymore: enlace “Más”.
  • displayseparator: línea de separación entre cada ítem.
  • showpostdate: fecha de cada post.
  • showpostsummary: resumen de cada post.
Foto cortesía de Chica Blogger
Con este truco podemos poner un gadget en el blog que muestre las últimas entradas escritas. El propio Blogger dispone de un gadget para ponerlo, pero peca de bastante soso y escueto. Este mostrará las entradas más recientes de una manera elegante y más bonita. 
  • Ubicación: gadget java.
  • Proceso: 
Simplemente pegar el siguiente código en el gadget:
 

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>

La paginación consiste en un menú a pie de entradas para navegar por las mismas. Sustituye al clásico menú que ofrece Blogger: aquel de entradas antiguas y recientes, con flechitas a izquierda y derecha con la página principal en el centro, a menudo, con un icono en forma de casita.

  • Ubicación: gadget java.  
  • Proceso:  
Tan solo basta pegar este código en el gadget, justo a pie de entradas, al final de estas en el diseño:

<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}
.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x}
.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none}</style>
<script style='text/javascript'>
    var numshowpage=7;
    var postperpage =7;
    var upPageWord="Anterior";
    var downPageWord="Siguiente";
    var home_page="/";
    var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://sites.google.com/site/silviafilologa/home/paginacionblogger.js'></script>

A TENER EN CUENTA:
  • var numshowpage=7: indica el nº de cuadradritos a visualizar detrás y delante de la página activa.
  • var postperpage =7: indica el nº de entradas por página.
  • var upPageWord="Anterior": texto para el botón de las entradas previas.
  • var downPageWord="Siguiente": texto para el botón de las entradas siguientes.
La paginación consiste en un menú a pie de entradas para navegar por las mismas. Sustituye al clásico menú que ofrece Blogger: aquel de entradas antiguas y recientes, con flechitas a izquierda y derecha con la página principal en el centro, a menudo, con un icono en forma de casita.

  • Ubicación: gadget java.  
  • Proceso:  
Tan solo basta pegar este código en el gadget, justo a pie de entradas, al final de estas en el diseño:

<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}
.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x}
.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none}</style>
<script style='text/javascript'>
    var numshowpage=7;
    var postperpage =7;
    var upPageWord="Anterior";
    var downPageWord="Siguiente";
    var home_page="/";
    var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://sites.google.com/site/silviafilologa/home/paginacionblogger.js'></script>

A TENER EN CUENTA:
  • var numshowpage=7: indica el nº de cuadradritos a visualizar detrás y delante de la página activa.
  • var postperpage =7: indica el nº de entradas por página.
  • var upPageWord="Anterior": texto para el botón de las entradas previas.
  • var downPageWord="Siguiente": texto para el botón de las entradas siguientes.
Un comentario anidado permite, entre otras cosas, interactuar con los participantes de una entrada del  blog. Además, es una forma ordenada de presentar los comentarios.


  • Ubicación: plantilla.
  • Proceso:  
1.) Buscar las siguientes líneas de código (basta con buscar la primera y saldrá el bloque entero): 

  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>

Sustituir todo el bloque por lo siguiente:

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

2.) Revisar si está repetido el código del paso 1.) (puede pasar según el modelo de plantilla) y proceder a lo mismo, a sustituirlo por el nuevo dado. Usar el buscador pulsando Ctrl+F para buscar el supuesto código repetido, si lo hubiera.


¿Qué beneficios aportan los comentarios anidados?

  1. Fomentan la participación y la interactividad entre los usuarios del blog.
  2. Pueden aumentar la posibilidad de que comenten más, fomentando el diálogo y la discusión.
  3. Permiten reconocer fácilmente a la vista las respuestas a un comentario y sus reacciones.

    Están marcados en el círculo rojo
    Con este truco se podrá visualizar en el lateral derecho (o izquierdo) de la página, justo al lado de la barra de scroll, 4 botones sociales: Facebook, Twitter, aNobii y Netvibes. Así es fácil ahorrar espacio en la sidebar, por ejemplo, al tenerlos fuera de ella.
    • Ubicación: gadget java.
    • Proceso:
    Copiar simplemente el código en el java (HTML):

    <style type='text/css'>

    a.linkopacity img {

    filter:alpha(opacity=100);

    -moz-opacity: 0.5;

    opacity: 0.5;

    -khtml-opacity: 0.5;}

    a.linkopacity:hover img {

    filter:alpha(opacity=100);

    -moz-opacity: 1.0;

    opacity: 1.0;

    -khtml-opacity: 1.0; }

    </style>

    <div style='display:scroll; position:fixed; top:400px; right:-12px;'>

    <a class='linkopacity' href='http://www.facebook.com/URL PÁGINA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Facebook'><img border="0" src="https://lh6.googleusercontent.com/-6VPz6xF95ZQ/UELFb0j43wI/AAAAAAAABSs/MA5p8-bIhus/s32/LogoFB.png" /></a><br />

    <a class='linkopacity' href='http://www.twitter.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Twitter'><img border="0" src="https://lh3.googleusercontent.com/-miBU5Dxktzc/UELFbwmVaDI/AAAAAAAABSo/JsgPXqJ7teY/s32/LogoTwitter.png" /></a><br />

    <a class='linkopacity' href='http://www.anobii.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Visita mi estantería'><img border="0" src="https://lh3.googleusercontent.com/-7CgYrDyuNlU/UDu6UZ2OBHI/AAAAAAAAA_U/bKo4fV5NRvA/s32/anobi.png" /></a><br />

    <a class='linkopacity' href='http://www.netvibes.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Curiosea por mi escritorio'><img border="0" src="https://lh6.googleusercontent.com/-UxbLGOeK9g4/UDrtxVJWupI/AAAAAAAAA-M/zYHX7k9sBrI/s32/netvibess.png" /></a><br /></div>

    Las imágenes de los iconitos pueden cambiarse por otras redes sociales (Tuenti, Godreads...) o incluso poner los feeds o rss. Para ello basta con buscar los iconitos deseados con el mismo tamaño y sustituirlos por los que figuran en cada caso. Hay que poner los nombres y/o urls de las páginas en donde se especifica "URL PÁGINA" para Facebook, y "NOMBRE USUARIO" para los demás. Y listo.


    Están marcados en el círculo rojo
    Con este truco se podrá visualizar en el lateral derecho (o izquierdo) de la página, justo al lado de la barra de scroll, 4 botones sociales: Facebook, Twitter, aNobii y Netvibes. Así es fácil ahorrar espacio en la sidebar, por ejemplo, al tenerlos fuera de ella.
    • Ubicación: gadget java.
    • Proceso:
    Copiar simplemente el código en el java (HTML):

    <style type='text/css'>

    a.linkopacity img {

    filter:alpha(opacity=100);

    -moz-opacity: 0.5;

    opacity: 0.5;

    -khtml-opacity: 0.5;}

    a.linkopacity:hover img {

    filter:alpha(opacity=100);

    -moz-opacity: 1.0;

    opacity: 1.0;

    -khtml-opacity: 1.0; }

    </style>

    <div style='display:scroll; position:fixed; top:400px; right:-12px;'>

    <a class='linkopacity' href='http://www.facebook.com/URL PÁGINA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Facebook'><img border="0" src="https://lh6.googleusercontent.com/-6VPz6xF95ZQ/UELFb0j43wI/AAAAAAAABSs/MA5p8-bIhus/s32/LogoFB.png" /></a><br />

    <a class='linkopacity' href='http://www.twitter.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Sígueme en Twitter'><img border="0" src="https://lh3.googleusercontent.com/-miBU5Dxktzc/UELFbwmVaDI/AAAAAAAABSo/JsgPXqJ7teY/s32/LogoTwitter.png" /></a><br />

    <a class='linkopacity' href='http://www.anobii.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Visita mi estantería'><img border="0" src="https://lh3.googleusercontent.com/-7CgYrDyuNlU/UDu6UZ2OBHI/AAAAAAAAA_U/bKo4fV5NRvA/s32/anobi.png" /></a><br />

    <a class='linkopacity' href='http://www.netvibes.com/NOMBRE USUARIO' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Curiosea por mi escritorio'><img border="0" src="https://lh6.googleusercontent.com/-UxbLGOeK9g4/UDrtxVJWupI/AAAAAAAAA-M/zYHX7k9sBrI/s32/netvibess.png" /></a><br /></div>

    Las imágenes de los iconitos pueden cambiarse por otras redes sociales (Tuenti, Godreads...) o incluso poner los feeds o rss. Para ello basta con buscar los iconitos deseados con el mismo tamaño y sustituirlos por los que figuran en cada caso. Hay que poner los nombres y/o urls de las páginas en donde se especifica "URL PÁGINA" para Facebook, y "NOMBRE USUARIO" para los demás. Y listo.