31 enero 2016

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,


27 enero 2016

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,

23 enero 2016

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,


19 enero 2016

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,


15 enero 2016

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,

12 enero 2016

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,



Related Posts Plugin for WordPress, Blogger... Light Pink Pointer