Cómo poner el pie de la entrada con movimiento

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Post-footer (pié del post) en movimiento

Hace tiempo publiqué cómo hacer texto en movimiento, y, para ello, utilizábamos la propiedad marquee.

Ayer por la tarde estuve investigando un poco por las plantillas de blogger y se me ocurrió que podría aplicar la propiedad de movimiento al pié del post para hacerlo más llamativo.

Por suerte el resultado fué muy satisfactorio.

Asi que si deseas el post-footer de tu blog en movimiento sigue estos sencillos pasos...

Diseño>edición HTML>expandimos artilugios

Busca esta línea:

<div class='post-footer'>

Y pega esto justo encima:

<marquee scrollamount='3' style='border: 1px solid #cccccc; padding: 2px; background-color: #ffffff;'>

scrollamount='3' indica la velocidad a la que se moverá el texto. Puedes cambiar la velocidad (3) por la que quieras.

Unas líneas más abajo verás esto:

</div>
</div>
</b:includable>

Ahora pega la etiqueta </marquee> en medio de </div> y </div> de manera que quede así:

</div>
</marquee>
</div>
</b:includable>

Haz vista previa y comprobarás que el pié del post está en movimiento. ^_^

Por último guarda cambios.

Read More

Cómo agregar tres columnas sobre el footer

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Tres columnas en el footer (pie de página)

Si quieres tener un espacio más abierto, más personal, tres columnas en las que puedes poner directorios, direcciones o las típicas cosas que no te gustan poner en la sidebar, puedes seguir estos simples pasos y aplicar al pie de tu blog tres lindas columnas...

*Debes asegurarte de que no tienes ningún gadget (elemento de página) en el footer del blog, si tienes alguno muévelo a la sidebar. Después podrás volverlo a colocar.

Diseño>edición HTML>sin expandir artilugios

Busca este pequeño bloque:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

¿Ves la línea que está en rojo? solo tienes que borrarla y pegar esto en su lugar:

<div id='footer-columna-contenedor'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width:30%; float: right; margin:0; text-align:left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#000000' width='90%'/>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'/>
<div style='clear:both;'/></div>
</div>
</div></div>

Busca la etiqueta ]]></b:skin> y encima le pegaremos:

#footer-columna-contenedor {
clear:both;
}

.footer-columna{
padding:10px;
}

En el código hay una línea que separa las tres columnas del footer, es una línea negra, y la línea de código que la representa es esta: <hr align='center' color='#000000' width='90%'/> si quieres que no aparezca la línea separatoria, borra la línea de código y listo. Si por el contrario quieres cambiar el color, puedes hacerlo en color='#000000'.

Guardamos plantilla.

¡En Diseño verás que hay tres columnas en las que puedes añadir más gadgets!

Nota:
El truco no se ve en vista previa, pero puedes hacer vista previa para comprobar que tu blog carga de manera correcta.

Y así quedaría (mira las tres columnas en el pié del blog)...

Read More