CÓMO PONER UN FONDO TRAS EL MENÚ DE PÁGINAS

Este efecto lo puedes ver claramente en el menú de páginas de mi blog. Esos circulitos rosas de fondo. Pues bien con este tutorial puedes poner la imagen que quieras.

Necesitas tener lo que es la "base" del fondo, y al igual que con los fondos de los blogs, ha de ser "seamless". O sea, tienes que tener en cuenta que se va a repetir. Puedes buscar en google imágenes hasta encontrar el que te guste.

Luego añades en CSS:

.tabs-inner .widget ul {
background: url(URL fondo) repeat-x;
height: 45px;
/*pdb*/
}

Poniendo en el paréntesis la URL de la imagen que vas a usar como fondo, y cambiando el 45 (altura) por el alto de tu imagen. Para saber la URL de una imagen yo la subo en una entrada borrador, luego pinchas en ella con el botón derecho del ratón y le das a copiar la ruta del enlace. Despúes lo pegas en el paréntesis ese sustituyendo (URL fondo) por lo que hayas copiado.

Si no quieres que se repita (porque no es un patrón seamless o porque te resulta más fácil diseñarlo así), deberás ponerle también el ancho de lo que mide (donde dice width).

Lo único que tienes que tener en cuenta que entonces si cambias un día el ancho del blog, deberás repetirlo, mientras que de la otra manera puedes cambiarlo y seguiría quedando bien.

Es probable además que debas ajustarlo un poco, moviéndolo hacia derecha o izquierda. Yo ya he puesto margin-left en el código para moverlo un poco, pero deberás cambiar el -40 por lo que necesites:

.tabs-inner .widget ul {
background: url() repeat-x;
height: 49px;
width: 943px;
margin-left: -40px;
/*pdb*/
}

Usa el segundo código sólo en caso de que la imagen no sea un patrón seamless. Osea todo el rato el mismo patrón, no se si me entiendes. No es lo mismo un fondo de estampado zebra que la foto de alguien. Espero que con esto me entiendas. El fondo zebra sería un fondo seamless. ok?

Espero que te haya gustado.

Besos,

CÓMO CAMBIAR EL CURSOR DEL BLOG

La forma más fácil y rápida es ir a una página que te los proporciona. Ellos hacen todo y tu sólo copias un codiguito.

• Vas a: cursors4u
• Buscas a través de sus categorías el cursor que te gusta
• Y pinchas en él, para que te lleve a la página de ese cursor en concreto. 
• Y ahí pinchas en la pestaña que pone Blogger/Blogspot

• Entonces ahí seleccionas y copias todo el texto de la SEGUNDA cajita. No la que ves justo ahí, sino la que está un poco más abajo, donde dice New Blogger/Blogspot interface.
• Vas a la plantilla HTML y bajas hasta el final del todo, ya que hay que pegarlo justo antes de la etiqueta </html>
• Guardas y ya está.

Como sabes en internet hay muchas más páginas como esta, con sus propios cursores y tutoriales para ponerlos. Pero yo he usado esta y por eso te la explico aquí.

Besos,

CÓMO NUMERAR LOS COMENTARIOS EN BLOGGER

Esto es básicamente para que cada comentario lleve su númerito según el orden de escritura. Si alguien responde luego a un comentario que está más arriba por ejemplo, se re-enumeran.

Ej:

1.Blanca
2.Celia
3.María

Si yo respondiera por ejemplo a Blanca:

1.Blanca
   2.Cristina (respuesta)
3.Celia
4. María

Lo único que tienes que hacer para que a partir de ahora te salgan numerados, es añadir esto en CSS:

.comment-thread ol{

counter-reset: contarcomentarios;

}

.comment-thread ol ol {

counter-reset: contarbis;

}

.comment-header:before {

content: counter(contarcomentarios,decimal)".";

counter-increment: contarcomentarios;

float: left;

padding-right: 4px;

}

Espero que te sea útil.

Besos,

CÓMO PONER EL TÍTULO DEL POST AL LADO DE LA FECHA EN EL BLOG

Es muy fácil.

Básicamente lo único que tienes que hacer es mover el título un poco. Un poco hacia la derecha, y un poco para arriba....

¡Ya lo tienes al lado de la fecha!

Tras hacer eso me quedaba muy cerca el texto del post así que le he puesto un poco de espacio entre la fecha/título del post y el texto del propio post.

Para hacer estas tres cositas, añades en CSS:


h3.post-title { /*pdb*/
margin-top: -50px !important;
margin-left: 70px !important;
margin-bottom: 35px !important;
}

Puedes ajustar los valores (números) a lo que necesites, ya que dependerá de la fuente que uses y otras cosas.

He hecho el ejemplo en mi blog personal y como me gustaba el resultado se lo voy a dejar así. Por si te interesa este es mi blog personal ;)
Si te quieres hacer seguidor@ o comentar algo... eres bienvenid@.

Espero que lo uses.

Besos,

CÓMO CAMBIAR LA FUENTE DE LOS COMENTARIOS

Lo que tienes que hacer es pensar qué fuente quieres poner, y añadir en CSS:
 

.comments-content .comment-content {

font-family: Impact; /*pdb*/

}

Sustituyendo Impact por el nombre de la fuente que quieras.

Para que este post no sea tan corto, voy a contarte cómo cambiar, en lugar del texto de los comentarios, lo que es el usuario, es decir, el nombre que sale justo encima del comentario. Sería:

.comments-content .user {

font-family: Impact; /*pdb*/

}

Ya sabes, lo rosita lo cambias por la fuente que quieras.

Espero que te haya gustado. ;)

Besos,

CÓMO PONER UN FORMULARIO DE CONTACTO EN EL BLOG

Yo te voy a proponer esta opción porque es la que uso y la que considero más fácil, pero si te gusta otra opción en Google hay muchas.

• Entras en Foxyform.
• Y en la zona de la derecha, donde dice Sus opciones (paso 1: configuración) eliges qué casillas quieres que muestre:

Por defecto te vienen marcadas Apellido e E-mail.

• Pero verás que si pinchas en Mostrar más opciones, puedes elegir otras cosas también. Puedes poner por ejemplo Nombre, E-mail y Asunto por ejemplo. 
• Además ves que puedes marcar a la derecha si es un campo obligatorio o no.
• Entonces pasas al Paso 2: Personalización. Ahí puedes cambiar los colores, la fuente y el tamaño de la fuente también.
• Y ya el paso 3 es meter tu dirección de correo electrónico.

Porque lo que pasará es que cada vez que alguien rellena tu formulario, automáticamente recibes un email. No como en Google Docs por ejemplo, que se van a una hoja de cálculo.

• Escribes el código captcha anti-spam.
• Y pinchas en Crear formulario.
• Entonces te sale esto:

 

• Y ya lo único que tienes que hacer es copiar ese código y pegarlo en tu página del blog.
• Lo pegas en la vista HTML, y cuando lo publiques, se verá (en la vista Redactar no se ve, verás que pone foxyform).

Nota: por defecto viene un poco estrecho. Fijate que pone 350 px.

Pues sin más, en la vista HTML una vez de que lo has pegado, le pones un valor un poco mayor. 500 o lo que quieras.

Espero que te sea útil.

Besos,

CÓMO PONER LA FECHA REDONDEADA EN BLOGGER

Esto puede darle a tu blog un toque bastante especial.

Tienes que añadir en CSS:

.date-header span {
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}

Nota: 

A) Eso sí, el padding ese es el que te he puesto de ejemplo, pero necesitarás cambiarlo dependiendo del tamaño de tu fuente.

Es decir, si la fecha la tienes con una fuente más grande, necesitarás un círculo más grande, y por tanto deberás ajustar el padding.

El primer número (23 px en el ejemplo) es el margen/espacio que le das arriba. Es decir, una fecha con el primer número a 20 o 30 y los demás a cero, aparecerá con color por arriba pero no en el resto de los lados.

El segundo valor es el de la derecha. El siguiente el de abajo. Y el último el margen de la izquierda.

Entonces, para que sea un círculo perfecto, obviamente arriba y abajo debes ponerle el mismo valor, o sino no será un círculo. Y a un lado y al otro lo mismo.

B) Y luego el 100% es lo que lo redondea del todo. Piensa que la fecha por defecto, si le pones color de fondo, es cuadradita.

A 0% es totalmente cuadrada y basándote en eso puedes ir probando diferentes opciones hasta encontrar tu redondel. ;)

Si te queda muy pegado al título del post sólo tienes que usar también este código, poniéndolo justo debajo pero con al menos 2 intros de separación.

h3.post-title {
padding-top:1em;
/*pb*/
}

Puedes cambiar el 1em por un valor mayor o menor dependiendo de si quieres darle más o menos espacio entre el círculo y el título del post.

Además también le puedes dar valores decimales, no sólo números enteros. (0.5em)

Espero que te haya gustado.

Besos,

CÓMO AÑADIR UN BORDE ALREDEDOR DE LA COLUMNA EN BLOGGER

Lo advierto, hay blogs que quedan mejor sin el pero si te gusta y consideras que tu blog es menos soso con esto pos se lo pones y listo. Yo sólo te lo digo por si no quieres tener un blog muy recargado. 

Te lo voy a explicar paso por paso para que no te pierdas:

• Plantilla
• Editar HTML
• Y buscas pulsando (ctrl + f) (dentro del cuadro de los códigos, no fuera)

content-outer

Un poco más abajo verás que pone:

margin-bottom: 1px;
}

Esto sería un ejemplo, no es el definitivo. Sólo te digo que son en total 4 líneas pero no te apures, que es muy fácil.

border-right: 7px solid #000000

Ahora te lo explicaré paso a paso para que lo entiendas y puedas hacer tu misma tu código.

Quiere decir que me va a salir una línea de 7px de ancho en la derecha de la columna y en color negro.

1) border-right:

Significa obviamente que es el borde de la derecha.

En las siguientes líneas, una detrás de otra, deberías ir añadiendo los siguiente bordes.

Como la primera dice right (derecha).
La siguiente línea será igual pero diciendo left (izquierda).
La siguiente top (superior) - aunque si tienes barrita de Blogger arriba no hace falta.
Y la siguiente bottom (inferior).

2) 7px

Es el ancho de la línea. Obviamente cuanto mayor sea el número que le pongas, más gordita se verá la línea y viceversa.

3) solid

Quiere decir que es una línea sólida. Puedes cambiar esto por otras cosas.

En realidad se pueden poner bastantes cosas, pero yo recomiendo que si vas a poner un borde sea:

solid (línea lisa)
dashed (con guiones)
dotted (con puntitos)
double (doble)

4) #0000000

Es el color de la línea. Esto ya lo conoces. Y ya he explicado en post anteriores cómo saber el color que quieres. No lo repito porque es un tostón repetir siempre lo que ya he explicado varias veces. No te lo tomes a mal pero tienes que comprender que después de haberlo mencionado varias veces yo pienso que ya deberías saber cómo se hace.

Esto sería un modelo ya hecho. Ay, pillinas ;) cómo sé que algunas no os habéis enterado y que queréis un modelo para copiar y modificar a vuestro gusto. Pos no pasa nada porque aquí está vuestra solución.

border-right: 3px solid #fdb8b6;
border-left: 3px solid #fdb8b6;
border-top: 3px solid #fdb8b6;
border-bottom: 3px solid #fdb8b6;

No quites los puntos y comas porque si no el código no vale nada y no te sale.

Puedes ir probando diferentes combinaciones e ir dando a Vista previa hasta que tengas el reborde como te guste.

• Y una vez que ya te has decidido le das a guardar plantilla y listo.

Como ves es increíblemente fácil tener un diseño bonito y con apariencia profesional una vez de que has aprendido los básicos.

Besos,