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

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 ...

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 ...

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 ...

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 ...

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 ...

Blog diseñador web diseño web ...

Para crear un buen diseño web, hay que saber varios aspectos, estos permiten que no solo sea un limpio y atractivo layout sino que, ayuda también para la optimización del sitio web. Un diseño de esta índole esta caracterizado por una estructura que esta construida mediante un lenguaje de etiquetas (HTML) que permite edificar la arquitectura del mismo. Por lo general cuando se maqueta una web, se u ...

general diseño de blogs

Hace poco alguien me escribió para preguntarme cómo en el blog prediseñado número ocho puedo hacer que tras la barrita de pestañas, se vea ese efecto como de lazo o cinta: La idea la saqué del blog de Lauren Conrad, que tiene una barrita con efecto cinta en la parte superior: Es muy cómodo además porque nos permite ponerlo de fondo, y así poder luego añadir o quitar páginas o pestañas como haríamo ...

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. ...

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...