Cómo poner una puntilla a los lados del blog

Probablemente, la pregunta que más veces he recibido a lo largo de estos años de blog es cómo poner una puntilla como la mía. Las personas que tienen el curso de html y css ya sabrán hacerlo, porque realmente es facilísimo, pero... para las que no lo tienen... ahí va este tutorial.

En cualquier caso, os recomiendo muy mucho que lo compréis. Me resulta imposible hacer un tutorial por cada cosa que se puede hacer en un blog, y además, ya conocemos el dicho... Da a una persona un pez y comerá un día, enséñala a pescar, y podrá comer todos los días de su vida :)


El curso de html y css enseña, de manera super fácil y amena, cómo escribir en html y css. De este modo, no deberéis tener que seguir tutoriales. Miradlo de esta manera: si vamos a un país extranjero y no sabemos el idioma, podemos buscar en nuestro librito de frases cómo decir ciertas cosas: "¿Cuánto cuesta un billete a Bath?", "¿Podría hablar más despacio, por favor?", "Una mesa para dos, por favor", "¿Dónde están los baños"?, etc.

Ahora bien, si sabemos el idioma, no necesitaremos buscar frases hechas que justo digan aquello que queremos, ¡porque sabremos construir nuestras propias frases!

Por suerte, además, aprender html y css no es tan difícil como aprender francés o inglés (y fijaros que he dicho dos idiomas fáciles, no alemán o chino o ruso!)

Una vez hecho el curso y con un poco de práctica y sentido común, podréis hacer de todo. Desde poner una puntilla o personalizar el aspecto de cualquier gadget hasta crear una página con la estructura que queráis, como he hecho en Hei Coco para las páginas de producto.

Podéis leer más sobre él pinchando aquí y podéis comprarlo directamente pinchando aquí :)

Poner la puntilla

Ahora... para poner la puntilla.... redoble de tambores...

Lo único que tenéis que hacer es:

1) Preparar una puntilla o bordes que vayan de lado a lado, como esta mía.

Recordad que ha de ser seamless, de forma que cuando se vaya repitiendo a lo largo (vertical) de todo el blog, lo de arriba cuadre con lo de abajo.


2) Alojarla en algún lugar (yo siempre alojo todo en el propio blogger) para poder tener la url a mano

3) Añadir esto en css

.content-inner {
background: url(URL FONDO) repeat-y;
margin: 0 auto;
}

Si veis que se os corta por algún lado, añadir en ese código esto y jugad con la anchura que necesitéis cambiando el 1080.

width: 1080px;

Nota. Hay que añadir esta grase antes del bracket de cierre.

4) Eso os hará esto:


De modo que debemos arreglar dos cosas: a) el espacio que deja por arriba (y abajo) del blog, de modo que la puntilla "toque" la pantalla, y b) que tanto la barrita de pestañas como todo el texto del blog, está por encima de la puntilla.

a. Escribid esto en css y ajustar según necesitéis, pero en principo eso suele ser lo que yo pongo

.content-inner {
margin-top: -45px !important;
margin-bottom: -40px !important;
}

Ahora lo tendréis así:


b. Escribir esto en css, ajustando los números según necesitéis.

#Blog1 {
margin-left: 25px !important;
}

.sidebar {
margin-right: 35px !important;
}

Ahora ya lo tendréis así:


Por último ya solo os quedará ajustar la barrita del menú, que como veis también sobresale por la puntilla. Esto se arregla así:

#PageList1{
margin-left: 30px !important;
margin-right: 30px !important;
}

Lo único, puede que tengáis que ajustar esos números dependiendo de cómo de ancha o estrecha sea vuestra puntilla.

Voilà, ya lo tenéis, un blog con una puntilla monísima:


Notas

Dependiendo de vuestro diseño de blog y/o cambios que le hayáis hecho en el pasado, os pueden pasar mil cosas.

Por ejemplo, yo he tenido que poner PageList2 en este último paso porque es un blog que he usado muchas veces y parece ser que borré el gadget de páginas y luego puse otro.

La razón por la que no me gusta hacer tutoriales es porque luego me abrasáis a comentarios e emails diciendo que no os funciona y que a ver por qué, a ver si miro vuestro blog, etc.

Entonces, de verdad os pido, comprad el curso de html y entended lo que hacéis. Solo de ese modo conseguiréis no tener problemas o dudas cuando un tutorial no os salga.

Espero que os haya gustado.

Besos,


Blogger | Email | RSS | Bloglovin | Feedly

Os puede gustar también:

1. Cómo poner un fondo tras el menú de pestañas

Fuente: este post proviene de Personalización de Blogs, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas:

Recomendamos

Relacionado

Tutoriales Blogging Estilos

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

Bueno, creo que tras casi 3 años... quizá es hora de contestar a la pregunta que más veces he recibido en la historia de mi blog: cómo poner un borde, reborde, puntilla, o cómo queráis llamarle, alrededor de la columna de vuestro blog, tipo como tengo yo... Concretamente vamos a ver cómo poner una puntillita así: O bueno, cuando digo puntilla quiero decir, cualquier tipo de reborde. Estoy acostum ...

Tutoriales Blogging Tips

Una de las partes que considere importantes en cuanto al diseño y la estructura de mi blog, fueron las imágenes. En la imagen de arriba puedes observar dos ejemplos de lo que quiero mostrarte hoy, #1 vemos como la imagen es mucho mas pequeña que la entrada/post, cuando insertamos varias imágenes todas con una medida diferente, nuestras entradas y por lo tanto el mismo blog tendrá un aspecto deseq ...

Blogging Tutoriales

Una de las cosa que más me gustan de Blogger, es la capacidad de insertar y personalizar un formulario de contacto, sin la necesidad de recurrir a servicios como JotForm o Foxyform. Sin duda, un gran acierto, pues muchos de estos servicios tienen una limitación en cuanto a la cantidad de mensajes que puedes recibir en tu correo. Añadirlo es bastante sencillo, pues esta función se trata de un gadg ...

Blogging

Si eres nuevo en Blogger, entonces te habrás topado con una herramienta para nada particular, la cual está presente en todo lugar donde exista un campo para escribir y un editor de texto. ¿Qué es un blockquote o texto citado? Ya sea un documento de Word o el mismo editor de entradas de Blogger o WordPress, el blockquote o cita es una herramienta que sirve para enmarcar o destacar cierta parte imp ...

general social

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

propuestas

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

Blogger

Las que me siguen por Snapchat (ah, usuario blancabalzola) ya saben que llevo días tratando de ir haciendo todas aquellas cosas que tenía en mi lista interminable de tareas para hacer. Miles de cabos sueltos del blog, y del no blog, que me quiero quitar para comenzar de cero totalmente, cuando abra mi nuevo negocio. Sé que os debo un post de eso además, y lo escribiré, espero, pronto :) Mientras t ...

Tengo una semana de locos, pues con el dinero ganado tras las ventas generadas por la cuenta de instagram, estamos llevando a cabo una campaña de anuncios y hay que monitorizarlo muy bien para no perder dinero. Además, ya os contaba que comienzo otro nuevo proyecto, y no sé si os he dicho o no, que estoy preparándoos otro curso (así que atentos al blog la semana que viene). Pero eso, que de locos. ...

internet

A veces ocurre que debido a la configuración de nuestra plantilla en Blogger, nuestro blog o sitio web se puede ver en algunos navegadores y en otros no. Sucedió hace algunas semanas que uno de nuestros sitios web, se podía ver en todos los navegadores excepto en Firefox. Al intentar cargar la página en dicho navegador, cargaba y luego la página se quedaba en blanco. Buscando información pudimos ...