Hacker of the Web
Tus ideas en código!...y mas

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


entrar en la pestaña de diseño


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

Imagen


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

Imagen

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

Pasa el Cursor para ver los Cambios!! 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.

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

Agregar dos o más gadgets en el header 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>
Agregar dos o más gadgets en el header[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.

Entradas más recientes Entradas antiguas Página Principal
Arriba