Tecnología

Personalización de Blogs Idea guardada 6 veces
Sé la primera persona en valorar esta idea Valorar

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í.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas:

Recomendamos

Relacionado

Cómo poner una puntilla o reborde alrededor del blog

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 Estilos

Como poner una biografía debajo de las entradas.

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

internet blog intermedio ...

Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.Mover la fecha debajo del título 1.- Abri ...

general

Cómo poner boton de suscribirse directamente en youtube en el blog

Últimamente más y más gente está abriendo canales de YouTube. Y de hecho varias clientas de mi servicio de diseño de blogs me han pedido, no solo que les añada un iconito de YouTube, sino que quieren un botoncito o algo que lo destaque más aún. Entonces, si queréis hacer algo así, simplemente es cuestión de poner la imagen y enlazarla a la URL de vuestro canal de YouTube. Pero os doy un truco más ...

general diseño de blogs

Como poner un fondo tras el menú de páginas

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

propuestas

Cómo crear un menú a pantalla completa para tu Blog

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

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

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

Tutoriales Blogging Tips

Cómo colocar una imagen.

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

Blogger

Cómo redondear las esquinas de tus imágenes en el blog

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

general seo

Cómo poner los datos de autor en Google para tu sitio web o Blog: el proceso de autoría en Internet paso a paso.

El proceso de autoría en Internet es una revolución en la manera en que los buscadores seleccionan resultados para las búsquedas de los usuarios. Un autor o creador de contenidos puede llegar a tener una autoridad en la materia sobre la que escribe que le colocará siempre en mejor posición que a otros enlaces similares de menor calidad. Tan importante como la autoría es la autoridad en una materia ...