Trucos Blogger

Agregar un icono de feed en las etiquetas de blogger

2007-12-28T17:00:00.001-08:00

Este "hack" para las etiquetas de blogger consiste en agregar un icono de feed a C/U de las etiquetas del blog , como veran en la imagen:

Para agregar este icono, lo primer es asegurarse de ya tener en el blog un widget de etiquetas (labels), sino es así, agregarlo desde el panel de elementos de página de Blogger. Hecho esto, ya se puede modificar el código del widget:

Entra a la pestaña “Plantilla”, después a la opción “Edición HTML” y activa el botón “Expandir plantillas de artilugios” (importante).
Ahí busca el siguiente código:

<span dir='ltr'>(<data:label.count/>)</span>

Justo después pegamos el siguiente código correspondiente al icono y al enlace:

<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><center><img src='http://img180.imageshack.us/img180/1855/synicotc5.png'/></center></a>

ROJO

http://img412.imageshack.us/img412/3824/xmlol8.gif

http://img412.imageshack.us/img412/1610/rssen4.png

http://img444.imageshack.us/img444/7574/rsskw6.png

En este código es posible cambiar la dirección en la etiqueta “img” para establecer el icono de nuestra preferencia.

Guarda los cambios y todo listo.

Un detalle más, para facilitarle el acceso a la información de tu blog a los lectores.

Mi primer post - Como insertar un cursor en tu blog

2007-12-27T11:18:00.001-08:00

Bueno , luego de la caida del blog traigo mi nueva era de trucos blogger (La Era LacraX) , tuve que dejar un poco de lado mi otro blog (La Web - Trucos Blogger) por este y para este blog. Para insertar un cursor de tal modo que se logre usarlo con todos los atributos debe usarse la siguiente fase CSS con un archivo .cur como referencia subido a un host como puede ser Googlepages.com y luego de eso debe ser usada esta tag debajo de la tag <head>:

<style>
<!--
body{
cursor:url("http://www.tuweb.com/tucursor.cur");
}
-->
</style>



Importante!:
Solo funciona con IExplorer6

Eso es todo y espero que lo disfruten.



Como poner Videos en tu Blog
2007-08-26T01:43:00.001-07:00
Bueno esto es una pequeña guía para los que no saben mucho de Blogging, debido a que no solo nos enfocamos en los bloggers avanzados, sino que también a los que están comenzando apenas.
Así que para agregar un vídeo en una entrada, tenemos que elegir un vídeo que nos guste, en este caso pondré como ejemplo el siguiente vídeo:
http://youtube.com/watch?v=EgATlhZFAfs
Como podrán ver en ese enlace, alado del Vídeo hay un cuadro el cual contiene el nombre del vídeo, la fecha, descripción y categoría.
Abajo hay 2 cuadros de texto, uno dice "URL" y el otro que dice "Embed". El primero es la dirección del vídeo y el segundo es el código el cual tenemos que copiar para ponerlo dentro de nuestra entrada.
En esta caso el código es:


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

Este código lo tendremos que poner dentro de la pestaña de "Edición de HTML" cuando creamos una entrada.
Una vez que agreguemos el código podemos seguir escribiendo ( aunque el vídeo no aparezca en el momento ), si quieren visualizarlo antes de publicar la entrada simplemente pueden hacer click en "Vista Previa".



  
  Technorati : blogger, trucosblogger 



Consigue comentarios en Blogger
2007-08-20T00:37:00.001-07:00
Bueno antes que nada, pido una disculpa debido a mi ausencia ( la cual se vera un poco prolongada debido al huracán el cual se aproxima a mi ciudad ).
En esta ocasión les explicaré un método el cual les permitirá editar esa etiqueta que dice "X Comentarios", por lo general ubicada al final del contenido de la entrada haciéndola más llamativa para sus visitantes.
Cuando no hay comentarios en la entrada se mostrará el texto:
"Agrega tu Comentario"
Cuando hay 1 o más comentarios se mostrará:
"XX comentarios, agrega el tuyo!"

Ahora para comenzar es necesario que se dirijan a Plantilla > Edición HTML en su Panel, posteriormente seleccionaran la casilla "Expandir plantillas de artilugios", ahora tendremos que buscar sl siguiente código:

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


El cual remplazaremos por el 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>

Luego simplemente guardamos los cambios y listo!




Quitarle el Subrayado a los Links
2007-08-12T22:34:00.000-07:00
Lamentablemente sin previo aviso me fui de vacaciones ( y próximamente tengo otro viaje ), por lo que tengo que dejar el blog un poco descuidado por ahora, sin embargo sigo leyendo lo que me mandan nuestros visitantes.
Por lo que ahora responderé a la duda, sobre remover el subrayado de los enlaces y profundizaré un poco mas dando estilo a los enlaces.
Ahora para comenzar, es necesario que se vaya a Edición HTML en la Plantilla Blogger, antes de editar/buscar algo, explicare brevemente la función de las etiquetas que vamos a utilizar:


  a:link { } /* Estilo del Enlace */
  a:hover { } /* Estilo del Enlace cuando pasamos el Mouse sobre el */
  a:visited { } /* Estilo del Enlace cuando ya fue visitado */



Estas etiquetas son las que van dentro del fragmento de CSS, sin embargo así no hacen absolutamente nada, por lo que tenemos que definir estilos, esto se hace agregando una o más de los siguientes parámetros CSS.

 color:#RRGGBB; /* Color en Código Hex */
 text-decoration:valor;
        /* Los Valores posibles para este parametro son:
                        none - no tiene ningún estilo.
                        underline - el texto aparecera subrayado.
                        line-trough - el texto aparecera tachado
                        overline - el texto aparecera con una raya en la parte superior.
                */
 font-family:valor; /* El Valor es definido por el nombre de la letra, ejemplo "verdana","tahoma", etc. */
 font-size:##px; /* El valor numérico representa el tamaño de la letra */
 font-weight:valor; /* Dos valores, "bold" para Negritas y "Normal" */

a:link {
         color:#000000;
         text-decoration:none;
         font-family:verdana; 
         font-size:10px;
         font-weight:bold;
 }
a:hover {
         color:#CD4B4B;
         text-decoration:underline;
 }


El Generador de colores Hex lo pueden encontrar aquí. Pueden experimentar, moviendo valores y definiendo colores, de esta forma podran generar el estilo que ustedes deseen.

  
  Technorati : CSS, Trucos Blogger 



Eliminar Titulo de Texto en Blogger Manual
2007-07-29T07:51:00.001-07:00
Un visitante del Blog tiene problemas con una Plantilla la cual no le permite de alguna forma quitar el Titulo ( de Texto ) para que solo salga la Imagen y nos pregunta como removerlo para que solo se vea la imagen que el desea.
Normalmente esto se puede hacer desde una opción de Elementos en Blogger, no obstante hay veces que algunas plantillas no están bien hechas los "Elementos" no son reconocidos por el Editor integrado Blogger, así que ahora lo eliminaremos manualmente.
Para comenzar, tenemos que tener en cuenta que es necesario guardar nuestro diseño antes de tocar cualquier parte del código, recuerden que no siempre esta controlado lo que suceda, en especial si no tienen mucha experiencia.

Ahora, veamos lo que necesitamos remover, para comenzar, tenemos que tener en cuenta que el Elemento CSS: Display
Lo que necesitarán ir a Edición HTML que se encuentra en el Panel de Control de su Blog y luego seleccionamos la casilla Expandir Plantillas Artilugios.
Ahora ya estamos listos para trabajar, lo que tenemos que buscar ahora son los parámetros los cuales hacen que muestre el titulo de texto, por lo que tendremos que buscar el siguiente código:
<a expr:href='data:blog.homepageUrl'><data:title/></a>


Dependiendo de si su plantilla es una de las predefinidas Blogger o si es una Plantilla personalizada, podrán encontrar el siguiente código en la parte superior de lo que ya encontraron ( marcado en Rojo ) :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
              <data:title/>
            <b:else/>
              <a expr:href='data:blog.homepageUrl'><data:title/></a>

Ahora lo que tenemos que hace, es agregar las lineas que se encuentran en negrillas al código:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
              <div style='display:none;'><data:title/></div>
            <b:else/>
              <div style='display:none;'><a expr:href='data:blog.homepageUrl'><data:title/></a></div>


Repitan la búsqueda sí encuentran más simplemente repitan el proceso, si no tienen idea de el porqué de el Parámetro CSS "display:none" revisen esta entrada: CSS Propiedad Display


  
  Technorati : Blogger, Trucos Blogger, Tutorial Blogger 



[CSS] Propiedad Display
2007-07-29T07:31:00.000-07:00
Esta propiedad nos será muy útil cuando no podamos hacer el código de nuestro diseño o crear uno a partir de 0, o bien cuando queramos ocular algo, esta Propiedad la tienen que tener siempre en cuenta.
Definición:
 La Propiedad display define cómo/o si se mostrara un elemento.
Heredado: No
Valores:



Valor
Descripción


none
El elemento no se mostrara ( sin embargo el Explorador lo cargara )


block
Se mostrara como un elemento de Bloque, es decir tendrá un salto de linea antes y después del elemento.


inline
Default. Sera mostrado como un elemento de linea, no tendrá salto de linea ni antes ni después.


list-item
El elemento se mostrará como un elemento de Lista.


run-in
El Elemento sera mostrado como Nivel-Bloque o como Inline, dependiendo del contexto.


compact
El Elemento sera mostrado como Nivel-Bloque o como Inline, dependiendo del contexto.


marker



table
El elemento sera mostrado como una Table de Bloque ( como <table> ) con salto antes y después del elemento.


inline-table
El Elemento sera mostrado como una Tabla de Linea ( como <table> ) sin salto antes o después del elemento.


table-row-group
El elemento sera mostrado como un grupo de una o más filas (como <tbody>)


table-header-group
El elemento sera mostrado como un grupo de una o más filas (como <thead>)


table-footer-group
El elemento sera mostrado como un grupo de una o más filas (como <tfoot>)


table-row
El elemento se mostrara como una fila de tabla (como <tr>)


table-column-group
El elemento sera mostrado como un grupo de una o más columnas. (como <colgroup>)


table-column
El elemento sera mostrado como una columna de celdas (como <col>)


table-cell
El elemento sera mostrado como una tabla de celda(como <td> y <th>)




  
  Technorati : CSS Display, Display:none;, display 



Como poner codigo dentro de Posts
2007-07-26T14:46:00.001-07:00
Bueno, últimamente varias personas me han estado preguntando como poner código dentro de un Post junto con el Truco de darle Estilo a los Códigos, ahora la duda del usuario es la Siguiente:
Nombre: Tuxcito
E-Mail: tuxcito@gmail.com
Tema: No me resulta
Mensaje:
Hola de nuevo: Gracias por el dato de como crear un form de contacto, pero ahora tengo otro problema. Resulta que intente aplicar el truco de colocar código en mi blog ... coloque el código que me diste en Plantilla/Edición HTML de mi blog y luego cuando intente poner un código en un post, sin embargo no me aparecía el código sino que aparecía el elemento.
Ahora, lo que tenemos que tener en claro es que, normalmente el Blogger cuando introducen cualquier texto, que tenga naturaleza HTML o de programación web, este lo tomara como si fueran instrucciones para que muestre el elemento y no para que muestre solamente el código.
Por lo que tendremos que convertir nuestro HTML/Texto al formato Escape para esto usaremos el converter de este sitio.
Ponemos el texto en el cuadro superior y le damos click a "Parse", ahora simplemente copiamos el código resultante y lo ponemos en nuestro Blog.


  
  Technorati : Escape HTML, HTML, Trucosblogger 



Formulario de Contacto para Blogger
2007-07-26T01:37:00.000-07:00
Bueno, aquí de nuevo gracias a un par de usuarios que me preguntan respecto a lo que es el Formulario de Contacto y como obtener uno para ponerlo en su sitio Web.
Aquí brevemente les explicaré lo que tienen que hacer para crear una cuenta y configurar su propio Formulario, lo que les recomiendo antes que nada es que tengan en cuenta que el sitio esta en ingles y que es recomendable que si no saben mucho ingles chequen sitios como WordReference.com.

Bueno ahora para empezar es necesario que te crees una cuenta en el sitio: EmailMeForm , pueden ubicar como registrarse haciendo click en Sign Up for Free!
Ahora, tendrán que finalizar el registro revisando su correo electrónico y haciendo click en el segundo Link. Posteriormente es momento de conectarse con esa cuenta.
Ahora llegaras a lo que es un Panel de Control como pueden ver en la foto lo que a nosotros nos interesa es lo que hay en el Menú izquierdo, para ser específicos "Create New Form".
Ahora simplemente tenemos que llenar el siguiente formulario siempre teniendo en cuenta que esta información es vital, recuerda poner tu correo electrónico de otra forma no funcionara, ahora hacer click en Next
Ahora lo que tenemos que hacer es seleccionar el nombre de los campos y el tipo, si no entiende mucho de lo que dice ahí revise la imagen que se encuentra a continuación o bien cheque diccionarios Ingles>Español como WordReference hacer click en Next.
Ahora tienen que definir el Ancho ( cols ) y el Alto ( Rows ) de los elementos de su formulario, definanlo y hagan click en Next.
Ahora llenen todo lo que se pide, pueden hace referencia en el último cuadro que se muestra en la imagen de la derecha, después hacer click en Next. Ignoren el contenido del siguiente paso y hacer click en Next también, ahora verán su formulario, hagan click en Finish.
Ahora verán un cuadro donde verán un código, este no supera los dos lineas y no es el que necesitamos si lo queremos integrar al diseño de nuestro Blog, por lo que tendremos que hacer click en el Enlace que se encuentra justo arriba que dice: Get the HTML Code
Ahora deben de obtener un código similar a este:

<form method="post" action="http://www.emailmeform.com/fid.php?formid=9049">
<INPUT TYPE=hidden NAME=FCode VALUE="g5b4rgty">
                  

<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr>
<td>
<font face="Verdana" size="2" color="#000000">Descripción de mi Forma, saldra en la parte superior</font>
 <div style="" id="mainmsg"> </div>

</td>
</tr>
</table>

<br>

<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">Primer Campo: Ej: TU NOMBRE</font></td>
 <td>
<input type="text" name="FieldData0" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">... ej. tu email</font></td>
 <td>
<input type="text" name="FieldData1" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">... ej. tu web</font></td>
 <td>
<input type="text" name="FieldData2" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">tu mensajito de la muerte</font></td>
 <td>
<textarea name="FieldData3" cols="60" rows="10"></textarea><br> </td>
</tr>      

<tr>
 <td colspan="2">
<table cellpadding=5 cellspacing=0 bgcolor="#E4F8E4" width="100%">
<tr bgcolor="#AAD6AA">
<td colspan="2"><font color="#FFFFFF" face="Verdana" size="2"><b>Image Verification</b></font></td>
</tr>
<tr>
<td style="padding: 2px;" width="10"><img src="http://www.emailmeform.com/turing.php" id="captcha"></td>
<td valign="top"><font color="#000000">Please enter the text from the image</font>   <br><input type="text" name="Turing" value="" maxlength="100" size="10">
 [ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://www.emailmeform.com/?v=turing&pt=popup" onClick="window.open('http://www.emailmeform.com/?v=turing&pt=popup','_blank','width=400, height=300, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]
</td>
</tr>
</table>
</td>
</tr>
<tr>
 <td> </td>
 <td align="right">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Titulo del Boton/Enviar" name="Submit">    <input type="reset" class="btn" value="  Borrar  " name="Clear"></td>
</tr>
<tr>
<td colspan=2 align="center">
<br>
<font face="Verdana" size="2" color="#000000"> <a href="http://www.emailmeform.com">contact form</a></td>
</tr>
</table>                      

</form>

Ahora lo que tendrán que hacer antes de poner el código en el Post, es Desactivar la Opción de Blogger "Convertir salto de Linea", lo pueden ubicar en la Pestaña Formato en el Panel de su Blog.
Ahora, simplemente tienen que poner el código en un Post ( en HTML ), simplemente posteenlo, copien el Link que obtengan y ponganlo en su barra lateral o donde ustedes deseen para que sus usuarios los puedan contactar.
Cabe mencionar que puede que algunos formularios no se muestren completos en algún diseño ( por falta de espacio ), por lo que tendrán que disminuir el ancho de los campos del formulario y otras opciones.



  
  Technorati : Blogger, Blogger Trucos, Formulario para Blogger, Trucos Blogger 



Menu Horizontal Barra de Navegacion
2007-07-25T02:53:00.001-07:00
Aquí de nuevo gracias una petición de uno de nuestros usuarios por medio del Formulario de Contacto, el cual tenía una duda respecto al Menú de Navegación Horizontal el cual pueden ver en la parte superior de nuestro sitio.
Ahora, les enseñare como crear uno, incluso les daré la barra en cinco colores para que ustedes puedan usarla en cualquier diseño.
Este código funciona en cualquier plataforma que funcione con HTML y CSS sin embargo ahora les mostrare donde tienen que colocar este código en Blogger, antes que nada.
Código Base:
Este código es lo que necesitaran poner en cualquier parte del blog que ustedes deseen, ahora les enseñare como ponerlo en la parte de abajo del titulo de Blogger, si lo quieren usar en otra Plataforma como Wordpress simplemente tomen este código y el CSS que encontrarán más adelante.


<div id='menu'>
<ul>
<li id='current'><a href='http://TuBlogEnlace0'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace1'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace2'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace3'><span>Titulo</span></a></li>

</ul>
</div>


Simplemente Cambia el texto en Negritas por los Enlaces a tu Blog y los Titulos que quieres que tengan las pestañas.
Ahora, si estamos usando Blogger tendremos que ir a Plantilla > Edición HTML y seleccionar la casilla Expandir plantillas de artilugios , ahora buscaremos el siguiente Texto, y antes de eso pegaremos el Código Base.

<div id='content-wrapper'>


Ahora, simplemente tenemos que seleccionar el Código CSS, si no usan Blogger simplemente tienen que implementarlo como cualquier otro elemento CSS, ahora si están usando Blogger tendrán que buscar:

]]></b:skin>


Ahora, simplemente tienen que elegir un color que les guste y poner el código antes del código antes dicho:


/* Dorado  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/971/hgoldljp3.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img505.imageshack.us/img505/7849/hgoldrzx4.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/*Rojo ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img508.imageshack.us/img508/8383/redlhh5.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/1230/redrme9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/* Verde ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5924/verdelzc1.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img257.imageshack.us/img257/4822/verdercx2.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#b7c600; float:none;}
#menu a:hover span {color:#687100;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#687100}
.clear {clear:left}
/* Fin de Barra */


/*Azul  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/5375/bluelco2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img442.imageshack.us/img442/4413/bluermk9.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */


/* Rosa  ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://img257.imageshack.us/img257/9909/rosalvt2.gif) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img523.imageshack.us/img523/7982/rosarjk6.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#EFEBFA; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */




Technorati : Blogger, Navegación, Trucos Blogger, Tutorial Blogger



Cambiar el Texto Publicar Comentario
2007-07-23T14:57:00.001-07:00
De nuevo a petición por medio del Formulario de Contacto nos llega una duda de un usuario:
Nombre: Roberto Caamaño
Tema: Solamente una duda
Mensaje: Me encantaría saber como se hace para cambiar este texto en los comentarios
"Publicar un comentario en la entrada"
Esto es algo relativamente sencillo, simplemente tienes que ir a Edición HTML y seleccionar la casilla Expandir plantillas de artilugios, posteriormente deberemos buscar el siguiente fragmento de código.


<data:postCommentMsg/>


Ese Fragmento de código lo substituiremos por el Texto que deseamos que aparezca, así de simple.

  
  Technorati : Blogger, Cambiar Texto Publicar Comentario, Comentario, Publicar Comentario 



Suscripcion por Mail para el Blog
2007-07-23T10:42:00.000-07:00
Un visitante de nuestro blog, por medio de la forma de contacto nos pregunta lo siguiente:

Nombre: Ezequiel
Tema: Sobre Suscripción de mail
Mensaje:
Como se debe hacer en blogger para tener el famoso "Recibe Actualizaciones" (Suscribir tu mail)???.
Saludos
Muy bueno el blog!!

Para hacer esto, es necesario que obtengas una cuenta gratuita de FeedBurner, para hacer esto, simplemente haz click aquí.
Ahora tendremos que crear una cuenta, si no entiendes Ingles puedes cambiar el idioma de la interfaz haciendo click aquí y seleccionando "Español" de la lista de Idiomas, ahora simplemente da click en registrar en el menú superior, una vez finalizado el proceso sera necesario que configures tu primer feed, para hacer esto debemos loguear en la cuenta.
Ahora tendremos que indicarle a FeedBurner cual es nuestro Feed, en Blogger el Feed esta formado de la siguiente forma:
http://tublog.blogspot.com/feeds/posts/default
Simplemente pon el nombre de tu Blog y ponlo en el cuadro que esta resaltado en Rojo:
Después, simplemente sigue los pasos que están indicados, procurando leer todo lo que digan las instrucciones, como recomendación, les sugiero que activen todos los servicios que no sean para podcasters, ya que aunque diga que es de paga NO lo es!
Ahora tenemos que decidir el nombre del Feed y su Dirección URL ( con la cual accesarán a tu Feed ), ahora, como siempre yo les recomiendo que no vayan a poner algo como "El Blog de Lupe" o "Blog de Luis", lo recomendable es poner una Dirección URL la cual describa mejor el contenido de tu Blog.
Como siempre simplemente decidan una dirección la cual pueda ser buena para recibir visitas de los buscadores de Google.
Ahora simplemente sigue los pasos y instrucciones que te dan para completar el proceso de registro de tu Feed, después cuando estés en la parte principal de tu feed, ve a la pestaña "Publicize" y después en el menú izquierdo clickea el cuadro de "Suscripciones por Mail".
Después sin mover nada dele click al botón "Activar", posteriormente saldrá lo siguiente, simplemente tienen que seleccionar el idioma en el cual quieren que aparezca la forma de suscripción por Mail, haciendo click donde por dafault dice "English" y cambiarlo por "Spanish", luego simplemente sigue las instrucciones que te dan en el sitio, se entienden bastante bien no creo que tengan problema alguno.
Las actualizaciones serán enviadas automáticamente a aquel que se suscriba, recuerden igual revisar las otras utilidades que FeedBurner les provee, se los recomiendo.


  
  Technorati : FeedBurner, Suscripción por Mail, Suscription, Tutorial FeedBurner 



¿Que es un Feed RSS?
2007-07-23T05:38:00.001-07:00
¿Qué es un Feed?
Su significado en Ingles es "Alimentar", ahora, no usemos tecnicismos y simplemente les diré que esta es una utilidad la cual tienen que sacarle provecho, simplemente por el hecho de que les permite a sus usuarios saber cuando han actualizado el Blog/Web, por lo general por medio de "Agregadores".
El Feed le permitirá a usted ofrecer una amplia variedad de opciones para que sus usuarios estén enterados de las últimas noticias de su blog, lo que le permite aumentar el numero de lectores y visitas únicas.

Pueden Identificar si un sitio posee un Feed por medio de este icono universal:

¿Para que me sirve si soy un Blogger?
Para un Blogger, el Feed es la mejor herramienta existente en especial para los que escriben noticias o temas de la actualidad. Con el solo hecho de navegar y encontrar Blogs con buen contenido y suscribirse, usted podrá estar al tanto de lo último.
¿Qué Agregadores de Noticias existen?
Hay una gran variedad de agregadores, algunos de paga, otros gratuitos, sin embargo yo les recomiendo el GoogleReader, el Reader de Google que en lo personal es muy efectivo debido a su forma simple que se puede integrar al navegar, muy recomendado.

  
  Technorati : Feed, Feeds, GoogleReader, Reader, TrucosBlogger 



Cuadro de Codigo para tu Blog
2007-07-09T22:48:00.001-07:00
Bueno, ahora a petición de un visitante de nuestro Blog ( que nos contacto por medio de la Forma de Contacto ):
Nombre : esteban
E-Mail : oculto
Tema : caja de texto
Mensaje : una consulta para poner en mi blog unos codigos en una caja te texto asi como tienen ustedes que arriba dice codigo como tendria que hacer?

saludos..

Lles enseñare como crear un "cuadro" en el cual pueden meter código, aunque igual puede funcionar con hasta con las etiquetas <quote></quote> ahora, veamos un ejemplo de lo que podrán obtener si modifican el código de acuerdo a sus necesidades.


Esto es lo que ustedes verán una vez que introduzcan las etiquetas <pre><code></code></pre>

Ahora, el código que se necesita para ese efecto es el siguiente:
Para agregar este código a Blogger, simplemente ve a Edición HTML y agrega el código antes de ]]></b:skin>
pre {
        background:transparent url(http://img509.imageshack.us/img509/3046/codema7.png) no-repeat 0 0; /* Imagen Superior, si desas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
        padding-top:24px; /* Relleno - para ajustar Fondo */
}
pre code { 
        overflow:auto; /* Determina si es necesario agregar barras de Scroll */
        background-color:#fffbe5; /* Color de Fondo en Hex */
        border:1px solid #fff1a3; /* Color de Borde en Hex */
   color:#7e1f09; /* Color de letra en Hex */
      display:block; /* No tocar */
   padding:5px; /* Relleno del cuadro */
        white-space:pre; /* No tocar */
        text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
        min-height:63px; /* Altura minima del Cuadro */
}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
        background-color:#FEFEDD; /* Color de Fondo en Hex */
   border:1px solid #ffd511;/* Color de Borde en Hex */le
}

Ahora, si desean modificar la apariencia, simplemente tienen que cambiar algunos Colores HEX, pueden encontrar una paleta aquí. Si quieren cambiar la Imagen que dice "Código" pueden hacerlo cambiando la dirección de la Imagen, se encuentra dentro de url( ) .


Solo necesitan poner el siguiente código para que funcione: <pre><code></code></pre>




  
  Technorati : CSS, Code, Cuadro de Código para tu Blog, Pre 



Obten visitas via Google Blog Search
2007-07-05T18:03:00.001-07:00
Si ustedes buscan conseguir visitas y ya revisaron el Post anterior sobre Obtener Visitas vía Google entonces deben saber que Google es una gran fuente de visitas para muchos sitios, en especial para los que no tienen afiliados de ningún tiempo o tienen patrocinadores.
Así que ahora registraremos nuestro Blog en Google Blog Search, un servicio el cual es muy similar a Google, solo que busca noticias en Blogs más que resultados webs, así que podemos decir que es el Google de los Blogs.
Ahora veamos lo que tenemos que hacer para poder conseguir que nuestra web sea indexada por este excelente servicio:


Abre la siguiente Dirección: http://blogsearch.google.com/ping
En el cuadro de texto debemos agregar la dirección de su atom ( de preferencia ):

Si poseen un Blog de Blogger, su dirección debe lucir así:
http://tublog.blogspot.com/atom.xml

Ya con esto ustedes están enviando su blog a Google Blog Search.

 
 Technorati : Blog News, Blogger, Blogsearch, Obten visitas en tu Blog, Visitas



Blogger como Email Alias
2007-07-03T19:43:00.001-07:00
En una de esas, revisando el sistema actual de "Exiliados del Olimpo", el cual es Blogger, se me ocurrió revisar si había formas de explotar algunos recursos que Google ofrece a sus usuarios, fue entonces cuando descubrí el hecho de que .. mi problema principal era el mantener mi correo electrónico principal sin SPAM de ningún tipo.


Es por eso que se me ocurrió revisar las funciones que Google ofrece y encontré una que.. si se usa bien puede ser una herramienta muy poderosa: Blogger Post Email Direction
El Blogger Post Email Direction, básicamente es una dirección de correo electrónico de sintaxis +usuario+.+algoquetuelijas+(@)+blogger.com,el color rojo representa un valor el cual tu puedes poner ( conformado por letras y números ).
Se preguntaran: ¿Cómo puedes usar eso como beneficio?
Esta es una respuesta sencilla, simplemente piensen en la posibilidad de tener una cantidad INFINITA de correos electrónicos en la palma de tu mano y elegir que direcciones funcionan ( reciben mensajes ) y cuales no.
Ahora ... les dejo el Tutorial ( hecho por mi por supuesto ):
Tutorial Blogger Email

Crea una cuenta Blogger accesando a: http://www.blogger.com/

Crea un Blog con un nombre personalizado, en http://www.blogger.com/home asignándole un nombre personalizado con su respectiva contraseña y selecciona una plantilla:

Una vez creado, proseguir a "Empezar a Publicar" y seleccionar la pestaña "Opciones" y posteriormente correo Electrónico, donde rellenaras el cuadro de texto con algo de tu elección y seleccionaras la casilla "Publicar" como se ilustra en la imagen:

Ahora ve a "Opciones" > "Permisos" y selecciona la casilla "únicamente autores del Blog" como se ilustra en la Imagen:

Enviese un correo de prueba a la dirección que pusiste en el Paso 3 y verifica tu blog ( al cual solo tu puedes acceder ), recuerda que puedes repetir este paso las veces que quieras para tener cantidad infinita de correos Inbox:




Technorati : Alias de Correo Electronico, Blogger Trucos, Email Alias, Email Aliases, Email Gratis, Email Infinito, Trucos Blogger, Trucos Email



Meta Tags : Muy importantes para Buscadores
2007-07-02T20:02:00.001-07:00
Los Meta Tags, son por así decirlo las etiquetas que marcan todos los documentos en nuestra web/blog, esto es algo que los buscadores toman en cuenta junto con los Títulos y Contenido de las Páginas, para que entiendan un poco más su función, les puedo mostrar el ejemplo de Google y Trucos Blogger:
La búsqueda de la palabra: Trucos Blogger en Google.com.MX

Como podrán notar, aparece el Link y abajo aparece el texto descriptivo:
Trucos Blogger: Trucos para los Bloggers, Hacks, Tutoriales y más!
Este texto esta definido por el uso de Meta Tags, así como algunas palabras clave las cuales describen el contenido del blog, aquí tienen el código que usa TrucosBlogger.com



<meta content='Blogger, Trucos Blogger, Blogger Hacks, Blogspot Blogger, Blogger trucos, trucos para blogger, hacks para bloger, temas para blogger, trucos blogger espaÃ±ol' name='keywords'/>
<meta content='Trucos Blogger: Trucos para los Bloggers, Hacks, Tutoriales y mÃ¡s!' name='description'/>



Ahora expliquemos su funcionamiento, el contenido que se encuentra en verde, son las palabras clave las cuales Google debe tomar en cuenta, son palabras o grupos de palabras, separadas por comas.
De color Rojo, tenemos la descripción la cual Google mostrará cuando algún visitante este buscando en Google algo relacionado a tu web/blog.
Ahora, vayamos a como implementarlo en su web/blog, el código va después de <head>, por lo que para hacer esto tiene que ir a edición de plantilla en html y copiarlo después de la etiqueta mencionada, aquí el código, simplemente modificar lo que se indica:



<meta content='Palabras Clave, Palabras Clave' name='keywords'/>
<meta content='Descripción' name='description'/>


Es recomendable que uses esto junto con Indexeado Google



Error en Elementos de Pagina
2007-07-01T22:39:00.001-07:00
Hace poco, un visitante de el Blog me comentó algo que me había sucedido hace tiempo en mi otro Blog, un error el cual no le permite al usuario mover los elementos de página y guardar los cambios.
Aquí les muestro el mensaje Original, que me llegó por medio del formulario de Contacto:


Tema : Me falla "elementos de pagina" en "plantilla"
Mensaje : Les escribo este mensaje porque me falla elementos de página situado en plantilla:
lo que me pasa es que en "elementos de pagina" no puedo guardar los cambios, por ej:
yo quiero arrastrar un elemento a otro lado y cuando guardo me dice "guardando" y no se guarda más.....además abajo de todo de mi pantalla me aparece un signo de admiración (!) y al lado dice "listo pero con errores en la pagina".
que puedo hacer para solucionar esto?
a mi me parece que arruiné el diseño tocando "edición HTML"
¿puede ser eso?.
Saludos.

Bueno, en parte este problema ocurre por dos cosas, por lo general sucede cuando algo en el HTML esta mal formado o esta causando conflicto en el Sistema de "Elementos de Página" que Google tiene integrado. En mi caso ocurrió cuando encontraba jugando con el HTML.
Hay dos formas de solucionar esto:

Cambiar de Plantilla:
Este método es por prueba y error, básicamente lo que tienes que hacer es antes que nada, ir a "Edición HTML" y seleccionar la casilla "Expandir Plantillas de Artilugios", después salva el contenido COMPLETO y cambia la plantilla por una de las pre-establecidas de Blogger, revisa si puedes mover los elementos.
Si no funciona puede ser un problema de tus Widgets ( Elementos de Página ).
Organizar tus Elementos de Página por medio de HTML:
 Este es el método que yo uso, ya que a mi parecer es el más fácil, simplemente es modificar el orden de tus elementos de página por medio de "Edición de HTML":

Como ejemplo:
 Supongamos que tengo 3 elementos de página en el menú:
- Elemento1
- Elemento2
- Elemento3

Quiero pasar el Elemento1 al final, dejándolos en este orden:
- Elemento3
- Elemento1
- Elemento2

Para esto simplemente tienes que ir a "Edición HTML" y buscan este código:
<b:section class='sidebar' id='sidebar' preferred='yes'>


Ahora debes encontrar despues de eso algo como esto:
<b:widget id='XXXX1' locked='false' title='Elemento1' type='XXXX'/>
<b:widget id='XXXX2' locked='false' title='Elemento2' type='XXXX'/>
<b:widget id='XXXX3' locked='false' title='Elemento3' type='XXXX'/>


Debe quedar como:
<b:widget id='XXXX3' locked='false' title='Elemento3' type='XXXX'/>
<b:widget id='XXXX1' locked='false' title='Elemento1' type='XXXX'/>
<b:widget id='XXXX2' locked='false' title='Elemento2' type='XXXX'/>



Como podrán notar, cada una de esas lineas, representa un elemento, así que simplemente tienen mover y salvar.


  
  Technorati : Blogger Elementos de Página, Elementos de Página, Errores Blogger, Soluciones Blogger, Trucos Blogger 



Marquesinas para tu Blog
2007-07-01T20:53:00.000-07:00
El código HTML básico para crear marquesinas es <marquee></marquee> el texto ubicado dentro de esas etiquetas va a moverse hacia la izquierda formando un efecto de marquesina, en este ejemplo pueden ver lo explicado:
Prueba


<marquee>Prueba</marquee>


Como podrán ver en el ejemplo, el texto lentamente se mueve, sin embargo no tiene fondo y no tiene ningún elemento extra. Lo que haremos ahora será definir lo siguiente:

Width="xx"
Ancho de la marquesina, puede ser puesto en Pixeles ( px ) o en Porcentaje ( % )
Height="xx"
Alto de la marquesina, puede ser puesto en Pixeles ( px ) o en Porcentaje ( % )
bgcolor="#rraagg"
 Color de fondo, establecido por un Color HEX
behavior="alternate"
 Introduciendo este parámetro la marquesina reborará dentro del tamaño especificado por width/height.
Color y tamaño de la Letra:
Para esto es necesario agregar el parámetro style="FONT-SIZE: XX; COLOR: #rraagg", donde XX es un valor numerico definido en pixeles / porcentaje y el color es definido por un Color HEX .

Esto nos dará un resultado como este:
Prueba

<marquee style="FONT-SIZE: 30px; COLOR: #ff0000" behavior="alternater" width="100" bgcolor="#000000" height=
"40">Prueba</marquee>


 
 Technorati : Marquesinas, marquee, marquesinas para blogger



Obten visitas Via Google
2007-06-29T12:03:00.001-07:00
Alguna vez se han preguntado: ¿Por qué no obtengo suficientes visitas?
Bueno, la verdad es que supongo que cada buen Blogger en un comienzo piensa al respecto, lo que muchos no saben es que Google puede no estar Indexando sus páginas ya que nadie los linkea ( aún ), para solucionar esto en un comienzo es necesario tomar la iniciativa:
¿Cómo te conocerá Google si tu no te presentas?
 Lo primero que tienes que hacer como cuando estas conociendo a alguien es presentarte, por lo que tienes que conseguir que Google comience a tomarte en cuenta a la hora de Indexar tu Blog.

Para hacer esto, es necesario que le mandes la dirección de tu Blog/Web y los comentarios de tu web mediante este formulario:
Agregue/Quite su URL a Google
Ya que completes el envío de tu Blog/Web por medio de Google, simplemente tienen que indicarle un poco más donde quieren que busque, para esto usaremos una herramienta la cual ya trae Google en sus "Herramientas para Webmasters" estoy hablando de Google Sitemaps.
Primero dirijase a Google Sitemaps, después simplemente agreguen su dirección Web en la cuadro de texto que se encuentra en la parte superior:

Después tienen que verificar su sitio web, para hacer esto simplemente hagan click en "Verifique su sitio Web" que se encuentra en una caja amarilla.


Ahora les darán dos opciones para verificar su sitio, la más sencilla es agregar un código el cual ellos te darán al HTML de tu Blog/Web el blog debe de parecerse a este::

  <meta name="verify-v1" content="emG3MRtV1m2+opzYjBepYzu2b47xO4fomRgfNavKeOI=" />


Ahora ( en Blogger ) nos vamos a edición de Plantilla, en Edición HTML, recuerden que para agregar el código deben cambiar todas las Comillas ", por Comillas simples '.
El código lo deben agregar antes de </head>, y debe lucir así:

  <meta name='verify-v1' content='emG3MRtV1m2+opzYjBepYzu2b47xO4fomRgfNavKeOI=' />


Una vez que el código este en su sitio, simplemente dele al botón "Verificar" y esta listo, ahora Google indexara sus páginas con más velocidad.

 
 Technorati : Google, Google INdexing, Google Sitemaps, Indexando Google



Generador HEX Color
2007-06-29T05:30:00.001-07:00
Esto les servirá a todos ustedes que se encuentren editando colores de códigos HTML, Javascript, CSS y otros. Básicamente es ese código de color el cual esta en formato #RRBBGG, para usar este programa simplemente elijan el color moviendo el cursor y copien el código que se encuentra en HEX.































 
 Technorati : Generador Hex Color, Hex Code Generator



Agrega una Radio a tu Blog
2007-06-28T21:17:00.001-07:00
Recientemente me e encontrado con mucha gente preguntándome respecto a la radio ( por medio de Exolimpo ), la cual esta hecha con Flash y tiene una lista de reproducción ( la cual ustedes definen ). Este Tutorial esta hecho para que ustedes definan que canciones quieren y tengan control total sobre el contenido de su radio.
Requerimientos Mínimos:


Lugar donde subir los archivos:
Es necesario que se tenga un lugar donde subir los archivos que soporte PHP.
También es necesario un servidor ( no necesariamente de pago ) el cual tenga un limite de transferencia decente para que no deje de funcionar ( dependiendo del trafico )
Tener archivos MP3 en tu PC
 Es necesario tener los archivos de música en formato MP3 ( .mp3 ) para posteriormente convertirlos con la utilidad que trae el script.

La Instalación y puesta en Funcionamiento:


Ahora si cumples con los requerimientos mínimos, lo primero que tienen que hacer es descargar el SCRIPT:
http://stat.radioblogclub.com/radio.blog.3.1.8.zip


Posteriormente a la finalización de la descarga, descomprime el archivo, deben de haber 2 carpetas, una llamada "sounds" la cual es la que subiremos a nuestro servidor y la otra se llama "creat.sound" que es donde convertiremos nuestros archivos MP3.


Sube el contenido de la carpeta "sounds" a tu servidor, los documentos que debes subir son:
playlist.php, template.xls, crossdomain.xml


Así que para comenzar, copia los archivos MP3 que desees a la carpeta "creat.sound" luego ejecuta el archivo "convert64.bat".
 Lo que esta haciendo ahora es simplemente convertir los archivos MP3 en un documento el cual nuestra radio va a leer, recuerde que una vez finalizada la conversión, borre los archivos MP3 que se encuentran en la carpeta de raíz "creat.sound" esto es para que en el futuro no los convierta de nuevo.


Ahora crea una carpeta en tu servidor, exactamente donde se encuentran los los archivos: playlist.php, template.xls, crossdomain.xml
Al crear una carpeta estas creando una nueva lista de reproducción,.


Sube los archivos que convertiste ( se encuentran en ...\creat.sound\sounds\ ) en la carpeta que acabas de crear.
Al hacer esto le estas "agregando" pistas a tu lista de reproducción.


Instalación en el Blog
Una vez que ya este todo listo, llega el momento de instalarlo en el Blog, esto no es difícil:

Vayan a Editar su Plantilla, específicamente en Edicion de HTML y agreguen el siguiente código antes de </head>

<script type="text/javascript" src="http://stat.radioblogclub.com/radio.blog/radio.blog.js"></script>


Elementos de Página. Le dan a agregar elemento y seleccionan HTML.
Agregan el siguiente código haciendo los debidos cambios:


<script type="text/javascript">

//Direccion de el archivo playlist.php en tu servidor
RadioBlog.playlist = 'http://www.tuhost.com/ruta/sounds/playlist.php' //Ancho puedes definirla en pixeles ( px ) o porcentajes
RadioBlog.width = '100%';
//Altura puedes definirla en pixeles ( px ) o porcentajesRadio Blog.height = '100%';
//Color de Fondo
RadioBlog.color.body = '#FFFFFF';
//Color de Borde
RadioBlog.color.border = '#FF6600';
//Color de Botones
RadioBlog.color.button = '#FFB96E';
//Color del texto en el Player
RadioBlog.color.player_text = '#ff8c00';
//Color del texto en la lista RadioBlog.color.playlist_text = '#975000';
RadioBlog.cover = '0';
RadioBlog.start();</script>


Si tienen dudas respecto a los colores pueden revisar este Post: Generador hex Color
¡Guarda el Widget que acabas de crear y eso es todo, tus visitantes podran escuchar música en tu Blog!



Technorati : Radio Blog, Radio para tu Blog, Tutorial para Radio en tu Blog



Las Novedades del Blog
2007-06-28T10:53:00.001-07:00
Bueno como podran haber notado los que visitan periodicamente este Blog han ocurrido algunos cambios, entre los cuales destacan:
Cambio de Plantilla a TBlack 1.0 por Kurodesu
Ausencia de muchas entradas antiguas ( Revisión )
En estos momentos estoy dando los últimos toques a el Diseño/Blog, así que porfavor tengan paciencia y esperen ver muchos trucos nuevos por aquí.


Chat para tu Blog
2007-06-27T05:19:00.001-07:00
De nuevo desde Exiliados del Olimpo les traigo un nuevo truco, en esta ocación algo que les permitira tener más interacción con sus usarios.

Estoes, un chat el cual pueden editar en tamaño y fondo, para ponerlo en su blog ( muy similar al MSN ), simplemente cualquiera puede entrar y es muy bueno debido a su poco tiempo de carga y su opcion de guardar mensajes ( para poder navegar y chatear ).

Pueden ver un ejemplo en : http://blog.exolimpo.com

Para conseguir uno simplemente necesitan entrar a http://www.xatech.com/web_gear/chat.php#top

Posteriormente elegir un fondo ( a la izquierda ) y hacer click en Update & Get Code, obtendran un código SIMILAR a este:

<embed src=http://www.xatech.com/web_gear/chat/chat.swf quality=high bgcolor=#000000 width=540 height=405 name=chat FlashVars="id=6345045" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.xatech.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://www.xatech.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://www.xatech.com/web_gear/chat/go_large.php?id=6345045">Go Large!</a></small><br>

El cual pueden poner en cualquier widget o Post


9 minutos de fama
2007-06-27T05:18:00.003-07:00
Voy a hablarles de como conseguir 9 minutos de publicidad gratis.
En 9minutesoffame te darán 9 minutos, en los que se escogeran los ultimos 5 posts de tu blog y la gente que visita la página, entrará a verlos.
Cuando el tiempo de un blog se acaba, sale un recuadro en el que debes poner la URL de tu blog rapidamente, pues el primero que lo envia consigue los 9 minutos.
No es tan facil como parece... :)



Buscadores de Iconos
2007-06-27T05:18:00.001-07:00
En la actualidad ya hay varios sitios que brindan iconos web gratis y varias de estas las puedes encontrar en nuestra recolección de iconos web gratuitos, otra buena opción es encontrarlos por medio de buscadores especializados en iconos como los siguientes:

Iconlet

Iconlet es un buscador con una base de datos de más de 40 000 iconos con licencias de uso libre. Las iconos están categorizados en ingles por lo que las busquedas tienes que realizarlas también en ese idioma. En su búsqueda avanzada puedes filtrar los resultados de acuerdo al tamaño, formato o licencia del icono.

Sitio: iconlet.com

Iconfinder

Iconfinder es otro buscador con una base de datos muy extensa. Puedes realizar búsquedas de la misma forma que en iconlet, pero los resultados son distintos (al parecer están mudandose de servidor pero señalan que vulven pronto).

Sitio: iconfinder.net

Challenger IconDB

IconDB tiene una base de datos más modesta que las opciones anteriores, pero ofrese un pocos más de calidad y en formato PNG. Las búsquedas sólo pueden realizarse mediante palabras clave.



Sitio: challenger.se/?icondb



Reloj Flash
2007-06-27T05:17:00.001-07:00
Incluye este relog desde tu menú Plantilla como un objeto HTML/Javascript



<table border="0"><tr><embed style="" src="http://relojesweb.imitable.com/swf/clock11.swf" wmode="transparent" type="application/x-shockwave-flash" height="100" width="100"><param name=wmode value=transparent></embed></td></tr><tr><td align="center"></tr></table><br />


















O también:




<table border="0"><tr><br /><table border="0"><tr><td><embed style="" src="http://relojesweb.imitable.com/swf/clock80.swf" wmode="transparent" type="application/x-shockwave-flash" height="100" width="100"><param name=wmode value=transparent></embed></td></tr><tr><td align="center"></td></tr></table><br /><br /></td></tr><tr></tr></table>



























Última actualización
2007-06-27T05:16:00.001-07:00
Simplemente hay que pegar lo siguiente, y un mensaje indicará a tus usuarios la ultima vez que actualizaste.



<script language="JavaScript"><br /><br />var texto=document.lastModified; mes=texto.substring(0,2); dia=texto.substring(3,5); ano=texto.substring(6,10); document.write("Última modificación el "+dia+" del "+mes+" de "+ano);><br /><br />                    </script>







Texto persigue al ratón
2007-06-27T05:14:00.001-07:00
El código es el siguiente.

<script><!-- //anything follows cursor //by gary  //put anything you want in this var and it will follow the cursor var follow='TrucosBlogger.com'  //don't change anything below if (document.all){document.write('<div id="curscroll" style="position:absolute;visibility:hidden">'+follow+'</div>')}<br /><br />function followcursor(){if (document.all){curscroll.style.visibility="visible"}curscroll.style.left=document.body.scrollLeft+event.clientX+10curscroll.style.top=document.body.scrollTop+event.clientY+0}document.onmousemove=followcursor<br /><br />//--></script>






Apariencia de Adsense
2007-06-27T05:12:00.001-07:00
Desde Web2.0 obtenemos los códigos CSS necesarios para modificar la apariencia de nuestros anuncios adsense



Banners

1- Redondeado azul

View Code




2- Fondo CSS



View Code



3-Horizonte Amanecer
View Code

4- Purpura

View Code







5- Azul cielo

View Code





6- Azul y Negro con titulo
View Code


7- Negro y azul con titulo
View Code


8- Negro esquinas redondeadas
View Code


Banners de 1 anuncio

9- Negro de esquinas redondeadas
View Code




10- Naranja rayado
View Code

11- Azul Full
View Code
12- Negro inclinado
View Code

Botón

13- Diamante Negro
View Code
14- Botón con sombra
View Code

15- Negro Oro
View Code



16- Negro con sombra
View Code

17- Blanco con sombra
View Code
18- Verde
View Code
Rectángulo

19- Rectángulo Gris
View Code


20- Azul 2.0
View Code
Skyscraper

21-Viento
View Code22-Empresarial
View Code
23- Papel
View Code

24- Verde Interior
View Code

Rectángulo Medio

25- Menta
View Code

Skyscraper

26- Gris Skyscraper
View Code

27- Rojo Skyscraper
View Code
Medianos

28- Metalico Plata
View Code


29- Azul SOMBRA
View Code

Estos estilos no violan los Términos y Condiciones del contrato al no modificar el comportamiento de los anuncios ni el código en sí.









CSS
2007-06-27T05:06:00.001-07:00

CSS ¿como se come eso?, pues con la cuchara no? jaja, antes de seguir avanzando en los trucos para optimizar nuestros blogs, debemos aprender esto...

El blog de Tuneando lo explica de una forma, pero ahora yo lo explico de otra :)

CSS proviene del ingles Cascading Style Sheets, en español vendria a significar hojas de estilos en cascada, es usado para definir la presentación de un documento estructurado escrito en HTML o XML, mas facil, sirve para definir cada uno de los elementos de nuestros blogs, los colores, la posicion de la sidebar, el ancho del header, el header, los codigos para hacer las tabs, casi todo...

Entonces ¿Cual el CSS de mi blog?

Pues el CSS de Blogger se lo logra observar cuando visitamos nuestro blog, y presionamos las teclas CTRL+U (en firefox) o bien vemos el codigo fuente de la pagina, el CSS se va desde:

body {

y termina antes de:

</style>

Comunmente es empleado para separar el contenido del diseño, haciendo más fácil la maquetacion de las páginas web. El contenido puede cambiar, pero el diseño seguirá siendo el mismo.

Ahora con esta pequeñisima explicacion (porque la de Wikipedia es larguisima), muy pronto podemos avanzar a realizar mejores trucos, nos vemos pronto...

  
  Technorati : CSS 



Inhabilitar boton derecho en todo el blog
2007-06-27T05:02:00.001-07:00
Este codigo es simple, sencillo, rapido y totalmente funcional, el codigo no permite copiar contenido de alguna pagina o weblog, al colocarlo en nuestra plantilla comprobaremos que funciona.

Nos dirigimos:

Plantilla--Edicion de HTML

Buscamos el <body> y reemplazamos el codigo por uno como este:

<body oncontextmenu='return false' onkeydown='return false'>

Listo guardamos los cambios, y ya esta hemos bloqueado el click derecho del raton en nuestro blog, ahora paso a comentarles lo del diseño del blog, he cambiado a un diseño mas fresco, mas ligero, y la tematica del blog cambiara para interactuar mas con ustedes, tambien he corregido algunos posts que daban problemas, gracias a todos por hacer que este blog crezca y siga creciendo. Diviertasen



Jugar pacman en tu blog
2007-06-27T04:59:00.000-07:00
Quieres jugar pacman en tu blog?? tan facil como esto, copia y pega el siguiente codigo en tu blog o web, si te da error dile al blogger que lo ignore y listo:

<script src="http://gmodules.com/ig/ifr?url=http://www.schulz.dk/pacman.xml&synd=open&amp;w=300&h=320&title=http%3A%2F%2Fblog.alamedianoche.com&border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&output=js"></script>



Si todo sale bien la cosa de deberia de ver mas o menos asi:





Vista de posts expandibles en las etiquetas
2007-06-27T04:55:00.000-07:00
Es otro mas de los hack secretos que tengo implementado en mi blog, el siguiente hack nos ayuda a mejorar la experiencia del usuario. La idea es mostrar solo el titulo del post pero tambien provisto de un [+/-] para poder expandir y leer el post.



Checa una prueba de la vista de posts expandibles en esta "categoria"
¿Deseas tener los post expandibles en tu blog? Aqui vamos.

Nos dirigimos a:

Plantilla--Edición de HTML--Expandir plantilla de artilugios

Buscamos este código </head> y colocamos el siguiente codigo siguiente:

<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' ></script>

Ahora tu necesitas buscar el codigo que se encuentra con negro y añadir las partes que se sobresaltan con rojo, como se muestra aquí.

Guardamos cambios y listo, ¿Te gusta?, que tengan un buen fin de semana :P




"Leer mas" en Blogger Beta
2007-06-27T04:49:00.001-07:00
Este truco no es original mio si no de Hackosphere, el nos enseña el truco de "Leer mas".

¿En que consiste?

Si tenemos un post muy largo o queremos atraer al lector para que siga leyendo podemos usar este truco.

Ahora vamos a realizarlo

Realizando...

1. Nos dirigimos a:
Plantilla--Edicion de HTML--Marcamos la casilla "Expandir plantilla de artilugios"

2. Buscamos </head> y debajo colocamos el siguiente codigo:

<script type='text/javascript' src=

'http://www.anniyalogam.com/widgets/hackosphere.js' />

3. Buscamos "post-header-line" para hallar la porcion de codigo en tu template y añadimos lo que esta en rojo, como se muestra:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

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

<div class='post-body'>

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

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

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

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

3. Click en Guardar Plantilla.

4. Nos dirigimos a:

Opciones--Formato, en el fondo puedes hallar la caja de texto que dice "Plantilla de Entrada", Copiar y Pegar estas lineas de codigo:

Escribe tu resumen aqui
<span class="fullpost">
Escribe el resto del post aqui
</span>

5. Hacemos click en "Guardar Valores"

Nota: Gracias a Hackosphere por el "hack"
Actualizacion: gracias a sus comentarios he mejorado el codigo. Saludos




Categorias en forma de Pestañas para Blogger
2007-06-27T04:23:00.001-07:00
Bueno amigos Hoctro's Place nos trae un nuevo hack, es un poco complicado.
Vamos a realizarlo:

0. Etiquetar nuestros posts, si no sabes como visitad: http://help.blogger.com/bin/answer.py?answer=44498&topic=9084

1. Dirigirnos a: Plantilla--Edicion de Html--Expandir plantillas de artilugios

2. Modificar esta linea:
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

por esta:

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

3. Antes de: ]]></b:skin> colocar este codigo:

/*- Menu Tabs F */

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;

}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

4. Por ultimo buscamos el siguiente codigo:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

Y lo cambiamos por:


<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Listo ya tenemos nuestras categorias en forma de pestañas.

Nota: Antes de realizar el paso 4 necesitamos añadir las Eiquetas al blog ¿Como? Nos dirigimos a: Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas



Technorati : Categorias en forma de Pestañas para Blogger Beta



Quitar Ocultar Remover Barra Blogger
2007-06-27T03:48:00.001-07:00
He aqui el truco:
Añadir esto antes de la etiqueta ]]></b:skin>



 #navbar-iframe {
 height:0px;
 visibility:hidden;
 display:none;
 }


Despues de quitar la navbar puede quedar algunos espacios en blanco, asi que añadimos esto despues de body, que es el principio del css.

{ margin-top:0px; }



 
 Technorati : Blogger, Navbar Remover, Remover Navbar



Post de Prueba de Como funciona el Header
2007-06-25T09:44:00.000-07:00
Lorem ipsum dolor met, consetetuer adipiscing elit. Vestibulum eu metus. Maecenas diam felis, consequat sit amet, mattis in, ultricies eu, sapien. Proin eros risus, ullamcorper vel, posuere vitae, aliquet a, massa.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vestibulum nunc id tellus. Aliquam erat volutpat.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem ipsum dolor met, consetetuer adipiscing elit. Vestibulum eu metus. Maecenas diam felis, consequat sit amet, mattis in, ultricies eu, sapien. Proin eros risus, ullamcorper vel, posuere vitae, aliquet a, massa.


Lorem ipsum dolor met, consetetuer adipiscing elit. Vestibulum eu metus. Maecenas diam felis, consequat sit amet, mattis in, ultricies eu, sapien. Proin eros risus, ullamcorper vel, posuere vitae, aliquet a, massa.


Identificar vinculos externos
2007-06-09T05:20:00.000-07:00
En esta ocasión aprenderemos algo muy útil, que nos sirve para identificar los vinculos externos por medio de un icono pequeño.

El truco consiste en utilizar los "selectores de atributos". Por ejemplo, esto permitiría detectar todas las etiquetas A que contengan un vínculo a cualquier tipo de archivo:

En este caso identificaremos a dos tipos de archivos similares (en este caso archivos comprimidos), así que usaremos el mismo icono:



  a[href $='.zip'], a[href
  $='.rar']{
  
  padding-right: 18px;
  
  background: transparent
  url(http://bp0.blogger.com/_Zuzii37VUO4/Rh1xnUrQooI/AAAAAAAAAhc/wU0nM7M_Ebo/s1600/icono_zip.gif) no-repeat center
  right;
  


}

Aqui identificaremos con un icono a una hoja de estilo (CSS) externa:


  a[href $='.css']{
  
  padding-right: 18px;
  
  background: transparent
  url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2GS0rQopI/AAAAAAAAAhk/4QyZEOVo2L8/s1600/icono_css.gif) no-repeat center
  right;
  


}

Aquí identificamos un archivo de texto:


  a[href $='.txt']{
  
  padding-right: 18px;
  
  background: transparent
  url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2JS0rQoqI/AAAAAAAAAhs/8cn9Frf0DqE/s1600/icono_textoplano.gif) no-repeat
  center right;
  


}

O incluso podemos identificar el enlace a un e-mail:


  a[href ^="mailto:"] {
  
  padding-right: anchoImagen;
  
  background: transparent url(URL_imagen)
  no-repeat center right;
  
  }
  



Y para identificar a un vinculo externo cualquiera (sin definir las clases) el siguiente código:


  .linkexterno {
  
  background: transparent
  url(http://bp1.blogger.com/_Zuzii37VUO4/Rimp_xN7pfI/AAAAAAAAAmM/kp9QQ5bj-nc/s1600/icono-link-externo.png) no-repeat
  center right;
  
  padding-right: 14px;
  
  }
  



Todos estos códigos deben de ser añadidos en:

Plantilla--Edición de HTML

Antes de ]]></b:skin>

 Guardar los cambios y listo

Nota: Los iconos usados pertenece a BlogyWeb.




Mostrando Links como pestañas
2007-05-15T05:09:00.000-07:00
Este es un pequeño, y poco complicado hack que permitira darle estilo a tus links, la utilidad de esto nos ayuda a tener varios links que podemos añadir y borrar de una manera rapida y sencilla utilizando el widget que nos proporciona blogger, pero con un mejor estilo, podemos tener los links de manera horizontal o vertical, exactamente como las categorias.

Ahora bien, los pasos a realizar son los siguientes (basados en pestañas verticales):

Nos dirigimos a:

Plantilla--Elementos de la pagina

Luego clickamos en "Añadir un nuevo elemento de pagina" y seguidamente escojemos el widget "Lista de Vinculos"

Blogger le otorga un identificador a cada "widget" que nosotros creamos, dependiendo del numero de widgets que tengamos en nuestro blog, por ejemplo si fuera la unica "Lista de Vinculos" que tengamos en nuestro blog, el codigo seria el siguiente:

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>

Notese que el identificador corresponde a "LinkList1" el cual nos indica que es la primera Lista de Vinculos creada. (paso ya antes mencionado)


Ahora escogemos el estilo de las pestañas (verticales):

En este caso tenemos 14 diseños el cual nos los brinda csspicstock.blogspot.com, yo escogi el Menu4:



  /*- Menu 4--------------------------- */
  
  
  #menu4 {
  
  width: 200px;
  
  margin: 10px;
  
  border-style: solid solid none solid;
  
  border-color: #000;
  
  border-size: 1px;
  
  border-width: 1px;
  
  }
  
  
  #menu4 li a {
  
  height: 32px;
  
  voice-family: "\"}\"";
  
  voice-family: inherit;
  
  height: 24px;
  
  text-decoration: none;
  
  }
  
  
  #menu4 li a:link, #menu4 li a:visited {
  
  color: #CCC;
  
  display: block;
  
  background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
  
  padding: 8px 0 0 10px;
  
  }
  
  
  #menu4 li a:hover {
  
  color: #FFF;
  
  background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
  
  padding: 8px 0 0 10px;
  
  }
  



El cual colocamos antes de ]]></b:skin>

Ahora si vamos a comenzar con lo mas complicado...

Nos dirigimos a:

Plantilla--Edicion de HTML--Expandir plantillas de artilugios

Buscamos el siguiente codigo:


  <b:widget id='LinkList1' locked='false'
  title='Links' type='LinkList'>
  
  <b:includable id='main'>
  
  
  <b:if
  cond='data:title'><h2><data:title/></h2></b:if>
  
  <div class='widget-content'>
  
  <ul>
  
  <b:loop values='data:links' var='link'>
  
  <li><a
  expr:href='data:link.target'><data:link.name/></a></li>
  
  </b:loop>
  
  </ul>
  
  <b:include name='quickedit'/>
  
  </div>
  
  </b:includable>
  
  </b:widget>
  



Y lo reemplazamos con el siguiente:


  <b:widget id='LinkList1'
  locked='false' title='Links' type='LinkList'>
  
  <b:includable id='main'>
  
  <div id='menu4'>
  
  <b:if
  cond='data:title'><h2><data:title/></h2></b:if>
  
  <div class='widget-content'>
  
  <ul>
  
  <b:loop values='data:links' var='link'>
  
  <li><a
  expr:href='data:link.target'><data:link.name/></a></li>
  
  </b:loop>
  
  </ul>
  
  <b:include name='quickedit'/>
  
  </div>
  
  </b:includable>
  
  </b:widget>
  



Recordad que LinkList1 corresponde al identificador de la Lista de Vinculos (como antes mencionado)

Listo, Guardamos todos los cambios y ya tenemos nuestras links en forma de pestañas ;)




Rotar Color de Fondo
2007-03-08T05:06:00.000-08:00
Con todos esos trucos que hay para hacer que nuestro blog use tecnicas aleatorias, pues este no es la excepcion, les hablo de cambiar el color del fondo del blog aleatoriamente, o mejor dicho cada vez que se actualize el blog (presionando F5), este truco lo encontre en Mas Aire su creadora Llara, Vienna, Junio, o como ella quiera llamarse (quizas podamos hacer un truco aleatorio con sus nombres :D), el post lo podemos encontrar aqui.

Ahora pasemos a la explicacion(que aburrido :))...

Nos dirigimos a:
Plantilla--Edicion de HTML

Buscamos este codigo:

body {

Y despues de este colocamos:

<script>

//Ingresar lista de colores:

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

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

</script>

Guardamos y listo :D, ahora nosotros podemos escoger el color que nos de la gana, en esta pagina podemas elegir toda una gama :P

PD: En los proximos dias estare contestando los mails, comentarios, optimixando algunos posts, etc...(soy superman :D). Diviertansen




Iconos de Navegacion Blogger
2007-02-18T05:04:00.000-08:00
O bien el titulo deberia ser, ¿Como cambiar las palabras "Entradas antiguas" por una imagen?, o quizas, ¿como hacerlo por una palabra mas bonita?, pues bien basandome en el truco de Hoctro, lo he conseguido...



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


Y si lo que quieres es cambiarlo por una imagen reemplaza el codigo por este:


  
  <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='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif'/></a>
  
  </b:if>
  
  
  <b:if cond='data:olderPageUrl'>
  
  <a expr:href='data:olderPageUrl'
  expr:title='data:olderPageTitle' id='blog-pager-older-link'>
  
  <img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/right.gif'/></a>
  
  </b:if>
  
  <a class='home-link' expr:href='data:blog.homepageUrl'>
  
  <img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
  
  </div>
  
  <div class='clear'/>
  
  </b:includable>
  
  

  



Guardamos cambios y nos deberia quedar asi:

 
Tambien podemos cambiar las imagenes recordando siempre que las imagenes deben ir en este orden: 1 Izquierda 2 Derecha 3 Inicio(Central)

Ahora si queremos cambiarlo por palabras diferentes reemplazamos el codigo por este:


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



Yo por mi parte he decido personalizar mis iconos de navegacion... como pueden observar al final de la pagina. Que disfruten...





Comentarios con foto del Autor
2007-02-04T05:01:00.000-08:00
Despues de algunos post de nuestro amigo Sanshiro, es hora de que vuelva a la accion, ahora este hack lo podran encontrar implementado este blog, y para poder visualizarlo deberan hacer click en el titulo del post. Ahora bien el creador del hack es Purple Moggy, que ahora paso a explicar:

Cuando hacemos hacemos click en el titulo del post se nos dirige a una pagina donde se encuentra el post y los comentarios en conjunto, pero los comentarios se nos muestran un poco simples, ahora al aplicar este hack aparecera la foto, o imagen del autor del comentario.

¿Como aplicarlo?

 Primero dirigirse a:

Plantilla--Edicion de HTML--Expandir plantilla de artilugios

Ahora buscamos el siguiente codigo y añadimos el codigo que se encuentra resaltado con rojo.



  <dl id='comments-block'>
  
  <b:loop values='data:post.comments' var='comment'>
  
  <dt class='comment-author' expr:id='"comment-" +
  data:comment.id'>
  
  <div class='commentphoto' style='float:right;'/>
  
  <a expr:name='"comment-" + data:comment.id'/>
  
  <b:if cond='data:comment.authorUrl'>
  
  <a expr:href='data:comment.authorUrl'
  rel='nofollow'><data:comment.author/></a>
  
  <b:else/>
  
  <data:comment.author/>
  
  </b:if>
  
  <data:commentPostedByMsg/>
  
  </dt>
  
  <dd class='comment-body'>
  
  <b:if cond='data:comment.isDeleted'>
  
  <span
  class='deleted-comment'><data:comment.body/></span>
  
  <b:else/>
  
  <p><data:comment.body/></p>
  
  </b:if>
  
  </dd>
  
  <dd class='comment-footer'>
  
  <span class='comment-timestamp'>
  
  <a expr:href='"#comment-" + data:comment.id'
  title='comment permalink'>
  
  <data:comment.timestamp/>
  
  </a>
  
  <b:include data='comment' name='commentDeleteIcon'/>
  
  </span>
  
  </dd>
  
  <div style='clear:both;'/>
  
  </b:loop>
  
  </dl>
  
  


Tu puedes cambiar el 'right' a 'left' dependiendo de el lugar donde quieras que aparesca la imagen.

Ahora nos dirigimos hasta el </head> y antes de éste añadimos el siguiente codigo:



  <script
  src='http://leonelhack.googlepages.com/blogger_comment_photos.js'
  type='text/javascript'></script>
  
  <script type='text/javascript'>
  
  //<![CDATA[
  
  BloggerProfiles.noimage =
  'http://img139.imageshack.us/img139/1011/defaultavatarad7.png'
  
  BloggerProfiles.imageWidth = 60;
  
  BloggerProfiles.imageHeight = 75;
  
  addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author',
  1);});
  
  //]]></script>
  
  


Guardamos los cambios y listo, ahora podras ver los cambios haciendo click en el titulo de algun post de tu blog. Espero os sirva.

Nota: El script demora unos segundos en cargar por favor ser paciente.





Tagboard de voz
2007-01-24T04:58:00.000-08:00
Hoy presente mi examen final de literatura, me fue de la chingada, no hay porque mentir jajaja, saliendo del examen me vine a casa de un amigo, adrian, estamos aqui sentados sin nada que hacer y platicando se me ocurrio hacer este post para mostrarles como colocar un sistema de comentarios de voz en su blog, un tipo de tagboard pero de voz, en menos de 2 min (trucos rapidos como me gustan jejeje)

Lo primero que tienen que hacer es sacar una cuenta en la pagina:
www.mychingo.com

Una vez dentro se van a la pestaña superior que dice "get the code" (disculpen pero ahora no tengo screenshoter) y ahi unicamente copian el codigo y lo pegan en su blog, en la parte donde quieran que aparezca, de preferencia en la barra lateral, ya saben, se van al editor grafico de blogger beta y le dan en "agregar elemento" y luego "html" donde pegaran el codigo, si todo sale bien el tagboard de mensajes de voz quedara asi:




Tiempo de Vida de tu Blog
2007-01-19T04:57:00.000-08:00
Hola de nuevo, si quieres mostrar a tus visitantes cuantos dias tiene tu blog de existencia, lo que tienes que hacer es lo siguiente:

Nos dirigimos a :

Plantilla--Elementos de la pagina

Damos click en "Añadir nuevo elemento de pagina", escojemos la opcion de HTML/JavaScript

Copiamos y pegamos lo siguiente:

<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 este Blog esta en linea!")
}
//NOTA: Cambia en la linea de abajo, el dia desde el que quieres contar el tiempo
countup(2006,09,30)
</script>

Hoy es <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>

Listo, cambias lo marcado con rojo, guardas los cambios y listo.
Nota: Parte de este código ha sido tomado de Noticias-Blogs y ha sido modificado para su correcto funcionamiento.




Emoticones para el nuevo Blogger
2007-01-11T04:54:00.000-08:00
He vuelto, y con muchismos hacks por escribir y enseñar, este hack a continuacion lo habia realizado en el antiguo blogger pero no en el nuevo (quizas por pereza).

El siguiente hack añade emoticones (como en el messenger) al blog para darle una apariencia mas fresca y divertida.

¿Quieres ponerlos en tu blog?

Lo que tienes que hacer es lo siguiente...

Nos dirigimos a:

Plantilla--Edición de html

Ahora copiamos y pegamos el siguiente código antes de </head>

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

Guardamos y listo. Ahora tenemos nuestro blog lleno de emoticones :$.
:) o :-) 
:( o :-( 
:P o :-P 
:D o :-D 
:$ o :-$ 
;) o ;-)  


ACTUALIZACION

Para que los emoticones se logren visualizar en los comentarios debemos hacer lo siguiente:

Buscamos el siguiente código y añadimos lo que se encuentra con rojo (todo esto es en: Plantilla--Edición de HTML)

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del Blog' type='Blog'/>
</b:section>
<script language="javascript">
addSmiley('post-author', 'post-notes', 'comment-author');
</script>

Guardamos y listo, esta modificacion tarda un poco en hacer efecto, por favor tener paciencia, y gracias por sus comentarios. Que lo disfrutes.



CBOX en tu blog
2006-12-16T04:52:00.000-08:00
Aqui explicaremos lo que es un C-box

Es una especie de chat o bandeja de opiniones que permite la relacion visitante-blog.
Para colocarlo en nuestro blog:

Entras en esta pagina www.cbox.ws das tu nombre, direccion (url) de tu blog, contraseña, e-mail, idioma y color de fondo.
Entras con tu nombre y contraseña y te da el codigo html.

Colocando...

Nos dirigimos a:

Plantilla--Elementos de la pagina--Añadir un nuevo elemento de la pagina--HTML/JavaScript

Copiamos y Pegamos el codigo del C-box.
Guardamos y listo. Diviertete.




Nuevas Templates
2006-12-12T04:51:00.000-08:00
Por finnnnnnn, je je, hace un buen tiempo que no publicaba algo acreca de templates, asi que ya es tiempo, Hans de Beautiful Beta nos trae dos templates, adicionales a las de Blogger de buen diseño espero les gusten:

La primera es: ¿Angel o Diablo? y la segunda es: Giraffe










Click aqui para descartgar la plantilla Angel o Diablo

Click aqui para descargar la plantilla Giraffe



Quitar el mensaje de Etiquetas
2006-12-08T04:50:00.000-08:00





Quizas a algunos no les paresca, pero yo he eliminado ese molestoso mensaje de que:

"Se estan mostrando X entradas con la label "Beta"

Pues bueno para mi no era necesario ese mensajito molestoso, asi que decidi borrarlo...Si alguno de ustedes quiero borrarlo acontinuacion los pasos:

Editando...

1. Nos dirigimos a:
Plantilla--Edicion de HTML--Marcamos la casilla "Expandir las plantillas de artilugios"

2. Buscamos el siguiente codigo:

<b:include data='top' name='status-message'/>

3. Eliminamos el codigo,

4. Guardamos Cambios y Listo; espero que te sirva. Salu2.

Nota: Este hack es una idea original de Hoctro




Buscador de Google en tu blog
2006-12-05T04:45:00.000-08:00
Hola amigos,

Ya que me lo han pedido por medio de un comentario he aqui la respuesta:

Un buscador de Google para tu blog, empezemos...

Colocando...

1. Nos dirigimos a

Plantilla--Elementos de la Pagina--Añadir un elemento de pagina--HTML/JavaScript

2. Copiamos y pegamos el siguiente codigo:


  <!-- SiteSearch Google -->
  
  <form action="http://www.google.com/search" method="GET">
  
  <input value="UTF-8" name="ie" type="hidden"/>
  
  <input value="UTF-8" name="oe" type="hidden"/>
  
  <table bgcolor="#FFFFFF">
  
  <a href="http://www.google.com/">
  
  <img border="0" alt="Google" src=" http://www.google.com/logos/Logo_40wht.gif"/>
  
  </a>
  
  <input maxlength="255" value="" name="q" size="26"
  type="text"/>
  
  <input value="Buscar" name="btnG" type="submit"/>
  
  <font size="-1">
  
  <input value="URL DE TU BLOG" name="domains"
  type="hidden"/><br/><input value="" name="sitesearch"
  type="radio"/> WWW<input checked value="URL DE TU
  BLOG" name="sitesearch" type="radio"/> NOMBRE DE
  TU BLOG<br/>
  
  </font>
  
  </table></form>
  
  <!-- SiteSearch Google -->
  


Damos click en Guardar Cambios y listo. Diviertete




Ocultar Titulo Blogger
2006-12-02T04:43:00.000-08:00

Nos dirigimos a:

Plantilla--Edicion de html

2. Buscamos el siguiente codigo:


    #header {
    margin: 5px;
    //border: 1px solid $bordercolor;
    text-align: center;
    }



A este codigo le añadimos al final: display: none;

Nos quedaria asi:


    #header {
    margin: 5px;
    //border: 1px solid $bordercolor;
    text-align: center;
    display: none;
    }








  
  Technorati : Ocultar Titulo Blogger 



Como agregar una imagen al titulo en Blogger Beta
2006-12-02T04:40:00.000-08:00
Hola como muchos me han pedido este truco lo he puesto con todas sus modificaciones y totalmente terminado.

Realizando...

1. Nos dirigimos a:

Plantilla--Edicion de html

2. Buscamos el codigo:

#header-wrapper {

3. Reemplaza la elcodigo para que luzca como esto:

#header-wrapper {
width:57.69em;
*width:56.3em; /* IE */
min-width:955px;
margin:0 auto 10px;
//border:1px solid $bordercolor;
min-height:200px;
background:url("http://leonelhack.googlepages.com/header.jpg") no-repeat left top;
}

#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
display: none;
}

3. Cambiamos los datos:

http://leonelhack.googlepages.com/header.jpg Debemos cambiar esta URL a la de nuestra imagen.

min-width:955px; Sirve para colocar el ancho de la imagen, nosotros debemos cambiarlo al de nuestra imagen.

min-height:200px; Sirve para colocar el alto de la imagen, debemos colocar el de nuestra imagen.

display: none; Sirve para ocultar el titulo, de la cabecera del blog.

Nota: Todos los errores corregidos.




Encuestas en tu blog
2006-12-01T04:37:00.000-08:00

Este dato me lo ha pasado COMPUANIMATION3D. PollDaddy es unos de los mejores servicios de encuestas, lo malo es que este en ingles, pero de ahi todo bien, posee una caracteristica de mostrar el resultado en el mismo blog, sin necesidad de irse a otra pagina, tiene un excelente diseño y la capacidad de colocar la fecha de cierre para la encuesta, ahora vamos a instalarlo en nuestor blog...


1 Entramos a la pagina de PollDaddy
2 Nos registramos (un minuto o dos)
3 Creamos una nueva encuesta
4 Donde dice: "Poll Question", colocamos la pregunta de la Encuesta
5 En "Your Website" colocamos la URL de nuestro blog o pagina web
6 Donde dice "Poll Answers" colocamos las opciones a elegir de la Encuesta
7 Damos click en "Next Step"
8 Escojemos una "PollDaddy Skins" (un estilo para la encuesta)
9 Damos click en "Next Step"
10 Seleccionamos el codigo del "Javascript Method" y copiamos

Colocando...

1 Nos dirigimos a
Plantilla--Elementos de la pagina--Añadir un elemento de página-- HTML/Javascript

2 Pegamos el codigo anterior. Guardamos Cambios y Listo. Diviertete ;-)



  
  Technorati : Encuestas en tu blog 



Como quitar el borde de las imagenes
2006-11-27T04:36:00.000-08:00
Vamos a ver un "hack" muy sencillo para deshacerse del molestoso borde de las imagenes(al menos para mi) que aparecen en los posts.

Comencemos...

1 Nos dirigimos a Plantilla--Edicion html

2 Buscamos el siguiente codigo:


  .post img {
  
  border: 1px
  



Cambiamos el 1 a 0 Guardamos y listo, hemos concluido con el hack y eliminado el molestoso borde de las imagenes. Salu2


  
  Technorati : Como quitar el borde de las imagenes 



Blogroll en Blogger Beta
2006-11-24T04:34:00.000-08:00
Este hack es muy personal (creado por mi con unos simples scripts) se encuentra ubicado en "sidebar" derecha

¿Que es BLOGROLL?

Blogroll es una lista con los blogs a los cuales estamos linkando o vinculando.

Colocando en el blog...

 1. Nos dirigimos a:
Plantilla--Elementos de la pagina--Añadir un elemento de pagina-- HTML/Javascript

Añadimos:


  <script language="javascript">
  
  var capa
  
  hidden="none";
  
  show="block";
  
  function cambio(idCapa){
  
  if (document.layers ) capa = eval("document." + idCapa);
  
  if (document.all) capa = eval(idCapa + ".style");
  
  if (document.getElementById) capa = eval('document.getElementById("' + idCapa +
  '").style');
  
  if ((capa.visibility == "hidden") || (capa.visibility == "hide")){
  
  capa.height = "" ;
  
  capa.visibility = (document.layers) ? "show" : "visible" ;
  
  }else{
  
  capa.visibility = (document.layers) ? "hide" : "hidden" ;
  
  capa.height = "0px" ;
  
  }
  
  }
  
  //-->
  
  </script>
  
  
  <a style="cursor:pointer;" onclick="cambio('capa1')"><b>[+ EXPANDIR/- CONTRAER]</b></a>
  
  <br/>
  
  
  <div id="capa1" style="visibility:hidden; position:relative; height:0px"><p>
  
  
  <center><a href="dirección URL a enlazar"><img
  src="http://images.websnapr.com/?url=dirección URL a
  enlazar&size=s"></a></center>
  
  
  </p></div>



Nota: Gracias a Chenko por la actualizacion del BLOGROLL. Diviertete

  
  Technorati : Blog Roll Blogger Beta 



Nueva template para Blogger Beta
2006-11-20T04:31:00.000-08:00

Asi es amigos, AnTiLo0p nos trae una nueva template para Blogger beta.
Se trata de la antigua K2 para Blogger

Para descargarla hace click aqui



  
  Technorati : PLantilla Blogger 



Banner Aleatorio
2006-10-29T04:20:00.000-08:00
Bueno les traigo un nuevo hack, se trata de un banner aleatorio, pueden ver un ejemplo en mi blog "WebHacker" haciendo click en actualizar o recargar dependiendo del navegador o presionando F5 bueno vamos al punto (o a la coma), este hack no los trae Gabriel

Colocamos el siguiente codigo debajo de <body>



  <script type="text/javascript">
  var banner= new Array()
  banner[0]="http://tubanner.jpg"
  banner[1]="http://tu_otro_banner.jpg"
  banner[2]="mas_mas_banners.jpg"
  banner[3]="http://no_crees_que_son_muchos_banners.jpg"
  banner[4]="http://mas_banners_para_tu_blog.jpg"
  var random=Math.round(4*Math.random());
  document.write("<style>");
  document.write("#header {");
  document.write(' background:url("' + banner[random] + '")
  no-repeat left TOP;');
  document.write(" }");
  document.write("</style>");
  </script>
  
  
  Lo que necesitas cambiar:
  
  





La URL de tus graficos
Si tienes otro o mas banners añade banner[X]="http:añade_otro_banner.jpg"("X" corresponde a el numero del banner correspondiente)
Si en el caso de añadir otro banner y realizar el paso 2 debemos cambiar Math.round(X*Math.random());



Por el numero de banners que tenemos en total.

  
  Technorati : Banner Aleatorio en Blogger beta 



Plantilla con 2 sidebars en blogger beta
2006-10-28T04:16:00.000-07:00
Este hack les permitira tener Dos Barras en su Blog:

Buscar el siguiente codigo:

  #outer-wrapper {
  width: 750px;
  ...
  }
  #main-wrapper {
  width: 400px;
  margin-left: 20px;
  ...
  }
  #sidebar-wrapper {
  width: 150px;
  float: right;
  ...
  }


Despues de esto añadimos:


  #newsidebar-wrapper {
  
  width: 150px;
  
  float: left;
  
  }


Despues buscamos el siguiente codigo:

  <div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  </div>




Y antes del codigo añadimos:




  <div id='newsidebar-wrapper'>
  
  <b:section class='sidebar' id='newsidebar' preferred='yes'>
  
  <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
  
  </b:section>
  
  </div>




  
  Technorati : Plantilla con 2 sidebars en blogger beta 



Tu Favicon en blogger beta
2006-10-24T04:09:00.000-07:00
Bueno, he aqui un nuevo truco para blogger beta, como añadir tu favicon (favorite icon) a tu blog

Vamos a lo primero:

¿Que es Favicon?

Pues si encontre el significado de favicon en wikipedia click aqui

Ahora si

Pongamos nuestro favicon en nuestro blogger beta.......



Creamos Nuestro Favicon con el servicio de favicon llamado Favicon from Pics
Ponemos cualquier imagen que queramos y la subimos, al final nos dara unas pequeñas imagenes en formato .ico, .gif y .png
Usaremos la .png
Subimos la imagen a blogger
Nos dirijimos a nuestra plantilla Template-Edit Html
Buscamos el siguiente codigo.



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


Y despues de esto colocamos:




<link href='http://tufavicon.png' rel='shortcut icon'
  type='image/x-icon'/>
  <link href='http://tufavicon.png' rel='icon'
  type='image/png'/>

 
 Technorati : Favicon para tu blog



Comentarios recientes en tu sidebar para blogger beta
2006-10-23T04:07:00.000-07:00
Pasos

1 Es mas facil que el anterior

2 Ir a Template->Page Elements y da click en "Add a Page element"

3 Escoje Feed

4 Escribe la url del feed de tu blog osea http://elnombredetublog.blogspot.com/feeds/comments/full

5 Click en "Continue"

6 Configurar el numero de comentarios que deseas (maximo cinco)

7 Click en "Save Changes"

  
  Technorati : Comentarios recientes en tu sidebar para blogger beta 



Ultimos post en la sidebar para blogger beta
2006-10-22T04:05:00.000-07:00
Bien bien algunos hemos visto los ultimos post en la sidebar de algun blog y hemos intentado buscar una forma pero nada, bien este es el truco para hacerlo nosotros con nuestro blogger beta, un aporte de Hackosphere:

1 Es lo mas facil

2 Ir a Template->Page Elements y da click en "Add a Page element"

3 Escoje Feed

4 Escribe la url del feed de tu blog osea http://elnombredetublog.blogspot.com/feeds/posts/full

5 Click en "Continue"

6 Configurar el numero de post que deseas (maximo cinco)

7 Click en "Save Changes".

  
  Technorati : Ultimos Post Blogger Beta 



Añadir redes sociales en Blogger
2006-10-21T03:53:00.000-07:00
Bueno amigos como muchos sabemos he estado fuera por un tiempo por problemas tecnicos, y haciendo un intento para postear en este blog estoy aqui.
Bueno vamos al arroz(grano) .

Como ya sabemos meneame es un sistema de noticias elegidas por los usuarios , cada noticia pasa a traves de un sistema de votaciones de usuarios en fin........

Muchos hemos visto unas pequenas imagenes que dicen Meneame otras Enchilame etc...

He aqui un ejemplo

Meneame

Pasos:

1. Ir a Plantilla--Edicion html

2. Marcamos la casilla que dice "Expandir plantillas de artilugios"

3. Debemos buscar este codigo en el html:



    <p class="post-footer-line post-footer-line-3">



4. Antes de este codigo debemos colocar este:


  <left><input src='http://i94.photobucket.com/albums/l93/drakedalfa/meneame.gif'
  type='image'/></left>
  
  <left><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url +
  "&amp;title=" + data:post.title' target='_blank'>Meneame</a></left>
  
  


Para poner otras redes sociales como Enchilame, Acolitame, Floreame o Digg solo debemos cambiar la imagen marcada con rojo y el nombre marcado con azul por la imagen y el nombre de la red social respectivamente.


  
  Technorati : Añadir redes sociales en Blogger 



Acerca de
2006-06-06T15:42:00.000-07:00
TrucosBloggger.com es un sitio dedicado a aportar ayuda a Bloggers alrededor del mundo, dando consejos, trucos y metodos para que el usuario y su blog adquieran más conocimientos los cuales le permitiran hacer que su Blog tenga éxito.

El contenido de esta web lo puedes usar, modificar, publicar y redistribuirla sirempre y cuando se indique la autoría correspondiente. Sin embargo no se permite una copia identica de los articulos, todo esto esta representado en la licencia Creative Commons Attribution-Share Alike 2.5 Mexico License .


Contacto
2006-06-06T11:24:00.000-07:00


                  





  











 Nombre
 
 
      


 E-Mail
 
 
      


 Tema
 
 
      


 Mensaje
 

 
      


 


Image Verification



Introduce el texto que aparece en la imagen

Valor	Descripción
none	El elemento no se mostrara ( sin embargo el Explorador lo cargara )
block	Se mostrara como un elemento de Bloque, es decir tendrá un salto de linea antes y después del elemento.
inline	Default. Sera mostrado como un elemento de linea, no tendrá salto de linea ni antes ni después.
list-item	El elemento se mostrará como un elemento de Lista.
run-in	El Elemento sera mostrado como Nivel-Bloque o como Inline, dependiendo del contexto.
compact	El Elemento sera mostrado como Nivel-Bloque o como Inline, dependiendo del contexto.
marker
table	El elemento sera mostrado como una Table de Bloque ( como <table> ) con salto antes y después del elemento.
inline-table	El Elemento sera mostrado como una Tabla de Linea ( como <table> ) sin salto antes o después del elemento.
table-row-group	El elemento sera mostrado como un grupo de una o más filas (como <tbody>)
table-header-group	El elemento sera mostrado como un grupo de una o más filas (como <thead>)
table-footer-group	El elemento sera mostrado como un grupo de una o más filas (como <tfoot>)
table-row	El elemento se mostrara como una fila de tabla (como <tr>)
table-column-group	El elemento sera mostrado como un grupo de una o más columnas. (como <colgroup>)
table-column	El elemento sera mostrado como una columna de celdas (como <col>)
table-cell	El elemento sera mostrado como una tabla de celda(como <td> y <th>)