Un par de trucos CSS fáciles de aplicar en tu blog que te pueden interesar

A veces recibo peticiones por email para hacer un post.

Me refiero a cosas en concreto.

«Oye Omar, ¿podrías explicar algún día en un post como hacer esto o lo otro?«.

Otras veces incluso esas propuestas surgen en los comentarios de otros post.

La verdad es que esas sugerencias se suelen hacer con «cierto temor de no molestar», cuando en realidad es todo lo contrario.

Yo (y cualquiera) agradecemos enormemente que se nos den ideas para nuevos post y, si además son de cosas que están interesando a tu audiencia (ellos mismo te lo están pidiendo), pues mejor que mejor.

Ahora bien, siempre entendiendo que no cualquier cosa que se proponga tiene que llevarse a cabo sí o sí. Es decisión del blogger decidir si procede o no.

Vamos allá con dos trucos CSS sencillos pero que dan vidilla 😉

trucos-css-basicos

1º Cómo poner los testimonios en cajitas chulas

No son pocos los que me han preguntado por email cómo se hace para poner los testimonios en cajitas, con bordes, las imágenes todas iguales, etc.

Tal y como los puedes ver en la página de mi Servicio Web, por ejemplo.

En el fondo es bastante sencillo.

No osbtante es necesario controlar mínimamente algo de CSS, te dejo un par de enlaces:

  • CSS básico para mejorar tu blog
  • CSS en Genesis, personalizando tu theme sin agobios

Bien, entremos en materia.

Se trata de crear una clase que llamaremos por ejemplo «clientes», y a dicha clase le asignaremos una serie de propiedades en nuestro «style.css»

Del mismo modo, utilizaremos el selector de etiqueta «img» para aplicar algunas cosas a las imágenes que estén dentro de los DIVs con la clase «clientes» asociada.

Suena a chino, lo sé, pero en realidad no es tan complicado.

Código HTML que tendrás en tu entrada o página

<div class=»clientes»>
<h3><img src=»http://www.elnombredetublog.com/wp-content/uploads/la-ruta-de-tu-imagen.jpg» />Nombre del cliente</h3>
Texto del testimonio del cliente.
<a href=»http://www.webdelclientequedaeltestimonio.com» target=»_blank»>www.webdelclientequedaeltestimonio.com</a>
</div>

 

Vayamos por partes.

La primera línea significa que tenemos un DIV, un contenedor donde meteremos: un H3 con el nombre del cliente, la imagen con la foto del cliente, el testimonio del cliente y por último la dirección web del cliente. Ok.

A dicho DIV, le aplicamos la clase «clientes» y ahora veremos qué propiedades le ponemos y cómo.

Te pongo en rojo lo que tendrías que sustituir, obviamente cada uno con sus datos.

El tema de la imagen lo mismo, cada uno sube su foto del cliente y con alinearla a la izquierda es suficiente.

Código CSS que pegarás en tu style.css

.clientes {
background-color: #fffcfc;
min-height: 250px;
margin: 20px auto;
padding: 20px;
border: solid #db5741 2px;
border-radius: 20px 0px 20px 0px;
}
.clientes img {
border: solid 1px #ddd;
border-radius: 20px 0px 20px 0px;
}

 

Tenemos la clase «clientes» y puedes modificar por orden:

  • El color del fondo.
  • La altura mínima del contenedor, para que testimonios más cortos no queden muy mal.
  • El margen desde los bordes del contenedor hacia fuera.
  • El espacio desde los bordes del contenderos hacia los elementos que tiene dentro.
  • El borde: tipo, color y grosor.
  • La curvatura de los bordes del contenedor.

Después tenemos el selector «img».

Con esto le decimos que las imágenes que estén dentro de un contenedor de clase «clientes», deben tener un borde de un color y curvaturas determinados.

2º Cómo sustituir la imagen de compartir en Shareaholic

Para todos los que utilizais Shareaholic, habreis visto que yo tengo una imagen personalizada al final de cada post que pone «Comparte si te ha gustado», en lugar de la que viene por defecto en inglés con el plugin.

Bueno, pues cortesía del señor Jose Fonterosa, que es quien me enseñó este truco, comparto contigo el código CSS para modificar eso.

Obviamente, primero tendrás que crearte dicha imagen (con ancho recomendado de 313px) y subirla a tu servidor, desde WordPress en «Medios/Añadir nuevo».

Código CSS que pegarás en tu style.css

.shareaholic-share-buttons-heading {
background: url(‘http://www.elnombredetublog/wp-content/uploads/la-ruta-de-tu-imagen.jpg’) 0px 0 no-repeat !important;
height: 33px !important;
margin-bottom: 0px !important;
margin-left: -21px !important;
margin-top: 10px !important;
width: 313px !important;
}
.shareaholic-share-buttons-heading-image { display: none;}

 

Es bien sencillo: lo que hacemos es superponer esa imagen a la que viene por defecto, y a esa en una segunda orden directamente la decimos que no se muestre con el «diplay:none;»

Luego tiene una serie de ajustes de «márgenes» que sirven para calibrar bien el alineado con los iconos de redes sociales.

Si no te cuadra bien, pues dependerá de cómo recortes tu imagen antes de subirla, puedes probar alterando esos valores.

Resumiendo

Espero que este post haya sido corto pero muy útil.

Son dos trucos CSS con los que podrás personalizar un poco más el aspecto de tu blog.

Serán bien recibidas ideas o sugerencias para futuros post con trucos de este tipo, pues de hecho estos dos es de ahí de donde surgieron, de vuestras inquietudes 😉

Compártelo si crees que puede ser de utilidad para otros. ¡Gracias!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

Una pregunta rápida...

¿TIENES YA UNA PÁGINA WEB O BLOG?

Para comenzar a ayudarte y darte los recursos adecuados, me gustaría saber si ya tienes un proyecto web en marcha o si aún no tienes la página creada.

Herramientas y cursos
para emprendedores online

Si aún no has visto en qué consiste mi formación en Titanes Warpress...

TIENES QUE VERLO

No te vayas sin dejar tu comentario...

13 comentarios en “Un par de trucos CSS fáciles de aplicar en tu blog que te pueden interesar”

  1. Hola Omar
    gracias por el truco, lo estaba esperado 😉
    Lo he probado pero no me funciona. He intentado limpiar la caché pero nada. Y entiendo que no es un problema de mi imagen ni de la ruta, porque sigue apareciendo la imagen original y no debería si hemos puesto display:none, ¿no?
    ¿Sabe por qué puede ser?
    Muchas gracias por tu ayuda
    Un saludo

    1. Vicente Espinoza

      Saludos Natalia, el mismo problema me suscito a mi, pero me di cuenta en seguida que eran las comillas, al copia el código se copian comillas de texto pero no legibles para html, prueba reemplazando las comillas del por estas ( » ).

  2. ¡Hola!

    Buen post, Omar. Cositas sencillas de ahcer que mejoran mucho la apariencia (ya te contaré a ver cómo acabo yo, que me he lanzado a rediseñar la plantilla del Metro Pro y estoy flipando ¡Uff!).

    En cuanto a lo que pide Ricardo, aquí dejo el enlace a una entrada de mi blog (justo hace nada la traduje al español, porque la tenía en catalán) sobre el tema de alojar tu blog en local para poder practicar y todo eso antes de colgar nada. Yo ya lo he hecho dos o tres veces y aunque parece complicado, si sigues los pasos es muy sencillo. Aquí l entrada: http://tesacu.com/crea-aloja-blog-wordpress-en-pc/

    ¡Un saludo y felices fiestas a todos! 😀

  3. Recojo el guante que lanzas y te propongo como sugerencia para futuro post uno que describa paso a paso como instalar una copia exacta de la web o blog de WordPress al ordenador en local para poder hacer pruebas y cambios y luego subirlo al alojamiento.
    Te sigo leyendo 😉

  4. Voy a probar la de los testimonios!!! La verdad es q deberia a empezar a customizar un poco mi blog. Pero es q estoy en modo perezoso.
    Thanks por el tip de css

  5. Es un ejemplo de la magia del CSS. Como con 4 lineas de código puedes hacer que tu web sea mas agradable a la vista y hacer mas atractivos los contenidos.

    Simple y práctico post.

  6. Es como si me hubieras leído la mente, porque justamente quería meter esta semana una caja de testimonios en uno de mis servicios y añadir una imagen a lo de Shareaholic para que no se viera tan triste con los iconos nada más.

    Este tipo de posts de vez en cuando seguro que ayudan a muchos como a mí, que ahora en vez de buscar cómo hacerlo o crearlo por mí mismo tan solo tendré que echar un ojo al post y seguir tu guía.

    Un saludo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba

Tengo cuatro regalos para ti, para mejorar tu sitio web.

DESCARGA LA GUÍA GRATUITA DE PLUGINS

+

BONUS: Acceso a tres clases de mi escuela online

  • Radiografía de un post con el SEO bien cuidado.
  • Popups en Elementor con su formulario de suscripción.
  • Páginas que necesitas para un webinar automatizado.
Guia-paso-a-paso-para-crear-tu-blog

Tengo cuatro regalos para ti, para que puedas crear tu web.

DESCARGA LA GUÍA GRATUITA

+

BONUS: Acceso a tres clases de mi escuela online

  • Cómo contratar (bien) un hosting y un dominio.
  • Cómo instalar WordPress en apenas un par de clicks.
  • Qué plantillas te recomiendo y cómo instalar la tuya.
megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos

¿Ya tienes que irte?

Ok, pero échale un vistazo a esto, aún estás a tiempo.

VIDEO #1 [01/09/2020]

La gran oportunidad que nos ofrece hoy en día Internet
(sabiendo cómo aprovecharlo)

VIDEO #2 [03/09/2020]

Por qué parece tan complicado tener una web y un proyecto
(y porqué no debería serlo)

VIDEO #3 [07/09/2020]

El camino se hace mucho más sencillo si estás acompañado
(montamos el puzzle de tu web)

Cómo tener una web efectiva que convierta a tus lectores en suscriptores y clientes

megafono.png
#UNTRAININGDIFERENTE
Días
Horas
Minutos
Segundos