BONITO GENERADOR DE TEXTO

Encontré por la red un generador de texto que está bastante bien, permite crear títulos bastante chulos. Lo único malo que puede tener es la publicidad, pero como siempre se la podéis quitar editando la imágen y recortando el espacio donde se incluye. Podréis conseguir efectos como los siguientes de una forma muy fácil, para crear los vuestros acceder a la siguiente web.

FRASES ALEATORIAS

Poner frases aleatorias en el blog es muy simple, cada vez que se cargue la página donde esta ubicado el script, se mostrará una frase diferente, puede ser un recurso divertido ya que le da cierto dinamismo al blog. A continuación os mostraré como hacerlo.

Primer paso:(Ubicación del script)

Lo más común será insertarlo en la sidebar por tanto agregaremos un nuevo gadget de tipo HTML/Javascript y pegaremos el siguiente código:

<script language="JavaScript">
citas = new Array(5)
citas[0] = "Sé bueno con tus hijos. Ellos eligirán tu residencia"
citas[1] = "Me pregunto: ¿Qué haría yo sin mí?"
citas[2] = "La esclavitud no ha sido abolida"
citas[3] = "Los mocos son la plastilina de los pobres"
citas[4] = "Me cago en san pito pato"
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])
</script>

Segundo paso:(Nuestras frases)

En primer lugar seleccionaremos las frases que queremos para que el escript decida aleatoriamente cual mostrar, en el ejemplo, puse 5 frases, si queréis poner el mismo número de frases tan solo tendréis que modificar las frases en si, si por el contrario queréis cambiar el número de frases actuaremos de la siguiente forma:

En la segunda línea del código podéis observar un 5 que es el número de frases, cambiar este valor por el que vosotros decidáis.
Seguidamente en el código encontramos líneas con la siguiente estructura:

citas[0] = "Aqui una frase"

Fijaros que si son 5 frases el valor del interior de los corchetes (marcado en rojo) varía entre 0 y 4 por tanto si decidieramos poner 3 frases deberíamos borrar líneas hasta que quedara solo de 0 a 2 es decir la última linea tendrá siempre el valor del número de frases menos 1, si por el contrario queréis añadir más frases tendréis que ir añadiendo líneas con la misma estructura modificando únicamente el valor del número.

Me preguntaba C.C.S que si se podía personalizar un poco más las frases aleatorias, la respuesta es que si. Veamos un ejemplo.

<div style="text-align: center; font-weight: bold">

CODIGO FRASES ALEATORIAS

</div>

Insertando nuestro código en este div, podremos modificar tanto la alineación, tipo de letra y color, podéis consultar los colores aqui.

ELEGIR NUMERO DE POST A MOSTRAR

Elegir el número de post a mostrar en la página principal del blog es algo importante, dependiendo del contenido del blog puede ser recomendable elegir mostrar mayor o menor cantidad. Yo personalmente soy partidario de mostrar un número comprendido entre 1 y 5. Creo que se hace bastante pesado tener todos los post juntos y muchas veces no guardan relación unos con otros, lo recomendable sería tener una clasificación por categorías y mostrar en la página principal 2 o 3 post, de esta forma se orientaría al visitante de la información que contiene el blog y si este estuviera interesado en buscar más información ya podría ir accediendo a los distintos contenidos por medio de menús o bien etiquetas, archivos del blog o cualquiera de los recursos que permiten clasificar contenidos en el blog.

Bueno a donde quería llegar es que en blogger elegir el número de comentarios a mostrar es muy sencillo, nos iremos a:

La ruta es Configuración->Formato, como veis es muy sencillo solo tendréis que modificar el número de entradas a mostrar y guardar los cambios. Seguro que muchos de vosotros ya lo conoceríais pero estoy seguro que otros muchos no, podéis ir probando con distintos valores y dejar el que más os agrade, el valor por defecto que pone blogger si no me equivoco es 7 que creo que es un número bastante alto.

VENTANA EMERGENTE ACEPTAR CANCELAR

Contestando a SiMoN RoV, que quería una ventana emergente con las opciones Aceptar y Cancelar, similar a la entrada esta pero dependiendo de la opción elegida hacer una cosa o otra, él en concreto quería que con la opción Aceptar se cargue una nueva pagina y con la opción Cancelar se cierre la ventana y no vaya a ningún sitio.

El código a insertar en el caso de ventana emergente mediante un texto es el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('URL DESTINO CON ACEPTAR')}">TEXTO</span>


Para observar el resultado situar el cursor encima de la palabra TEXTO; si se pulsa aceptar, se cargará la página de google, si cancelar se cerrará la ventana sin hacer nada.

TEXTO
Para el caso de imagenes, el código será muy similar y será el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('https://www.google.com')}"><img src="URL DONDE ESTA LA IMAGEN" border="0" /></span>


A diferencia del ejemplo anterior, lo único que cambia es que tendremos que sustituir URL DE LA IMAGEN por la dirección donde se encuentra, el efecto será el siguiente, de la misma forma situar el cursor encima y con Aceptar se cargará la página de google.

CARGANDO EL BLOG (LOADING)

Este recurso consiste en poner un gif de forma que al cargar ya sea la página principal como cualquier otra, dependiendo de donde coloquemos el gif se muestre una imagen de carga, lo cierto es que cuanto mas ligero sea la carga del blog mejor, claro que esto se consigue optimizando mucho la web o blog. La carga de imágenes relentiza bastante ya que al cargar una página se deben de cargar todas las imágenes, recursos como slides que se crean en páginas externas suelen ser los que mas relentizan la carga ya que se debe de establecer la conexión con la web del cual proceden. Cuidando todos estos aspectos y muchos otros no podemos evitar que tarde algo en cargar la página ya que depende tanto del blog o web como de la conexión a Internet, explorador...
Os voy a enseñar a crear la típica imagen de cargando..., esta se mostrará mientras se carga el blog, una vez cargado la imagen desaparecerá, es un recurso que da un punto mas de calidad y muy simple de crear. Vamos allá!

Primer paso:(Ubicar el Script)

Para ello nos vamos a: Diseño->Edición de HTML aquí buscaremos </head> y pegaremos justamente encima el siguiente código:



<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

Ya tenemos el script, guardamos los cambios y listo.

Segundo paso:(Añadir nuestra imagen de carga)

Lo normal será ubicar la imagen en algún lugar de la sidebar, así cualquier página que se carge permitirá ver el efecto, pero también se puede agregar tan solo a una entrada en concreto que será lo menos común. Debo añadir que la imagen de carga normalmente será como mostraré a continuación pero podéis añadir cualquier otro gif que queráis aun que quizás no tenga demasiado sentido.

Para el caso de la sidebar añadiremos un gadget de tipo HTML/JavaScript o bien podemos insertarlo en algún elemento que tengamos ya creado con tal de no saturar la sidebar.
Aquí insertaremos el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando...</b>
<IMG src="URL DE LA IMAGEN">
</div>

Tercer paso:(Personalizar la imagen)

Aquí os facilitaré unas cuantas imágenes para los que no quieran complicarse mucho la vida buscando en otros sitios, hay cientos de estas imagenes de todos los tipos y colores en la red.

Tan solo tendréis que sustituir donde puse URL DE LA IMAGEN en el segundo paso por la dirección donde se encuentra la imagen. Si queréis una de las que mostré anteriormente podéis conseguir la dirección directamente haciendo click con el botón derecho del ratón encima de la imagen y click en copiar ruta del enlace, lo pegamos y listo, si queréis otras imágenes podréis encontrarlas por ejemplo aquí, donde permite personalizar los gifs de carga, descargáis la imagen y la alojáis en algún servidor de imagenes, como por ejemplo este, obtenéis la dirección y la cambiáis por URL DE LA IMAGEN. Guardaremos los cambios y probar a recargar la página F5 por ejemplo.

ENLACES EN MOVIMIENTO

Son varios los que me preguntaron como hacer como hacer una slide de enlaces, normalmente se utilizan para crear enlaces hacia otros blogs utilizando poco espacio en nuestro blog, también se puede utilizar para mostrar una serie de imágenes o cualquier otra utilidad que se nos ocurra.
La slide que os propongo es sumamente simple y intentaré que entendáis cual es su estructura para que cada uno de vosotros la personalice a su gusto. Quizás la propiedad que más la caracterice es la de detener la imagen al poner el cursor encima, durante la marcha podréis comprobarlo en cualquiera de los ejemplos que mostraré a continuación.

Lo común será insertarlo en nuestra sidebar por tanto lo primero que tendremos que hacer es ir a: Diseño->Añadir un gadget->HTML/Javascript. Una vez aquí comenzaremos a construir la slide.

Primer paso:(Base del código)

Copiaremos el siguiente fragmento de código:

<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL DEL ENLACE1" title="TÍTULO1"><img src="URL DE LA IMÁGEN1"</a> <br>
<a href="URL DEL ENLACE2" title="TÍTULO2"><img src="URL DE LA IMÁGEN2"</a> </marquee>


Una vez tenemos el código insertado pasaremos al siguiente paso que consistirá en entender un poco el código para poder así adptarlo a vuestro blog.

Segundo paso:(Entendiendo el código)

Lo primero que deberemos de sustituir es lo marcado en negrita, URL DE LA IMAGEN, esta dirección se corresponde con el origen de la imagen que queremos mostrar, será del tipo:

http://i43.tinypic.com/33399o4.jpg

Seguidamente tendremos que especificar hacia donde nos llevará al hacer click encima de la imagen, esta dirección la tendremos que ubicar donde puse URL DEL ENLACE, será del tipo:

http://sitiooriginal.blogspot.com

El código os lo dejé preparado para añadir 2 enlaces, podremos añadir tantos como queramos repitiendo la linea:


<a href="URL DEL ENLACEx" title="TÍTULO"><img src="URL DE LA IMÁGENx"</a> <br>


Tercer paso:(Propiedades de la slide)

Podremos modificar los siguientes valores del código dependiendo del efecto que deseemos conseguir:

• marquee direction: Define como es el movimiento de los enlaces, hacia arriba (up), abajo (down),a la derecha (right), a la izquierda (left).

• scrollAmount: Velocidad de movimiento. A mayor número, mayor será la velocidad.

• text-align: Posición de los enlaces, centrados (center), a la derecha (right), a la izquierda (left).

• width: Ancho de la tabla.

• Height: Alto de la tabla.

• border: Grosor del borde de la tabla.

• #000000: Color del borde en hexadecimal.Mas colores.

Un ejemplo muy simple es el que yo tengo y es el siguiente:

PORTADA DE REVISTA

Esta es una de las aplicaciones web que podemos encontrar en la red, consiste en realizar un pequeño montaje de forma muy sencilla, podremos hacer que cualquier foto que tengamos aparezca en la portada de las revistas mas famosas del mundo como Vogue, Cosmopolitan, playboy...

La web desde la que podréis hacer este montaje es esta, una vez creada vuestra portada tan solo tendréis que copiar el código generado al final de la página y insertarlo en vuestro blog. Os lo recomiendo es un recurso que queda bastante original.

ULTIMOS COMENTARIOS

Tener en nuestra sidebar un gadget con los últimos comentarios puede ser muy interesante tanto para los lectores del blog como para el propietario ya que de una forma muy rápida se puede observar cuales son los temas que están actualmente en 'discusión', recordar que hacer comentarios en otros blogs es muy interesante ya que son enlaces a vuestro blog. Insertarlo en el blog es muy sencillo y os mostraré como hacerlo.

En primer lugar:(En la plantilla):

Nos vamos a Diseño->Edición de HTML y buscaremos
]]></b:skin>, una vez localizado copiaremos justamente encima el siguiente código.


/* ULTIMOS COMENTARIOS RINCON BLOG */
.txtmsg {margin: -20px 0 0 0;}


Guardaremos los cambios y listo.

En segundo lugar:(Nuevo elemento)

Como lo normal será tenerlo en la sidebar, añadiremos un nuevo elemento de tipo HTML/Javascript y allí pegaremos el siguiente código.


<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}}
var photoslink=new Array()
photoslink[0]='<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png"/>';
caxitos='<img src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SeJpxgrXlGI/AAAAAAAAGmg/7KS4S9cQiro/s320/yo.png"/>';
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.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";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showcommentdate == true) document.write('El ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');
if( entry.author[0].name.$t == 'Caxitos'){ document.write(Caxitos)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + ', dijo' +'</a> ');
if (showposttitle == true) document.write(' en ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"><br/></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(leer mas)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}
</script>
<script type="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="http://AQUIVUESTROBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>


Modificar AQUIVUESTROBLOG por el nombre de vuestro blog, guardaremos los cambios y listo, un código bastante largo pero muy simple de insertarlo.
Llegado este punto podremos observar el resultado, nos mostrará todos los usuarios con el mismo icono.

Personalización:

Este punto principalmente consiste en poner un icono para los distintos comentaristas de nuestro blog.

Diferenciaremos tres grupos:

1. Comentaristas
2. Autor
3. Anonimos

Lo primero que deberemos hacer es sustituir las 3 apariciones de caxitos por vuestro nombre tal y como aparece en las firmas de vuestro blog.

Seguidamente tendremos que buscar los iconos que queramos que acompañen a los comentarios, yo utilizo este buscador de iconos. Buscaremos 3 recordar uno para cada una de las categorías mencionadas anteriormente, los descargaremos a nuestro ordenador y seguidamente los alojaremos en un servidor de imagenes, guardamos las direcciones generadas y procederemos de la siguiente forma:

Reemplazaremos nuestros códigos sabiendo que el código verde hace referencia a la dirección de la imagen de los comentaristas, el azul al del autor y el rojo al de los anonimos.
Guardamos y listo!!!