TODOBLOGSPOT

Entradas mas populares - Widget-

2008-10-22T07:08:00.000-07:00

Bien este es un widget que sirve para mostrar tus entradas mas populares bansandose en la cantidad de comentarios que se encuentre en cada una de ellas y que por lo tanto determinan su orden

También podremos elegir la cantidad de entradas que queramos que aparescan en el widget

Bien primero lo que vamos a hacer es ir a diseño y agregamos un elemento HTML y pondremos 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%2Ftodoblogspot.blogspot.com&num=5" type="text/javascript"></script>

Bien aquí solo cambiamos el nombre de su blog y también si quieren modificar el numero de entradas que se muestran modificando donde dice: &num=5, por el numero que deseen

Calificacion en tu blog

2008-10-08T14:05:00.000-07:00

Bien como pueden observar desde ahora debajo de cada post hay 5 estrellas que le dan un determinado valor al post en el que se encuentra, esto no solo sirve para calificar los post sino también para saber que es lo que mas le gusta o interesa a los usuarios habituales de tu blog

Para tener este widget es muy simple primero que nada debemos ir a outbrain rating

Una ves ahí elegimos la plataforma de nuestro blog, si queremos nos registramos pero no es nesesario. Luego elegimos el idioma y hacemos clik en "Get widgetnow" y listo estomáticamente nos nos habré una planilla del blogger donde elegimos y instalamos.

Espero que les sirva saludos

Cambiar texto "Entradas antiguas"

2008-09-22T17:03:00.000-07:00

Bien si vemos nuestro blog notamos que por debajo de todo nos aparecen tres frases que nos enlacan a determinado lugares, "Entradas antiguas" que nos lleva a los post mas antiguos que tenemos, "Página principal" que nos dirige a la pagina que nos habre por defecto y "Entradas más recientes" que nos lleva a los ultmos post que hayamos publicado.

Lo que pasaremos ha modificar son esas frase por botones o por otra frase que nosotros quieramos, entonces nos dirigimos a la pestaña Diseño y vamos a "Edicion de HTML" expandimos artilugios y buscamos el siguiente codigo:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

En el caso de cambiarlo por botones sustituiremos ese codigo por el siguiente:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>

<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='Direccion del boton entradas mas recientes'/></a>
</b:if><b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='Direccion del boton entradas antiguas'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='Direccion del boton pagina principal'/></a>
</div>
<div class='clear'/>
</b:includable>

Aqui solo modificaremos donde dice "Direccion del boton..." por la direccion web de donde este alojado el boton, si es que no tienen aqui tienen unos ejemplos:

http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif (Entradas mas recientes)

http://photos1.blogger.com/blogger2/3880/707811929476148/1600/right.gif (Entradas antiguas)

http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif (Pagina principal)

Ahora en el caso de solo cambiar la frase sustituiremos el codigo por este otro:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>Hacia las mas recientes</a>
</b:if> <b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>Hacia las mas antiguas</a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>Pagina de Inicio</a>
</div>
<div class='clear'/>
</b:includable>

Y listo espero que les sirva!!!

My Plugoo

2008-09-15T13:53:00.000-07:00

My Plugoo es un servicio que nos permite comunicarnos vía MSN Messenger (también sirve Yahoo! Messenger, AIM, GoogleTalk, Jabber o ICQ) hasta tu propio blog en privado, y cuando nos hablen nos aparecerá una ventana normal en el Messenger.

Bien lo primero que tenemos que hacer es ir a la pagina de My Plugoo le damos click en Widget Plugoo y elegimos el Messenger que usamos a diario!
Rellenamos todos los datos que nos pide y al final nos dará un código HTML que lo vamos a pegar a nuestro blog, en la edición HTML si sabes un poco o sino añades un gadget HTML/Javascript.

Y listo ya tendrás tu Plugoo funcionando en tu blog!

Colores de fondo aleatorios

2008-09-04T13:55:00.000-07:00

Lo que hacemos con este escript es que los colores de fondo de nuestro blog vallan cambiando de forma aleatoria entre una serie de colores que nosotros podemos personalizar

Bien lo primero que vamos a hacer es ir a la pestaña "Diseño" y vamos a "Edición de HTML" nos situamos por debajo del Body y agregamos lo siguiente:

var bgcolorlist=new Array(”#DFDFFF”, “#FFFFBF”, “#80FF80″, “#EAEAFF”, “#C9FFA8″, “#F7F7F7″, “#FFFFFF”, “#DDDD00″)

document.bgColor=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]

Los valores de los colores los podemos cambiar a nuestro gusto y obviamente también agregar mas.

Botón para Imprimir

2008-08-15T08:11:00.000-07:00

Bien si quieres poner un botón para que las personas quieran imprimir el texto es muy simple solo con un script ya esta listo.

Vamos a creación de entradas y en "edición de HTML" ponemos el siguiente código:

<a href="javascript:print()">Imprimir</a>

Y listo solo debes elegir donde ponerlo y si deseas cambiar el texto o poner una imagen solo cambia la parte de "imprimir" por la que desees.

Si quieres usar este script en todos los post lo que debes hacer es ir a conflagración y le das click en "formato" y pegas el código en la "plantilla de entrada" y listo!
Quedaria algo asi:

Imprimir

Cambiar texto "x comentarios"

2008-08-12T14:44:00.000-07:00

Bien ahora pasaremos a explicar como cambiar el texto "x comentarios" por uno mas vistoso y a la ves atraiga mas comentarios.

Lo primero que tenemos que hacer es ir a diseño y le damos un click en "edicion de HTML", y seleccionamos la casilla "expandir plantillas de artilugios" y buscamos esta parte del codigo que por cierto aveces no esta del todo igual:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

(nota- si no encuentra el codigo pruebe buscando con control+f con mozilla firefox)

Y la cambiamos completamente por la siguiente:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Agrega tu comentario<b:else/><data:post.numComments/> comentarios, agrega el tuyo!</b:if></a>
</b:if>
</b:if>
</span>

Obviamente puedes cambiar el texto por el que prefieras solo cambiando las partes "Agrega tu comentario" y "comentarios, agrega el tuyo!"

espero que sirva saludos!

Texto que sigue al cursor

2008-08-08T08:33:00.001-07:00

Con este truco podremos hacer que un texto que nos guste pueda seguir al cursor por la web, y aparte de elegir el texto tambien podremos camiarle el tipo de letra, el color, el tamaño y la velocidad a la que queremos que siga al cursor.

Bien para esto tendremos que ir a diseño y le damos click en agregar un elemento HTML-Javascript y agregamos el siguiente codigo:

<script language="JavaScript" type="text/javascript">

mensaje = 'COLOCAR AQUI LA FRASE QUE SIGUE AL CURSOR';
font = 'Verdana,Arial';
size = 2;
color = 'black';
velocidad = 0.7;

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>

Ahora si queresmos cambiar algo como lo dijimos anteriormente vamos al principio y modificamos a gusto el mensaje, font, size, color y velocidad luego guardamos y listo ya tendremos a nuestro texto persiguiendo al cursor

Links en movimiento

2008-07-25T11:31:00.000-07:00

Este truco puede ser usado tanto en un post como en la sideber se trata de un código que hace que nos muestre los links de abajo hacia arriba repitiéndose y que al posar la flecha sobre el este se detenga.

Bien lo primero es insertar el siguiente código:

<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up">Aqui van los links</marquee>

Ahora que tenemos el código vamos a agregarle las direcciones y sus respectivos links, ej: donde dice "Aquí van los links" los sustituiremos por esto:

<a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a>

Primero va la dirección web y segundo el nombre que queramos que aparezca, ahora si queremos agregarle otro pero que no quede pegado al mismo le agregamos esto: <br/> pegado a lo anterior y nos quedara por debajo del primero pero si queremos que nos quede renglón por medio agregamos otro <br/> después del anterior y luego pegado la próxima dirección con su respectivo nombre y nos quedaría algo así con el siguiente codigo completo

<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up"><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></a><br/><br/><a href='http://www.todoblogspot.blogspot.com'>TODO BLOGSPOT</a></marquee>

TODO BLOGSPOT

TODO BLOGSPOT

TODO BLOGSPOT

TODO BLOGSPOT

TODO BLOGSPOT

TODO BLOGSPOT

TODO BLOGSPOT

Texto con movimiento

2008-07-25T11:12:00.000-07:00

Si queremos tener un texto en movimiento ya sea que se mueva desde lo laterales o sino de arriba abajo o abajo arriba.

bien el siguiente código es para que el texto se mueva por los laterales y para eso ponemos lo siguiente:

<marquee behavior="alternate"><strong>TODO BLOGSPOT</strong></marquee>

y nos quedaría así:
TODO BLOGSPOT

obviamente cambiamos donde dice "TODO BLOGSPOT" por el texto que quieran poner.

Bien ahora si queremos que el texto se mueva de arriba a abajo y viceversa pondremos el siguiente código:

<marquee direction="up" behavior="alternate">TODO BLOGSPOT</marquee>

y nos quedaría así:

TODO BLOGSPOT

Espero que les guste saludos!

Insertar un archivo Flash en Sidebar

2008-07-15T18:04:00.000-07:00

Bueno para poner archivo Flash o SWF en la Sidebar debemos a diseño y le damos en insertar un elemento de página HTML/Javascript y colocamos el siguiente código:

<embed quality="high" allowscriptaccess="never" type="application/x-shockwave-flash" height="200" src=" URL del arcivo .swf" width="200" wmode="Transparent"/></embed>

se puede modificar el ancho(width)y el alto(height) sin pasarse de la sidebar, bueno espero que te sirva como ves es muy simple saludos

Chat Cbox en Blogger

2008-07-12T17:24:00.000-07:00

A la hora de poner un chat hay varias paginas que nos facilitan uno, la que mas he visto es Cbox y es muy facil hacerte uno solo basta con un par de clicks y datos para tener un chat en tu blogger bien lo primero que tenemos que hacer es ir a la web Cbox y le damos en la pestaña "sign up"

Llenamos los datos que nos pide y podemos elegir la combinacion de colores que deseamos y le damos a "Create my Cbox!" le damos ok y nos dara un codigo y lo copiamos.

Vamos a Blogger y le damos a la pestaña de diseño, agregamos un elemento "HTML/javascrip" y listo ya tendremos un chat en nustro blog!!!

Animación para enlaces

2008-07-11T16:12:00.000-07:00

Cuando hablamos de animación para enlaces nos referimos a que al pasar la flecha por el enlace este nos muestre una animación antes de clickearlo.

solo con agregar un código en la plantilla nos quedaran todos los enlaces con una animación, entonces nos dirigimos a diseño y le hacemos click en "Edición de HTML" y buscamos el siguiente código:

a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Bien ahora nos situamos por debajo de la siguiente linea a:hover { y agregamos el siguiente código:

background:url(http://byfiles.storage.live.com/y1pVKail77lerMV1KYChvWxtbpDvACMxupQI4iyrEjOaEDWqn7-eOQwwo2JBPLtBy-sJoqWZa7rBVs);

Probamos con vista previa y al pasar por un enlace nos tendría que mostrar la animación, en este caso son mariposas pero puedes buscar una animación gif y probarla como queda con tan solo sustituir la dirección de la imagen.

Menú desplegable en sidebar

2008-07-11T14:12:00.000-07:00

El menú desplegable en sidebar se trata de un pequeño menú en la barra lateral de su sitio, obviamente se puede cambiar el lugar a su gusto.

Lo primero que vamos a hacer es ir a diseño y en agregamos un nuevo elemento HTML-Javascript, y copiamos el siguiente código:

<script language="javascript">
function ir(){
var thebox=document.menu
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}

</script>
<form name="menu">
<select name="example" size="1">
<option selected/>Otros Blogs
<option value="http://todoblogspot.blogspot.com"/>Todo blogspot
<option value="http://directoriobloggero.com.ar"/>Directorio de blogs
<option value="http://www.google.com/blogsearch?hl=en"/>Google blogsearch
</select>
<input value="OK" onclick="ir()" type="button"/> <br/>
<input value="ON" name="windowoption" type="checkbox"/>
Abrir en una nueva ventana
</form>

Para modificar solo tenemos que cambiar los nombres y las direcciones si queremos cambiar el titulo del menú cambiamos donde dice "Otros Blogs" y después cambiamos las direcciones siguientes del titulo, espero que les sirva
saludos

Smileys en Blogger

2008-07-06T18:41:00.000-07:00

La verdad después de tanto buscar este pequeño truco de como poner Smileys en blogger encontré y modifique uno que hace muy simple su uso tanto para los post como para los comentarios que nos hacen. y también con solo cambiar una parte del código obtendremos otros tipos de Smileys que tal ves nos gusten mas

Bien ahora vamos a "edición de html" y nos situamos por encima del </head> y pegamos el siguiente código:

<script src='http://louislim2.googlepages.com/addSmiley.js'/>

Bien si ahora esas caritas no nos gustan vamos al buscador y ponemos lo siguiente: addSmiley.js y ahí nos saldrán otras direcciones que contiene smileys solo cambiamos la dirección "http://.........js" y listo

Guardamos la plantilla y listo ya estarán nuestros Smileys funcionando, Vale aclarar que si colocamos un smiley al principio del post puede que no nos salga nada osea antes de poner una carita asegurate de que tiene un texto por delante

espero que les guste saludos

Redireccionar tu blog a otra direccion

2008-07-02T09:57:00.000-07:00

Muchas veces nos hemos encontrado con la necesidad de cambiar la dirección de nuestro blog, ya sea por cambio de nombre o por empezar de nuevo con el blog en otra dirección. Y también queremos que los visitantes se enteren de este cambio, podríamos hacerlo con solo escribir un mensaje con la nueva dirección o con un enlace.
Pero hay una forma mas fácil de hacerlo y es con un enlace automático que al entrar al viejo blog antes de que cargue nos mande a la nueva dirección, tan rápido y eficiente que el usuario no se dará cuenta del cambio.

Vamos a "edición de HTML" y ponemos el siguiente código antes de la etiqueta <body>

<script type="text/javascript">
window.location="http://nuevaurldetublog";
</script>

Y listo ahora los usuarios serán redireccionados a tu nuevo blog, espero que les sirva.

Obtener visitas via Google Blog Search

2008-06-30T06:39:00.000-07:00

Si quieres conseguir visitas y ya ha visto los Posts anterior sobre "Darse de alta en buscadores" y "Añadir Sitemap en Blogger" entonces deben saber que Google es una gran fuente de visitas para muchos sitios.

Ahora también registraremos nuestro Blog en Google Blog Search, que es un servicio de Google, solo que busca noticias en Blogs más que resultados webs, así que podemos decir que es el mejor buscador de Blogs.

Bien ahora vamos a ir a la siguiente dirección para poder conseguir que nuestra web sea indexada por este excelente servicio:

Hacemos click en el enlace http://blogsearch.google.com/ping

En el cuadro de texto tenemos que agregar la dirección de su atom, En caso de Blogger, su dirección debe ser así: http://tublog.blogspot.com/atom.xml

Luego le damos en "submit blog" y listo con esto ustedes están enviando su blog a Google Blog Search.

Precarga dinámica del Blog

2008-06-24T13:32:00.000-07:00

Precarga dinámica del Blog es cuando nuestro blog tiene demasiados widgets y elementos entonces tarda mucho en cargar, entonces este codigo mostrara un loader mientras la pagina esta en proceso de carga. Esto es muy útil para nuestros visitantes y queda muy bien a la vista.

Primero iremos a "Edicion de plantilla" y nos situaresmos justo antes del </head> y pondremos el siguiente codigo:


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


Luego guardamos la plantilla y si no sale ningun error vamos a "Elementos de la Página" y seleccionamos el elemento "HTML/Javascript" y pegamos el siguiente código:

div id="imgLOAD" style="text-align:center;">Cargando Blog ...
<img src=" URL del archivo "/></div>

El texto "Cargando Blog..." podemos cambiarlo por lo que quieramos. Y donde dice "URL del archivo" ahi es donde va la imagen de nuestro cargador, pueden crear alguno en este sitio: Ajax Load solo elijen el modelo y luego los colores pueden visualizarlo y si les gusta lo bajan, asi quedaria un ejemplo:

Una ves que lo bajamos lo alojamos en un sevidor ej: fileden y nos dara la direccion URL que la pegaremos e el codigo y listo ya tendremos nuestro precargador funcionando.

Botón ir arriba

2008-06-20T13:24:00.000-07:00

El botón "ir arriba" consiste en un botón o imagen que va ubicado en el fondo de nuestra blog, hay 2 formas de hacerlo flotante, es decir se ve siempre y se corre cuando corremos el scroll. O sino estático al fondo del blog para ambos se necesita un código muy sencillo que pasaremos a explicar.

Antes de poner los códigos de los distintos modos vamos a buscar o alojar un botón o imagen, si es que no lo tenemos. Aunque también se puede usar solo texto.
Si es que no tiene una imagen o botón pueden buscar en internet hay varias paginas esta es un ej: click aqui ahí tenemos varios botones nosotros elegimos esta flecha. Bien ahora pasaremos al código.

En el modo "flotante" pondremos el siguiente código después del <body>

<a href='#'><img alt='ir arriba' border='0' src='http://www.pekegifs.com/flechas/007.gif' style='position:fixed; bottom:0; right:0;'/></a>

Expliquemos donde dice "http://www.pekegifs.com....gif" ahí va la dirección de su imagen o botón, y si se quiere que al pasar el cursor sobre la imagen nos muestre unas letras de "ir arriba" o lo que deseen solo agreguen al final esto: title='ir arriba' osea quedaría así:

<a href='#'><img alt='ir arriba' border='0' src='http://www.pekegifs.com/flechas/007.gif' style='position:fixed; bottom:0; right:0;' title='ir arriba'/></a>

Ahora para el otro modo "estático" o podemos pegarlo en la plantilla después del footer o sino agregamos un elemento de pagina y lo movemos al fondo del blog, el código es el siguiente:

<a href='#'><img src='http://www.pekegifs.com/flechas/007.gif' alt='ir arriba'/></a>

Al igual que el otro se cambia la dirección y listo.
Vale aclara que no funciona en vista previa en ninguno de los dos casos, cualquier consulta comentar.

Reproductor de mp3

2008-06-19T11:04:00.000-07:00

He visto que no solo quieren tener música en su blog sino también archivos de audio mp3, ya sea otras canciones, comentarios, etc. ya que los productores online solo admiten música encontré una pagina que te deja poner reproductores de mp3 solo basta subir los archivos de mp3 a un servidor colocarlos en la lista y ya tenemos el reproductor funcionando sin problemas.

Bien ahora pasemos a explicar, encontré una pagina www.poqbum.com, que no solo tiene reproductores sino que también tiene: falsh toys, flash generatos, graphics, etc. pero hoy iremos a la izquierda donde dice "flash mp3 player" nos abrirá una pagina nueva, si queremos nos podemos registrar aunque no es necesario, haces click en el primer "here".

Nos mostrara 6 categorías de reproductores y cada una con varios skins, elegimos las que mas nos guste y le damos en "continué". Ahí nos muestra la variedad de skins de esa categoría y elegimos la que mas nos guste y le damos otra ves en "continué".

En la siguiente pagina nos aclara un par de cosas en ingles y nos da a elegir si queremos que el reproductor comience solo, y también si queremos random en las pistas de audio. Luego nos da a elegir la cantidad de tracks que quieres tener el máximo son 15 por reproductor elegimos la cantidad deseada y luego donde dice"Track URL:" ahí va la dirección de un audio alojado en un servidor como por ej: Fileden si no tienes ningún archivo de audio alojado abrimos otra pestaña o ventana y subes tus archivos, a mediad que los vallas subiendo te dará las direcciones url que las tendrás que poner ahí. Y donde dice"Title/Artist:" pones el nombre del tema y listo hacemos lo mismo para los demás tracks y cuando terminamos le damos en "continué" nuevamente.

En esta pagina nos dará el código para copiar y pegar en nuestro blog y listo así de simple! por consultas de como sacar la imagen de abajo dejen comentarios

Cambiar el Cursor

2008-06-17T19:43:00.000-07:00

Para cambiar la figura del cursor mientras se navega por nuestro blog es muy simple.

Para empezar cabe aclarar que solo funciona con Internet Explorer y no con Firefox, pero no hay que desanimarse, ya que varios usan Internet Explorer y podrán ver nuestro cursor y los que usan Firefox verán el cursor de siempre.

Primero tenemos que conseguir un cursor, los formatos mas comunes son .cur y .ani, que se que funcionan.

En esta pagina: www.myspacecursor.net, pueden encontrar muchos cursores clasificados en categorías, pero existen varias mas solo hay que buscarlas.

Después de escoger uno que nos agrade copiamos el código y lo pegamos en nuestra plantilla, debajo de <body> funciona bien.

Ej: este seria el codigo que nos da la web de un cursor Gothic:

<style type="text/css">body {cursor: url(http://www.myspacecursor.net/gothic/1.ani); }</style><br /> <a href="http://www.myspacecursor.net" title="Free Cursors">Free Cursors</a><a href="http://www.freelayoutsnow.com" title="Myspace Layouts">Myspace Layouts</a><a href="http://www.getmyspacecomments.com" title="Myspace Comments">Myspace Comments</a><br />

Bien cuando lo vemos en IE notamos que arriba en el medio aparece un enlace de la pagina del cursor: Free CursorsMyspace LayoutsMyspace Comments, una forma de eliminar eso y hacer mas simple el codigo es hacer lo siguiente.

Nos ubicamos nuevamente debajo del <body> si tenemos el otro código anterior lo borramos todo menos donde dice "http://www.myspacecursor.net/gothic/1.ani" y ponemos el siguiente código:

<style type='text/css'>
body {cursor: url(http://www.myspacecursor.net/gothic/1.ani); }</style>

Así de simple queda el código guardamos la plantilla y probamos en IE si esta todo bien se vera sin problemas, este código se puede usar con cualquier pagina web que tenga cursores tanto ".ani" como ".cur" solo `ponemos la dirección del cursor y listo.

Google Gadgets

2008-06-14T09:44:00.000-07:00

Google Gadgets es una pagina web donde podrán encontrar varios accesorios para su blog, ej: noticias, tecnología, deportes finanzas, etc.

Solo vas a Google Gadgets buscas en gadget que necesitas o te gusta y le das en "Añadir a tu pagina web".
Te abrirá una pagina donde aun puedes personalizarla mas a tu gusto, si quieres le cambias algo y le das click a botón "Vista previa de las modificaciones" sino te gusta puedes volver a cambiarlo y si te gusto como quedo le das click en "Obtener el código" aparecerá por debajo el código lo copias vas a blogger y lo pegas en tu plantillas y listo ya tienes tu Google Gadgets

Enlazar imagen

2008-06-04T11:31:00.000-07:00

Si quieres poner una imagen para que otros enlazen tu blog lo primero que tenemos que hacer es crear la imagen, con un programa de diseño como Photoshop, Corel, Fireworks, etc.
O también hay paginas que te ayudan a hacerlo ej: www.banner-generator.net que te ayuda a hacer distintos tipos de banners.

Una ves hecha tu imagen procura que sea gif, png o swf que también se pueden animar, subela a un servidor ej: fileden para que te de la ruta URL de la imagen.

Esta es nuestra imagen para enlazar, el tamaño original es de 150 x 50 px (pixels) pero los tamaños varían, entramos a Blogger y vamos a diseño, en elementos de pagina le damos en "añadir elemento de pagina" y luego en "HTML/Javascript" y ponemos el siguiente código:

<a
target="_blank" href="http://todoblogspot.blogspot.com"><img src="http://www.fileden.com/files/2008/5/6/1899366/ENLAZAME.gif"
title="Todo sobre Blogger y mas..."/></a>

Bien ahora pasemos a explicar, donde dice "http://todoblogspot.blogspot.com" ahí va la dirección de su blog, donde dice "http://www.fileden.com.....gif" acá va la url de su imagen y donde dice "Todo sobre Blogger y mas..." esto es para que cuando se pase el cursor por la imagen esta muestre un texto (eso es opcional).
Bien ahora vamos a poner el código para que lo puedan copiar y así enlazar, puede ir seguido del otro como lo tenemos nosotros o también lo puedes poner como otro elemento.

<textarea><a href="http://todoblogspot.blogspot.com"><img border="0" src="http://www.fileden.com/files/2008/5/6/1899366/ENLAZAME.gif"
title="Todo sobre Blogger y mas..."/></a></textarea>

Al igual que el otro código cambias las mismas partes y listo ya tendrás tu imagen para que otros te puedan enlazar

Poner reproductor de música

2008-06-02T10:18:00.000-07:00

A la hora de elegir un reproductor de música para tu blog hay una gran variedad, pero el que mas me gusto es Finetune, un servicio que permite crear un playlist con 45 canciones, 3 por autor y colocarlo en tu blog para el que quiera pueda escucharlo.

Lo primero que hay que hacer es inscribirse en "register", esta en ingles pero igual es fácil entender, rellenamos los datos y comenzamos el playlist.

Al estar registrado puedes comenzar a agregar la música que quieras con el buscador. Puedes tener una previa de 30 segundos para ver si te gusta o agregarla a tu playlist con el signo más.

También te da la opción si no se te ocurre qué más agregar, hacer click en "I m lazy" y agrega otras pocas más, si te gustan las dejas y sino las borras y pruebas de nuevo. Luego para ponerlo en tu blog debes hacer click en "embed playlist" y te dará el código para colocarlo en blogger. También tienes otras opciones investiga bien!

Y bueno así es como quedaria el reproductor, espero que sirva!

Poner un SWF

2008-05-29T19:39:00.000-07:00

La verdad es muy fácil poner una archivo en swf o mas común flash, primero que nada tenemos que encontrar un servidor donde nos deje alojar nuestro swf un ej: es Photobucket pero hay varios servidores donde alojarlo.

Una ves alojado vamos a Blogger y en "Creación de entradas" y hacemos click en la pestaña "Edición de HTML" y ponemos el siguiente código:

<embed src="http://www.fileden.com/files/2008/5/6/1899366/simondicemc.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="371" width="350"></embed>

Como ven es un simple código igual explicare para que no halla errores, donde dice "http://www...." es donde va la dirección de donde alojaron el archivo swf.
Donde dice "height="la altura en px (pixeles) y "width=" la anchura también px, y listo tendrán una entrada con su archivo flash funcionando

Añadir Sitemap en Blogger

2008-05-26T13:28:00.000-07:00

Un Sitemap es una pequeña porción de datos que se inserta en cualquier dominio o página web y que sirve para que los buscadores indexen mejor los contenidos que generamos. No es imprescindible: tarde o temprano las "arañas" encontrarán cualquier cosa que se encuentre en Internet (a no ser que queramos evitarlo, claro). De todas formas, debido al inconmensurable número de páginas (que crece a ritmo vértiginoso cada día), las "arañas" tienen mucho trabajo, por lo que si creamos nuevos contenidos (y si nuestra web tiene poco "peso" en Internet) puede que estos tarden en estar indexados en los motores de búsqueda (si alguien busca algo sobre lo que acabas de escribir, pues no te va a encontrar).

Añadir un sitemap ayuda a solucionar este problema, ya que este "comunica" a la araña cualquier cambio que se produzca, sin que haga falta que tengamos que esperar a que a la araña le de por encontrarlos. Además también sirve para que se indexen la mayoría de páginas que hayamos creado, cosa que resulta beneficiosa para los que tenemos un "peso" en Internet que roza lo patético (en una página de "poco peso" una araña ignorará por norma la mayoría de páginas).

Para crear un sitemap para Google en un blog de Blogger lo primero de todo es ir al Centro para webmasters de Google, una vez allí debemos ir a la sección Herramientas para Webmasters (incluido Sitemaps). Si no estamos registrados deberemos hacer login con nuestra cuenta de Google (la de Gmail, por ejemplo).

Nos saldrá ahora la opción de añadir un sitio. Introducimos la URL de nuestro blog (http://XXXXXXXX.blogspot.com), y le damos aceptar. Después nos pedirá que "Verifiquemos" que somos los dueños del sitio. Normalmente esto se hace subiendo un archivo al servidor, pero como no tenemos servidor y Blogger no deja subir archivos... lo haremos de otra forma.

Hacemos click en Verificar Sitio y, en Verificar opciones elegimos Añadir etiqueta META. Copiamos el código que nos de, nos vamos a la plantilla de nuestro blog y la pegamos donde se nos ha indicado (justo después del tag HEAD, que suele estar por el principio y antes del BODY). Una vez hecho el cambio hacemos click en Verificar. Google puede tardar algún tiempo en verificar, pero paciencia, que todo llega.

Una vez qu Google haya verificado la página nos pedirá la dirección del archivo Sitemap de nuestro sitio, como no tenemos, le timaremos diciendo que la dirección es la de nuestro Feed de Atom.

En Blogger la dirección de este feed es:

http://XXXXXXXXXXXX.blogspot.com/atom.xml (sustituir las X por tu nombre del blog)
y también puedes agregar esta otra
http://XXXXXXXXXXXX.blogspot.com/rss.xlm

Y ya está, en cuestión de poco tiempo (tarda un poco) tendremos un sitemap funcionando en nuestro blog. Los contenidos se indexarán más, mejor y más rápido... y ni siquiera nos daremos cuenta.

espero que te sirva hernan suerte!!!

Darse de alta en buscadores

2008-05-26T12:40:00.000-07:00

Hoy en día todo el mundo o la gran mayoría usa buscadores para encontrar lo que desea y para el que tiene un Blogger le sirve para atraer mas personas a sus paginas, para darse de alta en los buscadores de Google, Yahoo search y Live search lo que hay que hacer es ir a a sus debidas paginas y registrarse.

Para Google ir al siguiente link: click aquí
Agregas tus datos y listo eso si ten en cuanta que Google te garantiza que: no agregamos a nuestro índice todas las URLs que recibimos y no podemos hacer ninguna predicción ni darle ninguna garantía acerca de cuándo o si efectivamente aparecerá.

Para Yahoo search ir al siguiente link: click aquí
Le damos click en: Sugiere tu sitio gratis,
llenamos los datos y listo y al igual que en Google no te da ninguna garantía de que aparecerá tu dirección.

Para livesearch le damos al siguiente link: click aqui
completas los datos y listo.

Si notas que al tiempo (mas o menos una semana) no apareces en alguno de los buscadores registrate nuevamente y espero que tengas suerte.

Poner video de YouTube

2008-05-23T12:25:00.000-07:00

Para poner un vídeo de YouTube es muy simple entramos a la pagina y buscamos el vídeo que queremos poner en nuestro blog, una ves elegido vemos que al visualizarlo a la derecha tenemos información como de quien lo hizo, hace cuanto, etc. y en una parte dice "insertar" o "embed" y abajo hay un código como este y ese código lo copiamos.

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/YfIgeXXHvlc&hl=es"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/YfIgeXXHvlc&hl=es" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

Ahora bien entramos en blogger vamos a "Creación de entradas" y en la pestaña de "Edición de HTML pegamos el código y listo el vídeo en nuestro blog

Este es un ejemplo de como quedaria un video:

Link de descarga

2008-05-23T11:30:00.001-07:00

Bien con lo que me refiero a link de descarga es un enlace para que uno o varios usuarios al clickearlo puedan descargarlo, primero lo que tienes que hacer es subir un archivo a un servidor pero el archivo debe de estar en formato zip para que realize la descarga de lo contrario solo lo abrirá

luego de haber subido el archivo vamos al post donde ira el enlace, en la entrada vamos a la pestaña "Edición de HTML" y ponemos el siguiente código

<a href="archivo.zip">Haz clic acá para bajar el archivo ! </a>

Donde dice "archivo zip" ahí va la URL del archivo, también si quieres puedes cambiar el texto "Haz clic acá para bajar el archivo" por el que quieras ej: descargar, bajar archivo, download, etc.

espero que sirva;)

Tu Favicon

2008-05-23T09:33:00.000-07:00

Bueno, he aquí un nuevo truco para blogger, como añadir tu favicon (favorite icon) a tu blog Vamos a lo primero:

¿Que es Favicon?

Si no sabes que es un Favicon fíjate en Wikipedia

Ahora bien lo primero q tenemos q hacer es crear la imagen que vamos a subir, una ves echo vamos a ir Favicon from pics

Una ves en la pagina vamos a examinar o browse y le indicamos donde esta nuestra imagen y la subimos, también se puede poner texto animado donde dice "Scrolling Text" y también se puede animar la imagen "Animate Favicon".
Le damos en el botón "Generate Favicon.ico" y nos dará dos vista la imagen estática y la animada también se puede probar le das click en "Test in browser" y te muestra como quedaría, bien ahora le damos en "Download Favicon" y lo guardamos.

Nos dará varias imagenes en ico. png. gif., en nuestro caso elegimos la gif que es la animada. Ahora subimos la imagen gif a un servidor web ej: fileden

Ahora vamos a Blogger en la pestaña diseño vamos a "Edición de HTML" en la plantilla busca la siguiente linea:

<title><data:blog.pagetitle/></title>

Y debajo de ella pegas este otro código:

<b:include data='blog' name='all-head-content'/>
<link href='URL de la imagen' rel='shortcut icon' type='image/x-icon'/> <link href='URL de la imagen' rel='icon' type='image/x-icon'/>

Donde dice URL de la imagen ponen la URl que les dio el servidor de donde alojaron la imagen, ahora prueban la planilla antes de guardar y se tendría que ver la imagen.
(puede que en la vista previa la imagen no se mueva pero al guardarlo si y obviamente se necesita FireFox para su mejor visualizacion ya que en explorer puede que no aparezca) ;)

Poner traductor de GOOGLE

2008-05-22T14:41:00.000-07:00

Google ha actualizado su traductor y ahora permite todo tipo de traducciones, puede traducir tanto texto , como también una pagina web. También cuenta con un diccionario.

Ahora si queremos tener el traductor en nuestra web para facilitar a los usuarios vamos al siguiente link
una ves ahí elegimos el idioma de nuestra web y nos dará un pequeño código lo copiamos, entramos en blogger en la pestaña diseño añadir un elemento de pagina y le damos clik a HTML/Javascript guardamos y todo listo ;)

si te fijaste bien en la web de Google tenes mas opciones para elegir

Entradas ampliables

2008-05-21T13:00:00.000-07:00

Bueno esto es algo que yo queria tener y que a mas de uno le gustaria tenerlo para que el blog no quede tan largo y sea aburrido, consiste en poner un boton "Leer Mas..." que al hacerle un click aparece el post completo en la misma página principal.

1º Es recomendable que guarden una copia de su planilla por las dudas de hacer algo mal.

2º : Buscas el siguiente codigo:

<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/> 

</div>

(puede ser q no este del todo igual, por pequeñas cosas)

3º Luego tendrás que pegar un codigo despues de la siguiente linea: <div class='post-body'>

pegas esto:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

4º Una vez que pegaste el código, pegas otro codigo despues de la siguiente linea:
(<p><data:post.body/></p>)

<a expr:href='data:post.url'>Leer Mas...</a>
</b:if>

Ahora dale click en "vista previa" si no te salta ningun error guarda los cambios de la plantilla.

5º Para finalizar con esto necesitas un código más,que no va en el template:
- Ir a Configuracion. Luego a Formato y en Plantilla de entrada lo pegas.
- Cuando vas a postear algo, en "Edicion de HTML te saldrá este código, sin necesidad de estar escribiéndolo en cada entrada. No olvidar guardar los cambios en formato. El código es el siguiente:

aqui va lo resumido del post

<span class="fullpost">

aqui lo que estaria escondido

</span>

Espero que funcione :)
y por si queremos modificar mas osea agegandole un complemento, una imagen en ves del texto "Leer Mas" lo que tiene q hacer es: crear la imagen que vas a utilizar y la subes a un servidor y copias la URL, vas a la plantilla buscas esta linea:
<a href='data:post.url'>Leer Mas...</a>

y la remplazas de la siguiente forma
<img src="la-ruta-de-la-imagen" />

Como crear un Blogger

2008-05-20T09:54:00.001-07:00

Hoy en día los blogs están en alza, muchas personas quieren tener su espacio en Internet para publicar sus opiniones, sus experiencias, etc, y la forma más sencilla y fácil es con un Blog, o también llamado Weblog.

Este tutorial va a mostrar cómo crear un Blogger, la herramienta gratuita de Google para crear blogs, no necesita nada mas que tener una cuenta en Google.

Además, podemos tener muchas opciones para personalizarlo a nuestro gusto, que otros usuarios comenten nuestros posts, poner imágenes, templates, vídeos, etc.

1º Crear una cuenta en blogger

Lo primero que vamos a hacer es ir a www.blogger.com y pincharemos sobre el botón que pone crear tu blog ahora:

después de hacer click nos en "crear tu blog ahora" nos habré una nueva ventana

En elegir un nombre de usuario, vamos a poner un nombre de usuario para identificarnos en Blogger , esto no tiene nada que ver con el futuro Blog que vamos a crear

En nombre mostrado, pondremos nuestro nick o nombre que se vea cuando publiquemos un post por ejemplo

Una vez rellenados los datos, pulsaremos sobre Continuar:

En titulo del blog, pondremos el título de nuestro blog

En dirección del blog, (URL) pondremos su dirección en Internet , que en nuestro caso es así http://todoblgspot.blogspot.com

En conflagración avanzadas, son opcionales, por si queremos instalar blogger en un sitio nuestro , pero en este tutorial vamos a explicar cómo crearlo en blogger, ya que es lo más sencillo

Una vez rellenado, presionaremos sobre Continuar:

Aquí elegimos la apariencia de nuestro Blog , como ves, hay muchos estilos para escoger, y podemos ver como quedaría en nuestro blog.

Presionamos sobre el que queramos escoger, y le daremos a Continuar.

y si todo ha salido bien nos pondrá un cartel de confirmación y ya podremos empezar a postear en nuestro blog