[+/-] 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.