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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gBbxo8lCjpEmr3Upnr8QNhe0UDNROzepQQ4fqCw20TvT_k7IN8B_-8yz-d0YnmTwhmkleVUr9mCeb6yW-xXikee3m5DjLQPMt8xbM5fkeeMclpOlfDVi6tfYq46o0GrYTCwjnFUoZ7-r/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).

>> Nadie dijo que ser un buen blogger fuera fácil, pero eso no es excusa para no serlo

Foto cortesía de Gravedad | Blogs
La mayoría de bloggeros abandonan su actividad como bloggers a los seis meses de haber empezado con sus blogs. Es una cifra aproximada pero se acerca mucho a la realidad de la mayoría de casos de abandono. La causa de estos abandonos suele ser, la mayoría de veces, por no corresponderse el esfuerzo invertido con los resultados obtenidos. Es decir, se esperaba como mínimo tener entre 500 y 1000 visitantes a los 6 meses y sólo ha llegado a los 150; además, nunca recibe comentarios y los pocos que recibe no aportan nada a lo dicho en el artículo; nadie comparte su contenido en Twitter y Facebook; no recibe el apoyo de la gente en sus diferentes perfiles dispersos por la Red; su página de Facebook parece un pueblo abandonado del salvaje oeste americano; y un largo etc. de situaciones desesperantes capaces de tumbar al más estoico. Si eres un blogger primerizo estas cosas te pueden tumbar sin contemplación incluso en los primeros meses de haber iniciado tu actividad. Simplemente es demasiado duro escribir de forma regular para tu blog y actualizar tus perfiles sin ver ningún indicio de estar haciendo progresos en tu presencia online. Pasan los días y los resultados no mejoran, cada vez se te hace más duro seguir el ritmo y, al final, decides utilizar tu tiempo en otra cosa que te aporte algo de forma más inmediata. 

Ya seas alguien que aún no tiene un blog pero que espera tenerlo o alguien que ya está sumergido en aguas de la blogoesfera aquí te dejo una serie de 6 consejos para que nunca abandones tu actividad como blogger.

1.    Ser un buen blogger no es coser y cantar

Antes de empezar debes de ser consciente de la dureza de ser blogger. No todas las personas están hechas de la pasta que hace falta. Ser un buen blogger implica actualizar tu blog al menos cinco días a la semana. Ello conlleva la búsqueda de ideas para artículos nuevos, investigar mínimamente sobre los temas escogidos y plasmarlo todo en un buen artículo. Así, como ya he dicho, casi cada día del resto de tu vida. Un buen blogger no se toma vacaciones nunca. Lo único que puede hacer es tener artículos en la recámara y programar su publicación con antelación. Aparte de eso, no hay descanso. Por si esto fuera poco, además hay que mantener activas las cuentas en las distintas redes sociales como Twitter y Facebook.

2.    Ponte en el peor escenario posible

Si crees que vas a pegar fuerte nada más entrar vas muy errado. No sólo no vas a pegar fuerte sino que seguramente nadie o casi nadie va a saber de ti y de tus contenidos hasta pasado mucho tiempo.  El éxito no viene de la noche a la mañana y quien diga lo contrario miente.

Mi consejo: ponte desde el principio en el peor de los escenarios posibles. Si te parece  razonable que en acabar tu primer mes te visiten 100 personas al día rebaja esa aspiración a 20. Si crees que recibirás 20 comentarios rebájalos a 2. Si crees que conseguirás 5 Retweets por post de media rebájalo a 0-1 Retweet por post. Si crees que tendrás 20 targeted followers más rebaja la cifra a 2. Y así con cualquier dato relacionado con el funcionamiento de tu blog que te puedas plantear.

¿Por qué? Porque si las cosas van feas, como seguramente irán, no te cogerán de sorpresa y, por lo tanto, no supondrán un duro golpe para ti. Tú ya esperabas que las cosas fueran mal así que esto no te dice nada nuevo. En cambio, si antes de empezar tienes tus aspiraciones demasiado altas, el mazazo que te vas a llevar pasado el primer mes puede llegar a ser lo suficientemente duro como para destrozar tu moral y hacer que abandones. ¡Ojo! Esto no quiere decir que apuntes bajo y que estés contento con el fracaso, esto es simplemente ser realista. Lo contrario sería engañarte a ti mismo. Y, oye, si al final, por el motivo que sea las cosas van mejor que lo esperado la felicidad que sentirás será doble.

3.    Ignora las estadísticas al menos durante el primer año

Trabaja bien cada día y olvídate de estar cada 10 minutos mirando tus stats. ¿De qué te sirve mirar tus pobres números cada día? Ya te lo digo yo: de nada. Es una absoluta pérdida de tiempo. Además, el impacto que tienen en tu confianza es perjudicial. Ver cada día que tus números no mejoran o no lo hacen como esperas es duro y difícil de digerir. ¿Por qué exponerse día tras día a esa tortura? Deja de perder el tiempo y céntrate en lo que de verdad importa, esto es, publicar cosas interesantes, construir tu presencia online y conectar con gente y, todo  esto, hacerlo paso a paso.

Mi consejo: no mires los stats de tu sitio al menos durante los 6 primeros meses. ¿Para qué? ¿De qué me sirve saber que me leen 100 personas al día o 400?. Con ello, no sólo dejarás de perder el tiempo mirando datos inútiles, con el consiguiente beneficio para tu productividad, sino que además evitarás que te afecten negativamente al ánimo.

4.    Haz las cosas a tu ritmo

No te sobresatures de trabajo con la esperanza de alcanzar la cima en poco tiempo porque eso simplemente no ocurrirá. Lo único que conseguirás es destrozarte la vida y quemarte en poco tiempo. Si sólo puedes publicar tres buenos artículos por semana haz eso. Si sólo puedes usar twitter y facebook  durante 30 minutos al día pues limítate a eso. Como en las maratones, al principio se va a un ritmo suave y luego se incrementa la marcha. Una vez veas que tu trabajo da frutos y entonces piensa en dedicarle más tiempo (y, para ello, tendrás que liberarte de hacer otras cosas). Hasta entonces sigue un ritmo que te sea cómodo de llevar.

5.    Descubre el tema que te apasiona

Tu blog y tu actividad profesional online se debe centrar en aquello que te apasione más en la vida. ¿Por qué? Porque de lo contrario no hay forma de que aguantes los obstáculos que te vendrán con el tiempo. Esto lleva mucho trabajo y si no amas al 100% lo que haces será mejor que ni abras el chiringuito. Si no hay pasión en lo que haces no transmites y si no transmites nadie dará ni cinco céntimos por tu trabajo. La pasión viene de amar lo que uno hace, por lo tanto, descubre qué es aquello que más amas y destina el resto de tu vida a hacer eso. Hoy en día no hay excusas para no hacer lo que te gusta y vivir decentemente de ello. Tú eliges, hacer algo que no te gusta y vivir frustrado el resto de tu vida o hacer algo que te gusta y vivir feliz el resto de tu vida. Esto es así de simple.

6.    Piensa en las ventajas de tipo personal y profesional

Cuando los pensamientos de abandono te vengan a la cabeza, que te vendrán (siempre lo hacen de tanto en cuando), piensa en las ventajas que obtienes de ser un buen blogger:
  • Desarrollas el hábito de la escritura.
  • Aprendes a administrar tu tiempo sabiamente.
  • Desarrollas tus destrezas y habilidades. Si antes escribías bien imagina como escribirás después de dedicarle cada día un rato para actualizar tu blog durante años.
  • Te haces un nombre en tu nicho de mercado o campo de especialización. ¿A quién pedirán consejo los demás cuando quieran saber algo sobre el tema de tu especialidad? A ti.
  • Creas una audiencia que, con el tiempo, confiará en tu criterio sobre los temas de que hablas más que en el de ninguna otra persona.
  • Por lo mismo te puedes hacer consultor y/o coaching, según sea el tema de tu blog.
  • Las editoriales si ven que escribes bien y sabes de lo que escribes, si tienes una audiencia importante, te pueden ofrecer la oportunidad de escribir para ellos uno o más libros. Hay muchos casos de bloggers que han recibido ofertas para publicar libros y, la mayoría de ellos, son éxitos de ventas. Es un tiro seguro para las editoriales pues saben que el autor mismo tiene una plataforma potente (o más si contamos con las redes sociales) para promocionar su libro.
  • Tener un blog y una presencia online también te facilita mucho el hacer networking y conectar con otras personas con intereses similares contigo.
  • Tener una buena presencia online también te va a facilitar encontrar trabajo si lo necesitas. Los empleadores cada vez utilizan más internet para seleccionar trabajadores. ¿Por qué? Porque en internet todo está a la luz, aquí se ve quien sabe de lo que habla y quien vende humo.
  • Y qué decir del legado que estás dejando para el resto de la comunidad. La cuestión es contribuir de alguna forma a los demás para que cuando te levantes cada mañana te digas a ti mismo: mi vida tiene un sentido. Yo contribuyo con mi actividad a dejar un mundo mejor que el que encontré siendo blogger.



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.

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. 
 
El scroll es el acto de desplazar vertical u horizontalmente el contenido de una página web. Este efecto se logra utilizando el ratón o el dedo en una pantalla táctil para moverse hacia arriba, abajo, izquierda o derecha, dependiendo de la dirección del 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 TEXTO TEXTO 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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlDqkvpV1Paols4Ny6knHgSmmBpmcWuJqLe9TioBoydot8KXFfdq3y_AyNeuOpGj9i6tdozbnJ-xIGKSQH3s7odektLgwMTKfCmEhZJuPMHOe9sRrWLeqtD-qg7cxkghR0bCmC_CppBw/s1600/wp1.jpg) 0 -50px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlDqkvpV1Paols4Ny6knHgSmmBpmcWuJqLe9TioBoydot8KXFfdq3y_AyNeuOpGj9i6tdozbnJ-xIGKSQH3s7odektLgwMTKfCmEhZJuPMHOe9sRrWLeqtD-qg7cxkghR0bCmC_CppBw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlDqkvpV1Paols4Ny6knHgSmmBpmcWuJqLe9TioBoydot8KXFfdq3y_AyNeuOpGj9i6tdozbnJ-xIGKSQH3s7odektLgwMTKfCmEhZJuPMHOe9sRrWLeqtD-qg7cxkghR0bCmC_CppBw/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.