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