Que onda! Hace unos días que hice un nuevo blog personal y con un diseño muy personalizado Jeje, pues les enseñaré como hacer que las imagenes del blog se vean redondeadas.

Para hacer este efecto debemos aplicar los siguientes atributos al estilo CSS:


Para ser más claro lo explicaré paso a paso (Sígue todos los pasos con atención y guarda una copia de tu plantilla antes de empezar):

• Primero abriremos nuestro escritorio de blogger, después nos vamos a plantilla y nos vamos a Edición HTML. (Expandimos plantilla de artilugios por si es necesario)

Bien aqui es donde decidiremos a que parte del blog le aplicaremos dicho efecto -Por ejemplo: en mi blog personal tengo un efecto a las imagenes de las entradas y otro a las imagenes de la sidebar.

• Segundo, les explicaré como hacer el efecto a toda la plantilla, solo a las entradas o solo en la sidebar.

Imagenes con puntas redondeadas en TODA la plantilla

Recordamos que ya estamos en la edición HTML de nuestro blog, ahora para hacer este efecto a toda la plantilla buscamos usando (Ctrl+F) esto que esta entre comillas ".img {" y si no les aparece ".img{", y si aun así no aparece (Recuerden que las plantillas descargadas pueden no tener la misma estructura) buscamos "img {" o "img{".

Una vez que lo hallamos encontrado vamos a reemplazar el texto quedando así:

Y quedará así:
...Otro estilo mejorado por el padding que dejará un espacio para verse el background:

Y quedará así: En fin, podrás jugar con los valores en rojo, para probar distintos diseños, te recomiendo no mover el margin pues te dará el espacio entre el texto y la imagen.

Imagenes con puntas redondeadas SÓLO en las entradas

Bien, ya vimos los códigos CSS para conseguir estos diseños, ahora para que solamente las imagenes de las entradas del blog se vean de esta manera sigamos estos pasos:

• Estando en la edición de HTML de nuestro blog, buscamos de igual manera con (CTRL+F) lo siguiente (Puede ser cualquiera de estos):

- "post{"
- "post {"
- "entry{"
- "entry {"

Una vez que lo encuentres pon debajo de su "}" el siguiente código CSS:

Nota: Si ya lo tienes sólo remplaza el contenido.

Imagenes con puntas redondeadas SÓLO en la sidebar

Bien, aquí hacemos lo mismo pero esto es más sencillo, buscamos usando (CTRL+F) lo siguiente: "sidebar{" ó "sidebar {" y justo debajo del ultimo "}" coloca el siguiente código CSS:

Y listo, esto es todo. Espero que te guste el diseño y a la próxima les enseñare cómo hacer jugar con el efecto hover en las imagenes como en mi blog personal. Si tienes dudas dejame tus comentarios.