22/2/17

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, Blanca.
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

52 comentarios

  1. Respuestas
    1. Muchas gracias por tu comentario Katerine!

      Me alegro de que te haya gustado :)

      Besos, Blanca

      Eliminar
  2. Muchas gracias Blanca, excelente post, lo pondré en practica. Saludos! Diana

    ResponderEliminar
  3. Uy el secreto mejor guardado, jeje. Gracias por compartirlo, aunque yo no lo voy a usar seguro que es lo que muchas estaban esperando, y tu siempre nos ayudas tanto! Besos

    ResponderEliminar
  4. Explicado así parece muy fácil, algo así le vendría bien a mi blog, que es muy sencillito. Gracias!

    ResponderEliminar
    Respuestas
    1. Sii, es que es muy fácil de hacer.

      Si alguien no sabe cómo hacerlo, ahí está la dificultad, pero sabiendo un poco de css es muy fácil y rapidísimo!

      Un abrazo,

      Blanca

      Eliminar
  5. Que buen post, muchas gracias me ha sido de mucha utilidad!

    ResponderEliminar
  6. Una pregunta , ¿Como hago para conseguir la url de la puntilla? como la "alojo" gracias.

    ResponderEliminar
    Respuestas
    1. La forma más fácil es subirla a un borrador de un post, ponerla a tamaño original, y botón derecho, copiar url de la foto

      Así se te queda alojada en blogger y de ahí mismo tienes la url

      Un abrazo!

      Blanca

      Eliminar
  7. Yo acabo de entrar al mundo de Blogger (de hecho, hoy). Así que estoy muy entusiasmada, trataré de tomar varios consejos de ti; a la vez, daré lo mejor de mí ¡Muchísimas gracias por tus entradas de ayuda!

    ResponderEliminar
  8. Hola! Una pregunta, ¿Como debo de hacer si quiero que la puntilla salga tambien en el borde superior e inferior de manera vertical? Espero tu respuesta...

    ResponderEliminar





  9. Suggest good information in this message, click here.

    ResponderEliminar
  10. Me faltan palabras para la increíble ganancia que me ayudó a obtener en solo una semana con la estrategia de opciones binarias, lo siento mucho, dudé al principio, invertí $ 200 y gano $ 2,500 en solo una semana, y seguí invirtiendo más, hoy estoy financieramente exitoso, puede contactarlo por correo electrónico: carlose78910@gmail.com
    Vía whatsapp: (+12166263236)
    Te aconsejo que no lo dudes. Él está bien.

    ResponderEliminar
  11. خطوات تنظيف مكيف السبليت:
     
    نقوم بتجهيز المواد والأدوات اللازمة لتنظيف مكيف السبليت.
    في البداية نقوم بقطع التيار الكهربائي عن المكيف من خلال إنزال القاطع الكهربائي الخاص بالمكيف.
    نقوم بوضع الكيس على وحدة المكيف الداخلية، حيث يجب تغطية الجزء السفلي للمكيف بشكل كامل؛ ذلك لعدم اتساخ الجدران والأرض من مياه التنظيف، في حال عدم وجود كيس من الممكن وضع أكياس صغيرة وإلصاقها حول الجزء السفلي للمكيف.
    نقوم بفك الجزء الأمامي (الغطاء البلاستيكي) للمكيف، من الممكن أن نستعين بدليل الاستعمال الخاص بالمكيف؛ لمعرفة طريقة الفك والتركيب للغطاء.
    نقوم بإزالة الفلاتر التي توجد بعد الغطاء مباشرة، ثم نقوم بتنظيفها بالماء الساخن، نستعمل فرشاة ناعمة للتنظيف بشكل جيد، بعد تنظيفها نتركها لتجف بعض الوقت، يجب الحذر من وضع الفلاتر في الشمس؛ قد يؤدي لتضررها أو تلفها.
    نقوم باستعمال المكنسة الكهربائية في تنظيف الأجزاء الداخلية للمكيف، في حال عدم القدرة للوصول لبعض الأجزاء نستعمل فرشاة صغيرة تكون ناعمة، أيضاً يجب أن يكون التنظيف بعناية؛ لتجنب ثني أحد الملفات الداخلية.
    ثم نقوم باستعمال المنظف الخاص بالملفات، نقوم بوضع المنظف على الأجزاء داخل المكيف، نتركه مدة تتراوح بين 15 إلى 30 دقيقة.
    نقوم بإزالة المنظفات باستخدام الماء، يجب الحذر من عدم لمس الماء للوحة الإلكترونية الخاصة بالمكيف، بعض أنواع المنظفات لا تحتاج إلى الماء لإزالتها، من الممكن مسحها باستعمال قطعة قماش.
    نقوم بترك المكيف ليجفّ، ثم تركيب الفلاتر.
    نقوم بتوصيل التيار الكهربائي.
    شركة تنظيف مكيفات بجدة
    شركة تنظيف خزانات بمكة
    شركة كشف تسربات المياه بجدة

    ResponderEliminar
  12. สล็อตเว็บตรง
    I want to have money to spend. I want to have money to pay girls 💸💸 Our website can help you.
    Easy to get money, back quickly 🧡🧡 We are ready to serve you every 24 hours. 😘🧡

    ResponderEliminar
  13. Hola, como novato en el comercio de divisas criptográficas, perdí mucho dinero tratando de navegar por el mercado por mi cuenta. En mi búsqueda de un comerciante genuino y de confianza, me encontré con Anderson Johnny, quien me guió y me ayudó a obtener muchas ganancias por una suma de $ 40,000. Hice mi primera inversión con $1,000 y obtuve un ROI de $9,400 en menos de 8 días. Puede ponerse en contacto con este comerciante experto a través del correo electrónico tdameritrade077@gmail.com o en WhatsApp +447883246472 y estar listo para compartir su propio testimonio.

    ResponderEliminar
  14. 바카라사이트
    Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I?d prefer to use some with the content on my blog whether you don?t mind. Natually I?ll give you a link on your web blog. Thanks for sharing.

    ResponderEliminar
  15. 토토사이트
    Here are some links to web-sites that we link to mainly because we consider they may be really worth visiting.

    ResponderEliminar
  16. 스포츠토토티비
    Thanks for sharing your info. I truly appreciate your efforts and I will be
    waiting for your further post thank you once again.

    ResponderEliminar
  17. Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web! Feel free to visit my website; 바카라사이트

    ResponderEliminar
  18. I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.สล็อตออนไลน์

    ResponderEliminar
  19. This blog is really great. The information here will surely be of some help to me. Thanks!.สล็อต 999

    ResponderEliminar
  20. Thanks for this great post, i find it very interesting and very well thought out and put together. I look forward to reading your work in the future.สล็อตแตกง่าย

    ResponderEliminar
  21. This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses.บา คา ร่า วอ เลท

    ResponderEliminar
  22. Nice blog and absolutely outstanding. You can do something much better but i still say this perfect.Keep trying for the best.บา คา ร่า วอ เลท

    ResponderEliminar
  23. I found your this post while searching for information about blog-related research ... It's a good post .. keep posting and updating information.สล็อตเว็บใหญ่

    ResponderEliminar
  24. I really thank you for the valuable info on this great subject and look forward to more great posts. Thanks a lot for enjoying this beauty article with me. I am appreciating it very much! Looking forward to another great article. Good luck to the author! All the best!บา คา ร่า วอ เลท

    ResponderEliminar
  25. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post.!สล็อต ฝาก-ถอน true wallet ไม่มี บัญชีธนาคาร

    ResponderEliminar
  26. I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.บาคาร่าวอเลท

    ResponderEliminar
  27. Thanks for taking the time to discuss that, I feel strongly about this and so really like getting to know more on this kind of field. Do you mind updating your blog post with additional insight? It should be really useful for all of us.สล็อตแตกง่าย

    ResponderEliminar
  28. Thank you so much for the post you do. I like your post and all you share with us is up to date and quite informative, i would like to bookmark the page so i can come here again to read you, as you have done a wonderful job.สล็อตxo

    ResponderEliminar
  29. I felt very happy while reading this site. This was really very informative site for me. I really liked it. This was really s a lot!.เว็บสล็อต

    ResponderEliminar
  30. It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing.เว็บสล็อตเว็บตรง

    ResponderEliminar
  31. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post.เว็บตรงสล็อต

    ResponderEliminar
  32. Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!!เว็บ ตรง

    ResponderEliminar
  33. Thanks for providing recent updates regarding the concern, I look forward to read more.เกมสล็อต

    ResponderEliminar
  34. Hello, i think that i saw you visited my website thus i came to “return the favor”.I’m trying to find things to enhance my
    site!I suppose its ok to use a few of your ideas!!
    บาคาร่า

    ResponderEliminar
  35. slot joker
    สล็อตออนไลน์ ที่เป็นเกมออนไลน์ยอดฮิต อยู่ตอนนี้ และ พันธุ์ทิพย์ เป็นแหล่งข้อมูลที่ คนถามถึง เว็บสล็อต slotjoker นั้นมีสูตรลับสำหรับ เล่นสล็อตแตกบ่อย และ โดยปกติผู้ดูแลเว็บไซต์ จะลบมันออก ทำให้หาข้อมูลเกี่ยวกับ สล็อตค่ายไหนดี pantip ค่อนข้างยาก แต่ก็ไม่ได้ยากขนาดนั้น เราพร้อมแนะนำ ผู้เดิมพันเสมอ ผู้เดิมพันส่วนใหญ่ มักจะมองหาข้อมูล เกี่ยวกับสล็อตออนไลน์ เช่น ปั่นสล็อตค่ายไหนดี slotjoker-spd
    มั่นคง และ ปลอดภัย ซึ่งสล็อตนั้นดี โบนัสมักจะใช้ไม่ได้ หรือแคมป์สล็อตนั้นแตกง่าย สิ่งนี้สามารถเพิ่มโอกาส ในการได้รับรายได้ ผู้เล่นบ่อยขึ้น แต่อย่างไรก็ตาม จุดเด่นสล็อตออนไลน์ คือการออกโบนัสจำนวนมาก รางวัลใหญ่ถูกจับฉลาก โดยเฉพาะถ้าคุณรู้วิธีเล่นสล็อต

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.