[+/-] Ocultar el nombre de cualquier gadget en el blog

A veces queremos que el nombre de algun gadget no salga en el blog, pero a la hora de mover esos gadgets en el panel de Diseño del blog no sabemos cual gadget es el que queremos mover, ya que no le otorgamos un nombre.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

[1] Si esto te ocurria, ya no ocurrirá mas. Pues solo tienes que modificar el gadget que queremos. El código de los gadgets es como este:

<b:widget id='Aqui va el ID' locked='false' title='Aqui va el titulo(este no se borra)' type='Aqui el tipo del gadget'>
<b:includable id='main'>

<b:if cond='data:title'>
  <h2>
    <data:title/>
  </h2>
</b:if>
 <div class='widget-content'>

[Modificaciones] Para que no se vea el nombre de el gadget en el blog tenemos que borrar el código en rojo.

Con esa sencilla modificación estará listo el HTML y ya no mostrará mas el nombre del gadget.

[+/-] Donde editar el código HTML de nuestra plantilla?

A veces que necesitamos o queremos experimentar con nuestro blog, o uno de pruebas. Acerca de como se modifica la plantilla, pero no sabemos donde o como se hace. Aqui resolveremos una de estas preguntas ¿Donde se modifica?:

+/- Mostrar los pasos

[1] Primero necesitamos situarnos en el escritorio de blogger. Y en el blog que queramos, hacemos clic en el link de diseño:

[2] Despues se abrirá el panel del diseño de tu blog. Aqui hacemos click en el link Edicion HTML

[3] Y si lo necesitas, puedes hacer click en el recuadro de Expandir la plantilla de artilugios. Esto significa que veremos lo que contiene o la plantilla de los gadgets que estan en el blog:

[+/-] Texto que persigue al cursor

Puede ser cualquier frase, la que tu quieras!!. únicamente texto, solo es necesario agregar un gadget HTML/Javascript. Lo puedes agregar donde quieras, ya que este no mostrará nada mas, solo hará que se vea nuestro texto destras del cursor.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1] Una vez agregado el gadget coloca este código dentro de él:

+/- Mostrar Código

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

mensaje = 'Chivas es el equipo mas querido de México';
font = 'Arial';
size = 2;
color = 'red';
velocidad = 0.8;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);


mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);


function Mouse(evento)
{ 
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
} 
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;

</script>

[2] Despues de agregarlo que te parece si lo editamos un poco, es muy facil. Solo pon en el código rojo lo que quieras que se vea en la pantalla.

mensaje = 'Aqui el mensaje que tu quieras';
font = '(Arial, Verdana, Helvetica, Comic Sans MS)';//Aqui el tipo de letras
size = 2;//Aqui el tamaño de la letra
color = 'red';//Aqui el color del texto: red, white, black, blue, green
velocidad = 0.8;//Aqui la velocidad con que se mueven

Con esto tendrás al mensaje persiguiendo al mouse!!!

[+/-] Aclarar imágenes al paso del mouse

Este es un truco unicamente para los usuarios de Picasa. Si no eres usuario puedes regitrarte aqui.

Pero seguramente ya eres usuario blogger y por defecto ya usas el Picasa. Ya que blogger para subir imágenes, las aloja en sus servidores por medio de Picasa.

/!\ En esta entrada se asume que tienes conocimientos de como subir imágenes en Blogger o Picasa. Si no sabes como subir imágenes, revisa esta entrada: Subir imágenes en Picasa o en Blogger.

+/- Mostrar pasos.

[1] Podemos comenzar por ver como se visualizan los codigos de picasa:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/s1600-h/fav.png">
<img style="cursor:pointer; cursor:hand;width: 16px; height: 16px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/s400/fav.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5284034013111848466" />
</a>

El código en color:

Rojo.- Este es la direccion en la que se visualiza la imagen completa.
Azul.- Este es el ancho y el largo de la imagen.
Verde.- Este es la direcion de la imagen (lo que nos interesa).

[2] Ahora veamos el otro código necesario para aclarar la imagen:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/s72/fav.png" alt="Pasa el Cursor para ver los Cambios!!" width="16px" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/s72/fav.png';" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/';" />

El código en color:
Rojo.- Es la direccion de la imagen(la anterior en verde), solo que cambiamos el s400 por un s72:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/s72/fav.png

Azul.- Este será el mismo ancho.

Verde.- Este es la direcion de la imagen en esta quitamos los s400 y s72

quedará así: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudkMuBFPdwoJDuPoB1x_kA5W5l9WG6lhr4qGXTsEgGBFy0aWWzVkuuMvq1MuSpYZxQri9R_GZ30IGrPySCUVaDfgdIITW7rfyySnO26fEd4sS-qhB6ckwJd3f6X14XoBdG-zMCTkVIM6p/

[+/-] Insertar o crear, eliminar o mover un gadget ?

Blogger de Google tiene la posibilidad de agregar o quitar, así como mover de lugar gadgets en un blog. Los gadgets en blogger se utilizan para personas que no tienen mucho conocimiento en cuanto a HTML, XML, CSS o algun otro leguaje. Para un mejor manejo del código sin tener modificar la plantilla.

A continuación les daré unos sencillos pasos a seguir para poder relizar cambios en su blog.

Leer la entrada completa

[+/-] Agregar 2 o mas gadgets en el header (Titulo)

Me he alejado un poco del blog pero a cambio tengo muchísimas ideas mas para compartir y mejorar nuestros webs/blogs. Espero y sean de su agrado.

Bueno En esta ocasión les mostraré como agregar 2 o mas gadgets a la cabecera de tu blog. Y así poder colocar cualquier objeto arriba o abajo de nuestra cabecera.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

[1] Para poder realizar nuestra modificación necesitas entrar en el panel de Edicion HTML y sin expandir las plantillas de artilugios debes encontrar con CTRL+F el siguiente código:

<div id='header-wrapper'><div class='LS'/>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
            <b:widget id='Header1' locked='true' title='Hacker of the Web (cabecera)' type='Header'/>
      </b:section>
</div>

[2] El número en color rojo puedes cambiarlo a cualquier otro que se te ocurra (Este será el número de gadgets que podras insertar).

[3] La palabra que esta en color azul (NO) cambiala a yes y todo estará listo para que puedas agregar un gadget en la cabecera de tu blog.

[+/-] Redondear bordes sin imágenes II

Pues ya habíamos explicado en otra entrada una forma fácil de redondear las esquinas con un poco de CSS pero gracias a un comentario otra forma de redondear las esquinas sin necesidad de código Mozilla, es decir mas estandarizado y que se puedan visualizar las esquinas en casi cualquier navegador.

Lo que necesitas hacer seguir estos pasos:

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Antes de comenzar necesitas descargarte y alojar donde prefieras el script redondear.js que viene incluido en ente zip.

[1] Despues tienes que entrar en Edición de HTML y colocar antes de la etiqueta </head>:

<script type="text/javascript" src="URL-redondear.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty(".cajaredonda");
}</script>

[2] Una vez realizado eso, de igual manera que la vez pasada donde quieras que se redondeen las esquinas deberás colocar:

class="cajaredonda"

y el código podría quedar algo mas o menos asi:

<span style="background:#ff0000;color:#000000" class="cajaredonda">aqui el texto</span>

Con esto tus cajas o cualquier etiqueta en la que quieras, podrá tener su esquinas redondeadas.

[MODIFICACIONES] Solo si eres un usuario avanzado, o te interesa quebrarte la cabeza un poco aquí tenemos mas opciones de redondeo de esquinas:

[+/-] En la llamada del script:

Nifty("div#box,div#prueba,p","big");
Esto afectará a las capas box, prueba y a todas las etiquetas de párrafos.

El segundo parámetro son las opciones de redondeo que se aplicarán a los selectores en cada función. Las distintas opciones se deben escribir separadas por comas. Existe una lista de opciones bastante grande, pero comentamos algunas que parecen más útiles:

tr: redondear sólo la esquina superior derecha.
tl: redondear sólo la esquina superior izquierda.
br: redondear sólo la esquina inferior derecha.
bl: redondear sólo la esquina inferior izquierda.
top: esquinas de arriba
bottom: esquinas de abajo
left: esquinas de la izquierda
right: esquinas de la derecha
all: todas las esquinas (es la opción por defecto)
none: ninguna esquina se redondea

Con estas opciones juntas se pueden definir redondeos de varias esquinas, pero no todas, para que quede alguna sin redondear:

Nifty("p","tl,bl,br");

small: se utilizan esquinas pequeñas, de 2px
normal: se utilizan esquinas normales 5px (opción por defecto)
big: se utilizan esquinas grandes de 10px

[+/-] Chat en el Blog

En muchos blogs existen una muy buena variedad de páginas para poder chatear, o dejar un comentario en la web o blog, es decir no es lo mismo que dejar un comentario en alguna entrada si no que se opina de cualquier otra cosa.

Para obtener un chat del tipo:

Necesitas entrar en Xat.com y luego seguir los siguientes pasos.

[1] Para tener un chat en español selecciona en el menu "language"

[2] Despues selecciona los idiomas y tu ubicacion.

[3] Selecciona el fondo del chat, puedes utilizar una imagen de las que aparecen o de photobucket o subir la tuya.

[3] Por ultimo copia y pega el codigo encerrado y pegalo donde quieras que aparezca.

[+/-] Nuve de etiquetas con movimiento.

Y desde El Escaparate de Rosa nos llega un fantástico widget, que sirve nada mas y nada menos que para colocar nuestras etiquetas de una forma muy peculiar.

Se trata de unas lineas de código que toman las etiquetas de nuestro blog y las anima con un efecto de giro. Estos son los pasos a seguir para añadirlo:

[1]Primero entra en Edición de HTML entras ahi y pulsas la opción Expandir plantilla de artilugios
[2]Despues buscas(Ctrl + F) </b:widget>, y despues de esa linea colocas este código:

+/- Mostrar Código

<b:widget id='Label3' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "ANCHO", "ALTO", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xff0000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='18'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Rojo: Ancho y Alto, de la nuve(Pixéles o Porcentaje).
Azul: Color de fondo.
Verde: Color y tamaño de texto.

[3]Una vez modificado el código, haces clic en guardar.

[4]Entras a la pestaña Diseño y mueves la nube de etiquetas a donde quieras

[+/-] Fijar un post en el blog, sin fecha

Aqui les tengo este widget bastante bueno, surge de parte de un lector, que necesitaba fijar un post en la página principal sin tener que adelantar la fecha, pues aquí están los pasos a seguir.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1]Añadimos un gadget HTML/Javascript con el siguiente código:

+/- Mostrar Código

<h3 class="post-title entry-title">
<a href="http://URL_DEL_POST">TITULO_DEL_POST</a>
</h3>
<div class="postedby">
<div class="post-status">
<span class="post-author vcard">
Publicado por
<span class="fn">AQUI_QUIEN_LO_PUBLICA</span>
</span>
<span class="post-timestamp">
en
<a class="timestamp-link" href="http://URL_DEL_POST" rel="bookmark" title="permanent link"><abbr class="published"</abbr></a>
</span>.

      
<span class="date-header">FECHA_A_MOSTRAR</span>
</div>
<span class="post-comment-link">
<a class="comment-link" href="http://URL_DEL_POST#comments">FRASE_PARA_LOS_COMENTARIOS_DE_TU_BLOG:" y tu que opinas?"</a>
</span>
</div>

**SI QUIERES MOSTRAR ETIQUETAS AÑADE ESTO
<span class="post-labels">
Etiquetas:
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
</span>
**HASTA AQUI LAS ETIQUETAS

<div class="post-body entry-content">
<p>AQUI VA EL POST, O LA PARTE DE EL A MOSTRAR</p>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-backlinks post-comment-link">
</span>

[2]Ya solo hacemos clic en guardar

[Modificaciones]:

Rojo: Esto se modifica, según tu blog, o la entrada
Azul: Este texto se elimina.

[+/-] 5 puntos a tomar para crear tu logo

Crear un logotipo o un icono para tu web, no es tarea difícil, solo tienes que tener imaginación y una idea de lo que vas a hacer.

Y aquí te tengo 5 puntos a tomar en cuenta para crear un logo agradable a la vista.

[1] El logo de tu web no debe tener demasiados colores, no es vistoso un logo con 10 colores diferentes ¿o sí?.

[2] Si tienes en mente un logo con imagen y texto, la imagen no debe ser mas de tres veces el tamaño del texto(altura).

[3] Debes pensar para que fin estará dirigido, ¿cómo saberlo? Piensa en todas las partes en la que aparecerá. Cual de estas crees que será la mas productiva para tu web. No fue difícil ¿o sí?.

[4] Créalo para que este se vea bien en el fin mas productivo, para tu web.

[5] No debe ser muy grande, recuerda que lo van a utilizar en banners, si lo encoges perderá claridad al mostrarse.

[+/-] Escribir en pantalla con CSS

Si quieres escribir en pantalla, lo mismo pero en todas las páginas que estén vinculadas a una hoja de estilos, algo así como una plantilla o una variable en PHP o ASP, C++, o en fin...

[1]Lo que tienes que agregar es

un {X}:after
en vez {X}, escribiremos algo así como una clase: .footer, una id: #footer, o una etiqueta HTML: div, p. Estas servirán para llamar el contenido. Despues de haber escrito eso agregamos el contenido:

  p:after{
    content: 'un texto';
  } 

[2] Y para extraer el contenido, llamaremos el contenido de la siguiente manera:

<p/>

o si es con una clase solo agregamos el class="(clase)" dentro de la etiqueta, es decir de la siguiente manera:

<p class='CLASE'/>

Pero si es con una id solo agregamos el id="id" dentro de la etiqueta, es decir de la siguiente manera:

<p id='ID'/>

[+/-] Ampliar imágenes con mouse y Javascript

Un efecto bastante útil para aquellos donde el espacio es muy reducido o quieren aprovechar el espacio al máximo. Puedes hacer que al paso del mouse se abra otra imagen o cambie de tamaño, también se puede que al hacer un clic se amplíe o cambie de imagen y al hacer dos clics se reduzca o cambie por la imagen inicial.

Puedes usarlo como te des a entender incluso puede ser un menú, con dos imágenes y unos links, CSS y queda el menú, es un decir. puede ser lo que creas mejor para tu sitio.

[1] Solo añade el código donde lo quieras utilizar. Algunos ejemplos con sus respectivos códigos.

Con un clic, aumenta de tamaño y con dos se reduce.

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/"
width="50" 
onclick="javascript:this.height=100;this.width=100" 
ondblclick="javascript:this.width=50;this.height=50"/> 

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se agranda la imagen

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/" 
width="20" 
onmouseover="javascript:this.height=49;this.width=49" 
onmouseout="javascript:this.width=20;this.height=20"/>

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se abre otra imagen. Que tal puedes ver el mini choche, es solar y a solo 13 Euros Increible!

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe" 
onmouseover="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-PGoWNKbZ9GpPQAwK6grSQ5Q6JNjNZbUVJVRN3WiaIa7_mwyDKt8z1OoVNAVx67BTOxYm5J88NdjfEplazt0mPOuxPLliwYd34dQ33rd3DL7v_Ix0OPMVjrYhL4vLnDWVmVDVpMf5FqT/s400/mini-coche-solar.exe';" 
onmouseout="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe';"/>

El texto en color:
rojo es la url de la primer imagen.
azul es la url de la segunda imagen.

/!\ Las imágenes que estoy utilizando estan alojadas en blogger, pero puedes alojarlas donde quieras. Y de cualquier tamaño.

[+/-] Botón para regresar

Con estas lineas de código podrás hacer que el usuario, al hacer click se devuelva a la página anterior, por ejemplo, haces un blog y en el linkeas otro, al entrar al otro si tienes este botón se regresará al original o a la página que estaba viendo antes de hacer click.

Se trata de

un explorador de historial(no lo lee), unicamente toma la página mas reciente(o antes de la presente) y la linkea. Así de simple. Ejemplo:

Ejemplo

Para obtener el mismo efecto necesitas copiar y pegar el código donde lo necesites.

El código para el botón es el siguiente:

<input type="button" value="Volver" onclick="history.back()"><br/>

El código para el link es el siguiente:

<a style="cursor:pointer; cursor:hand;" onclick="history.back()">Volver</a>

[+/-] Diferenciar links

Este código es simplemente para diferenciar los tipos de archivo a los que tienes enlazados en tu blog. Los pasos son los siguientes.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1] necesitas entrar en Edición de HTML, no necesitamos expandir plantillas de artilugios solo necesitas colocar antes de ]]></b:skin> los códigos que necesitas.
[2]Los códigos son los siguientes:

a[href $='.zip'], a[href  $='.rar']{  
  padding-right: 18px;
  background: transparent
  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkXtHAtfUQazyWr73a3VOr3BePGtY23K-8uC6XHs3UvCAOMi_RWB5pAQoOaWxBui_aJFCh_V4d0NuT7w7I-Ww1zpEX1BMvf5RZyzNgKEPhN_oPtXnZNuDxim6klHO1qkJ14-mC5bDtSY/s1600/icono_zip.gif) no-repeat center  right;

El link se verá así

a[href $='.css']{  
  padding-right: 18px;  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSJ_WyLJo5AscGu3rGRlTngktirjixESp-qktlf6CZOeDtjgHxEI8zco064Fgl3s0LmlfLi_J8ajPrjDUC3qMeI06VVu4EiphD6knCr2l0nJGNHzzJIvVKbW3gteAI3l_avMNiw6TzAY/s1600/icono_css.gif) no-repeat center right;
  }

Asi se verá el link

a[href $='.txt']{  
  padding-right: 18px;  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsyxpIEwj8jRAJdYz22dltKi2-s-T7Y9sVvwzUuuTnY7ifjJYYwjNKaE6uHvkGDihDK3mo8Yg7fLmkA7-UYPHyLS0TW07BwlK6-nsdOD6p2i43QXjQoMkCyha8fPlNHoo7q7V5Eh6gSU/s1600/icono_textoplano.gif) no-repeat center right;
  }

El link se verá de esta manera

a[href ^="mailto:"] {
  padding-right: 18px;  
  background: transparent url(http://img177.imageshack.us/img177/9973/icon18emailxj4.gif)  no-repeat center right;  
  }

Asi se verá el link

.linkexterno {  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNRrVA7qFVRPqHpY7NQOf1fnzgT_9eBFmrWOyRJKCfRzxeVBAu8jlpXAb84B1E-poA4GrLYdlBZgBX9OkICH1BBtKw6r9eEGfNK295akUxNfBxH6RAxVrp7ScPsN4J01E9XAE0G7pTk8/s1600/icono-link-externo.png) no-repeat center right;
  padding-right: 14px;  
  }

Así

[+/-] Fijar imagen en el blog

Algo que suele ser muy útil en los blogs muy extensos, es una imagen de "subir arriba" que se quede estática mientras la página se desliza. Para así el lector se devuelva a donde comenzó

[1]para esto solo es necesario que coloques lo siguiente dentro de <body> y </body>:

<a expr:href='data:blog.url + "#"' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Ahora, si quieres una imagen que lleve a la página principal:

<a href='http://TUBLOG.blogspot.com' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

[+/-] Efecto en Imágenes tipo agua (en movimiento)

Hola pues regreso con otro generador, o modificador de imágenes. Bueno el caso es que puedes realizar a tus imágenes un efecto agua, en movimiento, comopueden ver aqui:

Como lo he logrado pues muy facil, nada mas y nada menos que con Wattereffect

[1] Subes la imagen.

[2] Le das clic con el botón derecho y le pones en guardar como.

[+/-] Buscador Interno

Si quieres un buen buscador interno aqui te tengo dos opciones, espero les gusten estos buscadores internos, que pueden trabajar en un blog de blogger facilmente:

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1] Añdimos un widget Html/Javascript con el siguiente codigo:

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Buscar" class="blue" type="submit"/>
</form>

[2]Y si quieres ponerle una imagen que remplaze el boton buscar:

<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
<input alt='Buscar' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/></form>

[+/-] Texto en Imágenes tipo graffiti

Pues esta es una web para descargar fonts, o tipos de letra. Pero además ofrece el recurso de probar la imagen. Bueno pues lo que haremos será

usar ese recurso para obtener imágenes interesantes. Los pasos los describo enseguida:

[1] Entra a FontReactor.com luego que te guste un tipo de letra escribes donde dice:

[2] Luego de que escribas el texto, haces clic en [previsulizar], se generará una imagen en formato PNG y la guardas en el PC.

Despues si quieres puedes agregarle un reflejo a la imagen

[+/-] Reflejo a Imagen

Con solo hacer unos clics puedes hacer que una imagen se pueda ver de esta forma.
Para hacer esto requieres

entrar a Reflectionmaker.com.

Si te preguntas además de donde saque esta imagen te puede interesar este otro post:
texto en imágenes tipo graffiti

[+/-] Texto que aparece y desaparece (relativamente)

Este código sirve para los usuarios de Blogger.com que permte ver diferentes palabras o código en el mismo lugar pero en diferentes páginas, como

por ejemplo: el link de inicio que está hasta abajo de cada página que no sea la principal.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Para agregar el efecto debes seguir estos pasos:

[1] Ingresas al panel de Edicion de HTML y expandes las plantillas de artilugios y donde quieras que el texto aparezca y desaparezca agrega este código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
aqui estará el código o lo que quieres que se vea en la página del post
<b:else/>
y qui estará lo que se verá en la página principal
</b:if>

[+/-] Letras Tipo Google

La popularidad Google en estos últimos años a crecido enormemente, por lo que surgen sitios web como FunnyLogo que nos permiten crear nuestro propio logo con el mismo aspecto del buscador de Mountain View.

Con esta web puedes crear la imagen para tu buscador tipo Google como esta:

Leer la entrada completa

[+/-] Dominios Gratis

/!\ Actualización Este servicio no funciona más, ahora es de pago. Y los dominios que se registraron tendrán que pagar también. Una lástima.

Si lo que quieres es un buen dominio y gratis puedes entrar en Dominiosfree.com, ahí te encontrarás con mas de 70 dominios como el que tengo yo, que es santyweb.mx.gs, con algo de esto gratis que mas puedes pedir, es gratis.

[+/-] Leer mas.... Nota Completa...

Algunos se preguntarán como hacer para tener un leer mas... o un ...Nota completa o en fin lo que sea conveniente, pues con estos pasos será posible.

/!\ Actualizacion(21/01/10): Se ha agregado un parche para solucionar los problemas que causa este hack en las páginas estáticas en el paso número 3

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1] Primeramente necesitas estar en Diseño>Edición de HTML>expander las plantillas de artilugios, después busca el código a continuación.
[3] Y lo reemplazas por este otro.

Antes de continuar si estás utilizando las páginas estáticas de Blogger y ya habías agregado este hack seguro tienes problemas con ellas. Para solucionar el que se muestre completamente dicha página, reemplaza el siguiente código: Por el código siguiente

[Modificaciones] puedes modificar el código en azul por la frase que se te haga mas coneveniente para colocar en tu blog.y con estos pasos estará listo el código y podrás activarlo en tus entradas encerrando el texto, imagenes, o o que sea de la siguiente manera:

[+/-] Aumenta tus comentarios

Este truco consiste en donde dice el número de comentarios despues de cada post, salga el numero de comentarios seguido de un link que dice

12 comentarios Agrega el tuyo!

, bueno pues para esto tienes que buscar

el siguiente código y añadir el codigo rojo:

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
        </b:if>
        </b:if>
      </span>

    <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'><font color='#ff0000'><blink>Agrega tu comentario</blink></font><b:else/><data:post.numComments/><font color='#ff0000'> comentarios, <blink>agrega el tuyo!</blink></font></b:if></a>
          </b:if>
        </b:if>

      </span>

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

lo que este en el lugar de este codigo rojo sustituyelo.

[+/-] DropCaps (Primera letra grande)

Dropcaps, este efecto siver para que la primera letra de algún post se vea mas grande que las otras y llame la atención de tus usuarios/lectores unicamente tienes que poner este código

CSS antes de ]]></b:skin>:

.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

Despues de eso ya instalado el dropcaps y para aplicarlo puedes escribir el siguiente código:

<span class="dropcaps">A</span>qui inicia la entrada

Que dará como resultado:

Aqui inicia la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada. Cuerpo de la entrada.

Para una mejor comodidad puedes entrar a configuración, del blog, luego haces clic en la oción formato, y hasta abajo esta el formato de las entradas ahi ingresas este código:

<span class="dropcaps">D</span>ropcaps

Esto servirá para que cada que quieras postear te salga automáticamente el código, así puedes ponerlo en cada entrada.

Espero haiga quedado claro el código, y que te haya servido.

[+/-] Mensajes en cajas redondeadas

Este es un truco en CSS bastante bueno pues ya que se pueden hacer este tipo de efectos con imagenes y es bastante dificil subir imagenes, encontrar el color adecuado, para cambiar el color, etc..

Pero gracias a este código lo podemoas hacer sion imagenes, si tienen blogger podrás ya antes haber visto esto y si no es algo como esto

Tus cambios se han guardado correctamente

para obetner este efecto solo tienes que añadir al final de la plantilla CSS de blogger que esta antes de ]]></b:skin> el siguiente código:

.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}


una vez hecho esto, solo pones esto otro en donde quieras ver la caja de mensaje redonda:
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>

Nota: Si quieres ver un mensaje de una linea, es decir un renglón o como lo llames, añades el código de arriba pero si el mensaje es mayor a una linea solo añades:

style="display:block;width:220px;" en :
<span class="cajaredonda">Tus cambios se han guardado correctamente</span>
Y quedará asi:
<span class="cajaredonda" style="display:block;width:220px;" >Tus cambios se han guardado correctamente</span>

si no haces esto y el texto es mayor a una linea se verá asi:
.cajaredonda {
display:inline;
border:1px solid #ff0000;
background-color:#ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#cecece;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 4px;
}

[+/-] Cajas de texto

Con un simple código, escribir, y entender, se pueden lograr cosas fantásticas, como la que les voy a presentar.

Es una caja de Texto, como ya las conocerán de diferentes partes, pues aqui les dejo

unas simples letras que hará volar la imaginación, y tambien puedes hacercon ellas lo que sea, como el formato, colores, las barras de desplazamiento aqui verán eso, el código es el siguiente:

<div align="center"><div style="BORDER-RIGHT: border-style: ridge; border-color: red; BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red; BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red; WIDTH: 100%;BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red; SCROLLBAR-FACE-COLOR: black; SCROLLBAR-HIGHLIGHT-COLOR: black; OVERFLOW: scroll;SCROLLBAR-SHADOW-COLOR: white; COLOR: #ff88e7; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #99cc33; SCROLLBAR-DARKSHADOW-COLOR: white; HEIGHT: 130px; BACKGROUND-COLOR: white"> <span style="span-family:tahoma;span-size:85%;color:#99cc33;"> <strong> <p align="center"> </p> </strong> </span> </div></div>

[Modificaciones]

<div align="center">

Esta linea hará que el texto se centre.

Pueden colocarse tambien: Left, Rigth.



BORDER-RIGHT: border-style: ridge; border-color: red;

Borde de la derecha.

Pueden colocarse tambien: colores en ingles




BORDER-TOP: border-width: 4px; border-style: ridge; border-color: red;

Borde de arriva.

Pueden colocarse tambien: colores en ingles y puede modificarse el grosor


BORDER-LEFT: border-width: 4px; border-style: ridge; border-color: red;

Borde de la izquierda.

Pueden colocarse tambien: colores en ingles y puede modificarse el grosor



WIDTH: 85%;

Ancho de la caja

Pueden colocarse tambien: pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado



BORDER-BOTTOM: border-width: 4px; border-style: ridge; border-color: red;

Borde de abajo.

Pueden colocarse tambien: colores en ingles y pueden colocarse el grosor



SCROLLBAR-FACE-COLOR: black;

color de barras de desplazamiento.

Pueden colocarse tambien: colores en ingles



SCROLLBAR-HIGHLIGHT-COLOR: black;

color de barras de desplazamiento(haciento clic en ellas).

Pueden colocarse tambien: colores en ingles



SCROLLBAR-SHADOW-COLOR: white;

color de brillo de barras de desplazamiento.

Pueden colocarse tambien: colores en ingles



COLOR: #ff88e7;

color de texto.

Pueden colocarse tambien: colores en ingles



SCROLLBAR-3DLIGHT-COLOR: #ddaaff;

color de fondo de barras de desplazamiento.

Pueden colocarse tambien: colores en ingles




SCROLLBAR-ARROW-COLOR: #99cc33;
color de flecha de barras de desplazamiento.

Pueden colocarse tambien: colores en ingles



SCROLLBAR-DARKSHADOW-COLOR: white;

color de sombra de barras de desplazamiento.

Pueden colocarse tambien: colores en ingles



HEIGHT: 100px;


Largo de la caja
Pueden colocarse tambien: pueden colocarse de 0 a 100% o de 0px hasta el largo deseado



BACKGROUND-COLOR: white

Color de fondo de caja

Pueden colocarse tambien: colores en ingles



<span style="span-family:tahoma;span-size:85%;color:#99cc33;">

Tamaño de texto y color

Pueden colocarse tambien: pueden colocarse de 0 a 100% o de 0px hasta el grosor deseado y colores en ingles



<strong>

hace que el texto este en negrita

en este no se puede hacer nada, si no mas que borralo si se desea.

[+/-] Redirección

Script para redireccionar el blog.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Este script lo puedes utilizar para cuando añadas algo a tu blog/página, este se desordene o se desplome. Bueno, pues para esto esta este script, solo entras en Edicion de HTML y sin expandir la plantilla de artilugios, añades

este código despues de <body>.

Y lo redireccionas a una página, web, o blog con un mensaje de "en construcción" o un mensaje que te guste para exlicarlo.

    <script>
    location.href='http://URL DEL BLOG SECUNDARIO';
    </script>

Esto hará que cuando entren a tu blog el navegador les lleve directamente al blog en "Construcción".
Mientras tu sigues como siempre arreglado el blog "real", eso si, acuérdate de retirar el script cuando termines el trabajo en tu blog "real".

[+/-] Barra de navegación Horizontal

La barra de navegación horizontal le permite cambiar de pagina, funcionan como pestañas, son de diferentes colores y pueden ir al link que usted prefiera.

Este código funciona con cualquier plataforma que funcione con HTML y CSS, aqui les pongo las intrucciones de como se aplica este código.
Para ver un ejemplo de estas barras de navegacion horizontal visite mi otro blog

.

El código es el siguiente:

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

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

Solo sustituye las palabras en rojo por sus links y titulos de cada pestaña (Puede Agregar las que quiera).Si estas en blogger entra a Edición de HTML y selecciona la casilla Expandir plantillas de artilugios ya aqui busca la siguiente linea, y justo antes de esto el código anterior:

<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 solo elijan un color de pestañas y coloquen el código antes del anterior:

/* 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:#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 */

/*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:#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 */

/*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:#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 */

[+/-] Página de contacto

Hola pues como a mi me gusta saber a que se dedican los autores de las páginas web etc.. pues aqui les dejo este truco de contacto.

primero tienes que ir a esta página web (que creará por ti un formulario para enviarte un correo electrónico directamente a tu correo)

: emailmeform

despues de entrar tienes que crear una cuenta en sign un for free!!, ya una ves con cuenta en emailmeform te vas a panel de control y haces clic en la opcion Create new form despues tienes que llenar los formularios, despues de ahi tienes que llenar el tamaño de los formularios , despues de ahi veras tu formulario.

arriba de este estará un link de HTML code lo abres y se verá tu código el cual será asi como 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, si estas en blogger tendras que desactivar los saltos de linea en "configuracion" y despues en "formato" una vez desactivados podras pegar los codigos en una página o entrada en la cual desees que se pongan en contacto con tigo.

[+/-] Insertar video en blogs

Para insertar un video en un blog solamente si el video tiene los suficientes derechos se necesita copiar el código embed que biene junto a otro (URL) de los videos es algo asi como
este:

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

En las letras rojas debes insertar la url que encontraste dos veces en el código embed
se verá asi

[+/-] Icono de feed en etiquetas

Este codigo lo que hace es poner un icono de feed a cada etiqueta de blogger, de igual manera que las entradas Atom, para ingresar este código es necesario tener los widgets activados (labels). si no lo están, activarlos en configuración, si ya esta comencemos.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1] Debes ingresar a Edición de HTML y seleccionar la opción Expandir plantillas de artilugios.
[2] Ahí buscar el siguiente código:

(<data:label.count/>)

[3] En seguida de este poner:

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

[Modiicaciones] El texto color rojo es la url de la imagen la cual puede ser cambiado por:

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

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

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

lo guardas y listo!!!!!!!!!

[+/-] Remover la barra de Blogger

Para remover la barra de blogger que muchas veces ayuda, pero que a veces molesta. Es necesario ingresar en Edición de HTML y sin expandir plantillas de artilugios, una vez ahí deberás buscar la siguiente linea de código

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

]]></b:skin>
antes de esta linea de código debes insertar esta otra:

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

Y con esto queda resuelto el problema sobre el navbar de blogger

[+/-] Politica de Privacidad

This Privacy Policy governs the manner in which SantyWeb collects, uses, maintains and discloses information collected from users (each, a "User") of the http://www.santyweb.blogspot.com/ website ("Site"). This privacy policy applies to the Site and all products and services offered by SantyWeb.

Personal identification information

We may collect personally identification information from Users in a variety of ways, including, but not limited to, when Users visit our site, subscribe to the newsletter, fill out a form, and in connection with other activities, services, features or resources we make available on our Site. Users may be asked for, as appropriate, email address, mailing address. Users may, however, visit our Site anonymously. We will collect personal identification information from Users only if they voluntarily submit such information to us. Users can always refuse to supply personally identification information, except that it may prevent them from engaging in certain Site related activities.

Non-personal identification information

We may collect non-personal identification information about Users whenever they interact with our Site. Non-personal identification information may include the browser name, the type of computer and technical information about Users means of connection to our Site, such as the operating system and the Internet service providers utilized and other similar information.

Web browser cookies

Our Site may use "cookies" to enhance User experience. User's web browser places cookies on their hard drive for record-keeping purposes and sometimes to track information about them. User may choose to set their web browser to refuse cookies, or to alert you when cookies are being sent. If they do so, note that some parts of the Site may not function properly.

How we use collected information

SantyWeb collects and uses Users personal information for the following purposes:

• - To improve our Site
  We continually strive to improve our website offerings based on the information and feedback we receive from you.
• - To improve customer service
  Your information helps us to more effectively respond to your customer service requests and support needs.
• - To administer a content, promotion, survey or other Site feature
  To send Users information they agreed to receive about topics we think will be of interest to them.
• - To send periodic emails
  The email address Users provide for order processing, will only be used to send them information and updates pertaining to their order. If User decides to opt-in to our mailing list, they will receive emails that may include company news, updates, related product or service information, etc. If at any time the User would like to unsubscribe from receiving future emails, we include detailed unsubscribe instructions at the bottom of each email or User may contact us via our Site.

How we protect your information

We adopt appropriate data collection, storage and processing practices and security measures to protect against unauthorized access, alteration, disclosure or destruction of your personal information, username, password, transaction information and data stored on our Site.

Sharing your personal information

We do not sell, trade, or rent Users personal identification information to others. We may share generic aggregated demographic information not linked to any personal identification information regarding visitors and users with our business partners, trusted affiliates and advertisers for the purposes outlined above.We may use third party service providers to help us operate our business and the Site or administer activities on our behalf, such as sending out newsletters or surveys. We may share your information with these third parties for those limited purposes provided that you have given us your permission.

Third party websites

Users may find advertising or other content on our Site that link to the sites and services of our partners, suppliers, advertisers, sponsors, licensors and other third parties. We do not control the content or links that appear on these sites and are not responsible for the practices employed by websites linked to or from our Site. In addition, these sites or services, including their content and links, may be constantly changing. These sites and services may have their own privacy policies and customer service policies. Browsing and interaction on any other website, including websites which have a link to our Site, is subject to that website's own terms and policies.

Changes to this privacy policy

SantyWeb has the discretion to update this privacy policy at any time. When we do, we will revise the updated date at the bottom of this page. We encourage Users to frequently check this page for any changes to stay informed about how we are helping to protect the personal information we collect. You acknowledge and agree that it is your responsibility to review this privacy policy periodically and become aware of modifications.

Your acceptance of these terms

By using this Site, you signify your acceptance of this policy. If you do not agree to this policy, please do not use our Site. Your continued use of the Site following the posting of changes to this policy will be deemed your acceptance of those changes.

Contacting us

If you have any questions about this Privacy Policy, the practices of this site, or your dealings with this site, please contact us at:
SantyWeb
http://www.santyweb.blogspot.com/

Página de Contacto

This document was last updated on January 20, 2011