Mostrando entradas con la etiqueta post. Mostrar todas las entradas
Mostrando entradas con la etiqueta post. Mostrar todas las entradas

martes, 14 de septiembre de 2010

Efecto marquesina en barra de título.

Tu barra de titulo en la pestaña del navegador.

Ved también atributo color.

MARQUESINA EN BARRA DE TÍTULO

En más de una página web o blog habréis visto que el texto que aparece en la barra de título tiene un efecto de marquesina, es decir, se desplaza con movimiento horizontal.

Esto lo podéis hacer utilizando un script cuyo código os escribo a continuación:

<script LANGUAGE="JavaScript">
var txt="     marquesina en la barra de titulo     ";
var espera=90;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</script>

Este código lo tendréis que pegar entre las etiquetas <HEAD> y </HEAD> de vuestra web o blog.

Solo tendréis que sustituir el texto "marquesina en barra de título" por el texto que queréis que aparezca en vuestra página web o blog.

Recordad que si lo váis a hacer en un blog de Blogger, para acceder al código HTML de la plantilla tendréis que pulsar sobre la ficha Diseño -> Edición de HTML y, como digo siempre, antes de realizar cualquier cambio en la plantilla es muy importante que hagáis una copia de seguridad de la misma por si hubiese alguna complicación.

lunes, 6 de septiembre de 2010

Enmarcar post y gadget en la barra lateral.

Enmarcar cada post por separado

[1] Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código:

.post { 

[2] Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:

border:1px solid #000;

El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.
Ve tipos de bordes en blogger.

[3] Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:

padding-left: 10px;

El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:

border-bottom:0px dotted $bordercolor;

[4] Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:

background: #ddd;


Enmarcar los widgets en la sidebar

[1] Buscamos ahora esta parte del código:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


[2] Tendremos que separar antes de nada el código de los widget de entradas y de la sidebar, de tal manera que esa parte nos quede así:

.sidebar .widget{

}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


[3] Añadimos justo debajo de .sidebar .widget{ las mismas líneas de código que añadimos en las entradas, más una nueva que controlará la separación entre cada widget:

.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}


[4] Igual que antes, para los post, si queremos darle color al fondo de cada widget, hemos de añadir una nueva línea al código anterior (siempre antes de la llave de cierre }:

background: #ddd;
Captura de ejemplo



Nota: En ambos ejemplos el color de fondo es gris (#ddd;) pero podemos cambiarlo por el que nos guste.

Actualización
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código en cada sección, es decir, en .post { y en .sidebar .widget{, teniendo en cuenta que se verá correctamente en Firefox, ya que en IExplorer las esquinas se verán cuadradas:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;

Programar fecha y hora publicación en blogger.

A veces sucede que no vamos a estar disponibles durante un día (o mas) para escribir en nuestro blog. En casos así, lo ideal sería escribir entradas anticipadamente, y dejarlas programadas para que se publiquen en una fecha y hora determinada. Seguramente algunos puedan encontrarle otras utilidades…


Para programar las entradas solo hay que (ya escrita la entrada y todavía dentro del “Editor de posts”) hacer click en “Opciones de entrada” y configurar los campos de “Fecha y hora de la entrada”, configurar justamente eso. Luego click en “Publicar”, y listo!
Automáticamente vemos la lista de entradas y el siguiente mensaje: