DESPLAZAMIENTO DE TEXTO (MARQUESINA)

Marquesina Básica:

Marquesina Básica

La marquesina básica se desplaza a lo largo del ancho de la pantalla y el texto se mueve de derecha a izquierda.


<marquee>Marquesina básica</marquee>


Modificaciones:

Podemos crear marquesinas de todo tipo combinando atributos:

width(ancho):Lo podemos expresar en % o en píxeles.
height(alto):Lo podemos expresar en % o en píxeles.
align(alineación):top(arriba),middle(centrado),bottom(abajo).

Marquesina que ocupa el 90% del ancho de la pantalla y tiene una altura de 50 pixeles.


<marquee width="90%" height="50" align="bottom">
Marquesina que ocupa el 90% del ancho de la pantalla y tiene una altura de 50 pixeles.
</marquee>


behavior: Sirve para definir el estilo del texto.

behavior="scroll"
behavior="alternate"
behavior="slide"

Nota: La marquesina por defecto es de tipo scroll.


Marquesina con movimiento tipo alternate


<marquee behavior="alternate" width="100%" height="50" align="midldle">
Marquesina con movimiento tipo alternate
</marquee>


bgcolor: Modificar el color del fondo de la marquesina.
style: Modificar el color de las letras de la marquesina.

Marquesina con colores...


<marquee style="color: #FF0033;" behavior="alternate" align="midldle" bgcolor="#9999FF" width="100%" height="50">
Marquesina con colores...
</marquee>


Personalizar Colores.

Consultar Colores.

direction: Dirección hacia donde se dirige el texto.

direction="right"
direction="left"
direction="up"
direction="down"

Nota: El movimiento por defecto es left.


<marquee direction="right" align="bottom" width="90%" height="50">
Marquesina que se desplaza de izquierda a derecha
</marquee>



scrolldelay: Tiempo entre cada movimiento expresado en milisegundos.


Marquesina con tiempo modificado y texto de arriba a abajo


<marquee scrolldelay="600" direction="down" align="bottom" width="90%" height="50">
Marquesina con tiempo modificado y texto de arriba a abajo
</marquee>


Nota: Todas las opciones mencionadas son combinables entre si, asi que lo único que teneis que hacer es personalizar vuestra marquesina haciendo uso de lo anterior, para cualquier duda no dueis en preguntar.

VOZ EN EL BLOG

Esta entrada es fruto de consultar el blog de dondelohabredejado, vi un gadget que me resultó curioso y quizás a alguien le sea de utilidad.

Se trata principalmente de una web en la cuan introduces un texto y la propia aplicación te transforma el texto introducido a formato mp3, vamos que te lee lo que has introducido, además permite varios idiomas... vamos un autentico loro!

Sinceramente la utilidad no se la termino de encontrar... no se cual será la finalidad de este tipo de aplicaciones, la realidad es que ya me la he encontrado en varios lugares y siempre la he utilizado como cosa curiosa. Me imagino que la finalidad debe de ser para discapacitados visuales ya que de esta forma pueden escuchar cualquier texto que se encuentren en la web.

La aplicación tiene 2 formas de funcionar:

1. Ingresas a la web vozme, introduces el texto y la misma web te lo transforma a mp3.
2. Mediante un gadget que se inserta en el blog o web, de forma que cualquier texto que se seleccione, la aplicación te generará el mp3 correspondiente.

Bueno pues eso es todo amigos... espero vuestros comentarios a ver si entre todos descubrimos la cual es la finalidad de esta aplicación!!
Sinceramente merece la pena probarlo, yo la primera vez no puede evitar reirme, podéis poner cualquier palabra... y vereis como suena...jiji.

ENTRADAS MAS POPULARES

Soys ya varios los que me pidieron un gadget para mostrar las entradas mas populares, fue hoy con un email de treyvelan que me decidí a hacer una entrada para explicar brevemente y de una forma muy fácil como podéis conseguir esto en vuestro blog.

Lo primero que me gustaría decir es que una de las formas de medir la popularidad de una entrada es por el número de comentarios, es cierto que no tiene por que ser así pero es una de las formas y muy válida para medir cuanto de importante es una entrada.

Antes de nada me gustaría que vierais a lo que me estoy refiriendo, después de insertar el código que detallare un poco más abajo obtendréis algo similar a lo siguiente:

Lo único que tendréis que hacer para conseguir esto es crear un gadget de tipo HTML/Javascript y insertar el siguiente código:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Fsitiooriginal.blogspot.com&num=5" type="text/javascript"></script>


Lo único que tendréis que modificar del código será la dirección de vuestro blog por donde dice sitiooriginal.blogspot.com y el número 5 representa la cantidad de post mas populares que queréis mostrar.
Bueno esto es todo amigos espero que os sea de mucha utilidad!!

MODIFICAR FONDO TITULO GADGET

A raiz del post EXPANDIR GADGET preguntaba misaani como podía cambiar el fondo del título de un gadget. Modificar el aspecto de todos los títulos y fondos es algo común pero en este caso en concreto vamos a ver como podemos modificar uno por uno, así teniendo más flexibilidad a la hora de personalizar y poder mostrar diferentes estilos en las distintas partes de la sidebar.

Los títulos en los elementos de mi sidebar se muestran de la siguiente forma:

En primer lugar tendremos que crear una imágen del mismo ancho y largo de nuestros títulos, por ejemplo:

Una vez tengamos la imágen que pasará a ser la nueva apariencia del título de nuestro gadget tendremos que seguir los siguientes pasos:

Primer paso:(Ubicar código)

Iremos a la parte de código de nuestra plantilla y realizaremos una búsqueda por el nombre del gadget que figura en nuestro panel de administrador, en este caso ARCHIVO.

Encontraremos una línea como la siguiente:

<b:widget id='BlogArchive2' locked='false' title='ARCHIVO' type='BlogArchive'/>


Nos fijaremos en la parte que se encuentra señalada en negrita, después de id, que será el identificador de nuestro gadget.

Segundo paso:(Añadir estilo)

En la parte de código de nuestra plantilla buscaremos ]]></b:skin>, será justamente encima donde tendremos que pegar una línea de código con la siguiente estructura.

#BlogArchive2 h2 {
background: url(URL IMAGEN FONDO) left top;
}



Tendréis que tener en cuenta que lo señalado en negrita será vuestro identificador, que tendrá que ser igual que en el primero paso y lo señalado en color azul será la imágen que creásteis anteriormente, podéis hacer uso de un servidor para alojar vuestra imagen como pueda ser este. Podéis hacer una vista previa antes de guardar los cambios para observar el resultado. En el caso de que el fondo sea de un solo color o tenga algún motivo no tendréis problema, en el caso de que el fondo refleje el título que es ese nuestro caso tendréis que jugar un poco con el título del gadget de forma que quede visualmente agradable sin eliminar completamente el título del gadget. Yo por ejemplo le añadí un punto :). El resultado sería algo como lo siguiente.

Tener un poco de paciencia y ir jugando un poco hasta que quede bonito, lo más seguro es que no os salga a la primera pero bueno ir probando que seguro que conseguiréis cosas muy chulas!. El procedimiento es simple pero si tenéis alguna duda no dudéis en preguntar.

VIDA DEL BLOG Y FECHA

Una forma de mostrar los dias de vida de tu blog y la fecha actual puede ser interesante insertarlo en un blog o web ya que puede ser un dato interesante para los lectores. Insertarlo es muy sencillo y se hará de la siguiente forma.

Deberemos insertar el siguiente script en el lugar donde queramos que aparezca la informacion, en el caso de querer insertarlo en la sidebar que quizás sea lo más común, deberemos insertar un gadget de tipo HTML/Javascript.

<center><script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Hace "+difference+" que mi Blog esta en linea!")
}
countup(2009,02,01)
</script>
Y hoy estás a <script><!--
dows = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
months = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
now = new Date();
dow = now.getDay();
d = now.getDate();
m = now.getMonth();
h = now.getTime();
y = now.getFullYear();
document.write(dows[dow]+" "+d+" de "+months[m]+" de "+y);
//--></script></center>


Personalización:

Puesto que el tiempo de vida de los blogs es diferente, podremos modificar el comienzo del mismo modificando la fecha señalada en color azul. Otros mensajes que podrás modificar serán los señalados en color rojo.

En esta imagen muestro cual sería el resultado, claro está que cada día se actualizarian sus datos pero por no cargar el script lo muestro de la siguiente forma.

EXPANDIR GADGET

Utilizar este recurso es una opción muy inteligente para ahorrar espacio en la sidebar de nuestra web o blog, consiste simplemente en mostrar el título de nuestro gadget y si el usuario está interesado en observar su contenido, lo podrá hacer haciendo click encima del título, seguidamente el título se despleglará mostrando su información.

Un ejemplo es el siguiente, esto es lo que se mostrará:


Al hacer click encima se desplegará mostrando la información de la siguiente forma:

Esto es un simple ejemplo, pero podemos utilizarlo para cualquier gadget.

Primer paso:(Copiar el script)

Iremos al código de nuestra plantilla y colocaremos el siguiente script justamente encima de </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>


Segundo paso:(Buscar el gadget)

Para ello marcaremos la casilla de expandir artilugios en el caso de blogger y realizaremos la búsqueda por ejemplo con ctr+F y realizaremos la búsqueda por el nombre de nuestro gadget, tal y como aparece en nuestro panel de administrador, por ejemplo en el caso anterior mi gadget se llama ARCHIVOS.
Nos encontraremos con la línea de código tal como la siguiente:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>


El nombre variará dependiendo del nombre de vuestro gadget.

Tercer paso:(Agregar código)

*Agregaremos la siguiente línea marcada de color azul de forma que quede así:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("RINCON","slide"); return false'>


La palabra marcada en color rojo hace referencia a un identificador, en el caso de que insertéis este recurso repetidas veces deberéis de cambiar este nombre por cualquier otro de forma que no aparezcan 2 gadgets con el mismo identificador.

Unas líneas mas abajo nos encontraremos con la siguiente línea:

<h2 class='title'><data:title/></h2>
</b:if>

*Agregaremos lo que indico en color azul, de forma que quede de la siguiente forma:

<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='RINCON' style='display: none;'>

Tener en cuenta lo dicho anteriormente del identificador, ya que aquí también tendremos que indicar su nombre correcto en el caso de insertar varios gadgets.

*De la misma forma que anteriormente continuamos hacia abajo en el código y añadimos la línea que indico en color azul.

</div>
<b:include name='quickedit'/>


NUBE DE ETIQUETAS

Os voy a mostrar una forma muy sencilla de hacer una nube de etiquetas. Este recurso nos permitirá ofrecerle a nuestros visitantes las etiquetas de una forma mas atractiva que como lo hace blogger, ya que podremos definir el tamaño y color de los títulos de los enlaces. Es un recurso muy recomendable ya que nos permite mostrar la información de una forma personalizada y llamativa. El resultado que otendremos será algo como lo siguiente:

En primer lugar:(Un poco de estilo)

Deberemos ir al código de nuestra plantilla y colocar el siguiente código justamente encima de la linea donde pone ]]></b:skin>

/* Nube de Etiquetas*/
#tagcloud{
text-align:center;
padding:5px;
}
#tagcloud .tag1{ font-size:0.9em; color:#CC0700;}
#tagcloud .tag2{ font-size:1.1em; color:#CC9C00;}
#tagcloud .tag3{ font-size:1.3em; color:#C2CC00;}
#tagcloud .tag4{ font-size:1.5em; color:#00C2CC;}
#tagcloud a{ text-decoration:none; }
#tagcloud a:hover{ text-decoration:underline; }
/*FIN Nube de Etiquetas*/


Segundo paso:(Entendiendo el código)

Antes de continuar copiando código vamos a entender lo que acabamos de copiar, que se resume a lo siguiente:

padding: es la distancia en píxeles de la separación entre vínculos.
font-size: tamaño de la letra.
color: color del del vínculo. Consultar colores.

Una vez sabemos lo que hemos copiado, continuaremos siguiendo los pasos, luego podremos volver a este punto para personalizarlo teniendo en cuenta para que sirve cada atributo.

Tercer paso:(Crear la nube)

Para ello crearemos un gadget de tipo HTML/Javascript y añadiremos en su interior el siguiente código:

<div id="tagcloud">
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag4">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag3">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag2">Texto Vinculo</a>
<a href="Url_del_enlace" class="tag1">Texto Vinculo</a>
</div>


Como podemos observar son 5 lineas prácticamente iguales, lo único que cambia es el número del tag, por tanto si lo que queremos es clasificar 10 etiquetas tendremos que añadir 10 líneas de la misma forma, únicamente modificando el número que acompaña al tag. Yo por ejemplo combino el número del tag como podéis observar la secuencia es 1,4,3,2,1.., podéis insertarlo en el orden que queráis para darle el efecto deseado. Tendréis que añadir la Url del enlace de la etiqueta correspondiente y el texto del vínculo por cada etiqueta que queráis añadir. Insertados unos cuantos con su respectiva URL es cuando podréis observar el resultado y por tanto personalizar correctamente la nube retrocediendo al primer paso y modificando los atributos correctamente.

MOSTRAR TODAS LAS ENTRADAS

Mostrar todas las entradas realizadas en el blog puede llegar a ser muy útil, principalmente para los nuevos usuarios que acceden al blog, de esta forma se podrán hacer una idea del contenido global del blog. Crear un vínculo que haga esto es muy sencillo y se hace de la siguiente forma:

Deberéis pegar el siguiente código allá donde queráis que aparezca el vínculo:

<a href="http://NOMBREBLOG.blogspot.com/search/label/?max-results=999">Mostrar todas las entradas</a>


Deberéis modificar lo que aparece en negrita, la URL del blog y el título del vínculo.

El resultado será lo siguiente:

Mostrar todas las entradas

(Hacer Click en Mostrar todas las entradas para observar el resultado)

FORMULARIO DE CONTACTO

Esta entrada es una recomendación de SiMoN RoV, me recomendó esta web y yo a su vez os la recomiendo a todos vosotros. Es una forma muy fácil de crear un formulario de contacto, generalmente a la hora de ponerse en contacto con el propietario de un un blog debes buscar su dirección de email, abrir el servidor de correo y redactar vuestra consulta, de esta forma ofreceréis de una forma muy sencilla un simple formulario con el cual facilitaréis el contacto. Una de las ventajas que tiene es que permite controlar el spam. Para que os hagáis una idea, la web permite abrir un formulario como el siguiente.

El acceso al formulario será mediante un botón como este:

Tenéis varios modelos de botones, para elegir, este es un ejemplo.
Podéis hacer click en el botón y veréis como se habre un formulario para poneros en contacto conmigo :) . El mensaje escrito llegará a mi correo. Vosotros podéis hacer lo mismo para que os llegue al vuestro. Sin duda la forma más rápida de crear un formulario de contacto.

Para crear el vuestro:

Acceder a la siguiente web, hacer click en Sign Up, rellenar el formulario, seguidamente os llegarará al correo un email para que confirméis el registro. Una vez confirmado el registro, tendréis que introducir el usuario y contraseña que previamente definisteis. Por último os dirijis a la parte inferior de la página y elegís un botón, copiais el código y lo insertais en vuestro blog en un elemento de tipo HTML/Javascript.
Nota, si queréis que el formulario se cargue en una ventana a parte podéis hacerlo consultando esta entrada. Yo particularmente os lo aconsejo ya que de esta forma dejaréis que vuestros visitantes sigan navegando por vuestro blog una vez realizada la consulta. Probarlo y ya me contáis que tal.

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.

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!!!




CREAR POST- IT

Crear post-it puede ser muy útil en nuestro blog, los podemos utilizar bien para dejar notas o bien para avisar a los lectores de una forma original. Son muchos los blogs en los que los he visto por lo general incrustados en la sidebar y buscando como crearlos de una forma sencilla encontré la siguiente web.

Una vez en la web lo único que tendréis que hacer es seleccionar el tipo de papel y color del texto, luego presionar Create y listo, observaréis el resultado si os gusta podéis descargar la imagen en vuestro ordenador con Save to your computer o bien alojarla en un servidor de imagenes presionando Save to Image Shack, en el caso de haber elegido esta opción se os redijirá a la web de Image Shack donde podréis compiar el enlace para insertarlo en vuestro blog.

El resultado será algo como lo siguiente:

MENU VERTICAL

Os voy a mostrar una forma muy simple de crear un menú en forma vertical
El aspecto será el siguiente:

TITULO1
TITULO2

Pasos para crear vuestro menú:

Primer paso:(Ubicación del código)

Ir a Diseño->Edición de HTML y buscar en la parte del código ]]></b:skin>
justamente encima pegaremos el siguiente código:


#Greydrop a, #Greydrop a:visited {
text-align:center;
position:relative;
text-decoration:none;
display:block;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_110.gif) repeat-x scroll 0 0;
color:#ffffff;
font-weight: bold;
width:10em;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
border:2px solid #fff;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
padding:0.25em;
margin:0.5em auto;
}
#Greydrop a:hover {
top:1px;
border-color: #cccccc #7d7d7d #7d7d7d #cccccc;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
Font-weight: bold;
color:#ffffff;
background:transparent url(http://i88.servimg.com/u/f88/12/78/97/76/grey_210.png) repeat-x scroll 0 0;
}


Guardaremos los cambios y listo, ya tenemos lo necesario para crear nuestro menú.

Segundo Paso:(Crear el menú)

Lo normal será insertarlo en la sidebar de nuestro blog, para ello crearemos un gadget de tipo HTML/Javascript y allí pegaremos el siguiente código.




<div id="Greydrop">
<a href="URL DEL ENLACE 1">TITULO1</a>
<a href="URL DEL ENLACE 2">TITULO2</a>
</div>


Sustituir URL DEL ENLACE por la dirección hacia donde queráis ir al hacer click y TITULO por el título que se mostrará en el menú, podréis añadir tantos títulos como queráis tan solo tendréis que añadir al código tantas lineas de código como enlaces queráis.

AMPLIAR IMAGEN CON CURSOR ENCIMA

Este recurso consiste en ampliar una imagen simplemente poniendo el cursor encima, se ampliará sin necesidad de hacer click en la imagen como normalmente estamos acostumbrados. Este recurso que nos permite hacer CSS viene especialmente bien para imagenes pequeñas o simplemente para llamar la atención de los visitantes, para insertarlo en vustro blog tan solo tendréis que seguir los siquientes pasos.

Primer paso:(Copia del estilo)

Nos tendremos que ir al apartado HTML de nuestro blog y copiar el siguiente código justamente encima de </head>


<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}
</style>


Segundo paso:(Crear imagen)

Llegado este punto ya tendremos el estilo necesario para crear nuestra ampliación, tan tolo tendremos que alojar nuestra imagen en un servidor de imagenes, yo por ejemplo utilizo tinypic, una vez obtenida la dirección de la imagen tendréis que copiar el siguiente código en el lugar que queráis crear el efecto.

<a class="thumbnail" href="#thumb"><img src="URL IMAGEN" width="100px" height="100px" border="0" /><span><img src="URL IMAGEN" /><br />TEXTO (OPCIONAL)</span></a>


Cambiar URL IMAGEN por la dirección de vuestra imagen, fijaros que lo tendréis que incluir dos veces. Como opcional podréis añadir texto donde puse TEXTO (OPCIONAL).

El resultado será lo siquiente:(Poner cursor encima de la imagen)

Texto si se desea poner

TOTAL ENTRADAS Y COMENTARIOS

Mostrar el número de entradas y comentarios en el blog es algo imprescindible desde mi punto de vista ya que los visitantes podrán hacerse una idea de la cantidad de contenido del blog. Nos puede ayudar también a nosotros ya que de una forma rápida podremos saber si existen nuevos comentarios simplemente accediendo al blog directamente. La forma de incorporarlo al blog es muy sencilla y es la siguiente.

Lo normal es que este dato lo tengamos en nuestra sidebar, por tanto los que utilizamos blogger lo haremos creando un nuevo gadget de tipo HTML/Javascript, allí es donde tendremos que pegar el script que muestro a continuación.

<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src=http://VUESTRO BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount></script> Entradas y <script src="http://VUESTRO BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comentarios


Cambiar donde puse VUESTRO BLOG por el nombre del blog.

Nota: Podéis cambiar si lo deseáis el texto de 'Entradas' y 'Comentarios', por ejemplo poniendo post y comments o cualquier otra cosa que se os ocurra tan solo buscar esas palabras en el código y sustituirlas por las vuestras.

SPOILER IMAGENES Y TEXTOS OCULTOS

Spoiler no es mas que un texto o imagen oculto detrás de un texto, son bastante útiles para alojar por ejemplo imágenes de gran tamaño o textos, veamos un ejemplo que es la forma más fácil de entenderlo.

EJEMPLO(Pinchar aquí para ver el ejemplo)

Esto es un ejemplo muy simple, lo podéis complicar tanto como queráis, podéis combinar texto con imágenes, solo texto o imágenes en fín eso depende de la utilidad que le vayáis a dar.


Como insertarlo en vuestro blog:

Primer paso:(acciones previas)

Tendréis que insertar un pequeño código en vuestra plantilla, para ellos dirijiros a Diseño->Edición de HTML

Buscar </head> justamente encima del mismo copiar el código:

<script type='text/Javascript'>

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Una vez insertado ese código buscar la parte de código ]]></b:skin> y justamente encima colocaremos el siguiente fragmento de código:

.commenthidden {display:none;}
.commentshown {display:inline;}

Guardamos la plantilla y listo para utilizar.


Segundo paso:(inserción spoiler)

En el lugar que queramos que aparezca nuestro spoiler tendremos que añadir unas líneas de código, si es en una entrada en edición de HTML, si es en un lugar de la plantilla en el lugar del código oportuno y si es en un gadget este será de tipo HTML/javaScript.




<a aiotitle="click para expandir" href="javascript:togglecomments('Identificador')">SPOILER</a>
<div class="commenthidden" id="Identificador">Contenido Oculto</div>


Personalizar :

Identificador: Hace referencia a un nombre que tendréis que darle al spoiler, este nombre tendrá que ser único, es decir dos spoiler no podrán tener el mismo nombre, podréis asignarle cualquiera que se os ocurra ya que este no se verá reflejado en ningun lugar.

Contenido Oculto: Aquí es donde insertaréis el texto o imágen oculto

• Para insertar imágenes tendréis que subirlas a un servidor de imágenes como puede ser tinipyc, una vez generado el código tendréis que copiar el primer enlace donde dice: Dirección HTML para sitios Web y sustituirlo por donde puse contenido oculto.

• Para insertar texto, donde puse contenido oculto insertar algo de este tipo

  <span style="font-weight:bold;">Aqui el texto que queráis</span>
  

  Podéis por supuesto modificar el estilo de letra tamaño, color...
  

Nota: Combinar los pasos anteriores es muy simple, simplemente es realizar las acciones en el orden que más os convenga.

TEXTO SIGUE RATON

Poner un texto que persiga al ratón por cualquier parte de la pantalla es muy fácil tal solo tendréis que seguir las siguientes indicaciones.

Primer paso: Ve a Diseño->Nuevo Gadget->HTML/Javascript

Segundo paso: Tendrás que copiar el siguiente código.

<script language="JavaScript" type="text/javascript">
mensaje = 'Deja tus comentarios';
font = 'Arial';
size = 2;
color = 'red';
velocidad = 0.8;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);
mensaje = mensaje.split('');
n = mensaje.length;
a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";
if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
if(n4)
window.captureEvents(Event.MOUSEMOVE);
function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}
if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;
y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();
for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}
function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;
for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}
function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);
for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}
window.onload = ondula;
</script>


Tercer paso:(personalización)
No os asusteis por el código ya que lo único que tendréis que cambiar es:

mensaje: 'Escribir el que vosotros queráis'
font: podéis elegir entre Arial, Verdana, Helvetica, Comic Sans MS(es el tipo de letra)
size: tamaño de la letra
color: red, white, black, blue, green (color del texto)
velocidad: velocidad con que se mueven las letras.

MASCOTA PARA TU BLOG

Una mascota es una de las cosas que podéis incorporar a vuestro blog, tendréis la oportunidad de darle un nombre y personalizarla a vuestro antojo, hay muchas webs que ofrecen multitud de mascotas yo os os voy a mostrar uno y es el siguiente. Bunnyherolabs

Una ve aquí elegir la que más os guste, cada mascota se comporta de una forma diferente, podéis probarlo antes de agregarla a vuestro blog.

Yo por ejemplo voy a coger el un cerdito.
Escogéis los colores que mas os gusten, introducís el nombre de la mascota y el vuestro que será su cuidador y presionar finish.
Luego seleccionaréis other sites en el caso que sea un blog donde queráis incorporarlo y allí el tipo de blog.

Copiar el código y insertarlo en un gadget, el resultado será algo así:

Suerte y a disfrutar de vuestra mascota!!

BUSCADOR BLOG

Un buscador permite encontrar rápidamente entradas relacionadas con ciertos términos de búsqueda, de esta forma facilitaremos a los lectores encontrar entradas relacionadas con cierto criterio de búsqueda.
Desde mi punto de vista todos los blogs y webs deberían integrar uno, ya que es una forma muy rápida de localizar entradas.
Insertar un buscador es muy sencillo, ahora os mostraré varias formas para que elijáis el que más os convenga.

Buscador Sencillo:

Es el buscador común.

Deberemos dirigirnos a Diseño->Añadir un gadget->HTML/Javascript y insertar el siguiente código.


<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>


Podemos cambiar el nombre del botón donde pone "Buscar" por cualquiera que nosotros queramos, siempre respetando las "".
Guardamos y ya está ya tenemos buscador.

Buscador Personalizado:

Ahora os voy a enseñar a cambiar el botón Buscar por cualquier otro icono que queramos.
En primer lugar realizamos los mismos pasos que en el buscador sencillo, luego tendremos que cambiar la siguiente línea.

<input id="search-btn" value="Buscar" type="submit"/></form>


Por esta otra:

<input border="0" alt="Buscar" src="http://img234.imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>
</form>


Esto nos daría como resultado:

Vemos como hemos cambiado el botón de buscar por una lupa, es posible poner de icono cualquiera que vosotros queráis, lo único que tendréis que cambiar es la url de vuestro icono donde pone src="Aquí pone la url de la lupa", podéis consultar aquí como conseguir la url de una imagen, tendréis que tener en cuenta el tamaño de la imagen ya que si no la modificáis se os añadirá a tamaño real.

Adivinos
compañias seguros medicos
Consultas amor

CONTADOR DE VISITAS

Una de las primeras cosas que se tiende a hacer al crear un blog es llevar un recuento de las personas que entran en tu blog. Hay un montón de páginas donde encontrar este tipo de contadores yo os voy a mostrar algunos de ellos, que son los mas utilizados.

Pinchar en la imagen, personalizar los colores, si los que ofrece la web no son de tu gusto puedes introducirlos manualmente eligiendo el código personalizando lo
Una vez personalizado tan solo tendremos que copiar el código y pegarlo en el lugar donde queramos que aparezca.
Yo utilizo este ya que a parte de decirte los usuarios que están en línea te ofrece un gráfico con los accesos a lo largo del día.

En esta web se ofrecen distintos diseños, en la imagen tan solo se muestra uno de ellos pero en el desplegable podréis observar todos los que se pueden insertar, la ventaja de este contador es que permite inicializarlo con un valor inicial ideal para aquellos que no inserten su contador al principio de comenzar a escribir en su blog. Lo único que hay que hacer es seleccionar el modelo, el valor inicial y la dirección de tu blog.

En esta web podréis encontrar multitud de contadores estos son solo unos ejemplos, pinchar en la imagen y acceder a la web tan solo tenéis que seleccionar el que más os guste y copiar el código que se genera, aparte la web permite personalizar relojes, pagerank,mapas... en fin una web bastante útil y lo mejor de todo no hace falta registrarse.

Otra web que no requiere registro, dispone de multitud de contadores, lo único que tendreis que introducir es vuestro email y un código de verificación que os lo indicará en la web.