Inicio  Contacto  Privacidad   Enlaces  Mapa del sitio  Videos

Códigos HTML en Blogger. CSS

Codigos HTML en los Post
Como poner códigos HTML en los post, entradas de Blogger. Bueno pues vamos a ver otra forma sencilla con CSS además de fácil personalización y con un diseño que podemos modificar al gusto. Esquinas redondeadas, todas iguales o dándole la forma que deseemos. Cambiando los colores del fondo y el borde,,,, vamos que lo dejo a tu elección. También lo podemos utilizar para resaltar un texto, darle color y estilo a nuestros post. Podemos incluir imágenes, los límites son infinitos. Lo primero será incluir dentro de nuestra plantilla una parte de código que será el encargado de darle los estilos a nuestra caja para códigos HTML o texto plano.

Comencemos:
Recuerda, o si no lo sabias que para introducir código HTML primero tenemos que transformarlo en texto plano para que no sea reconocido el código como un comando que tiene que ejecutar el sitio y lo muestre como nosotros queremos. Que lo puedan copiar tal como es. Tienes sitios como blogcrowds especializado para blogs o simplebits que son gratuitos donde solo tienes que poner el código a transformar y automáticamente te lo convertirán. Dicho esto comencemos con el tutorial de hoy. Vamos a nuestro escritorio de Blogger, entramos en Diseño, Edición de HTML  En un tutorial anterior de este mismo tema, te mostre como buscar dentro de la plantilla, Buscamos este código  ]]></b:skin>  Justo antes ( por encima del mismo, de su línea ) pega el siguiente código:
.pre { font-size: 11px; color: #000000; margin : 15px 35px 15px 15px; padding : 18px; padding-left:35px; background: #A9E2F3; border: 1px solid #FF0040; -moz-border-radius:15px 15px 15px; -webkit-border-radius: 15px 15px 15px; } .pre li { line-height : 20px; font-weight : normal; margin : 0; padding : 0; }
Guardamos nuestra plantilla y ya la tenemos preparada para con una simple orden, nuevo código dentro de nuestros post ( Nueva entrada ) tengamos el estilo que hemos definido en el código anterior. Más adelante te enseño a personalizarlo. Ahora solo tienes que poner este otro código en cualquier entrada nueva que realices.
Nueva entrada, Edición en HTML  Solo pon donde dice aquí tu Código HTML pon el código texto que quieras mostrar.
( Recuerda,,,,siempre que sea código transformarlo,,, ) En caso de texto plano escribe lo que quieras que salga dentro de esta caja, tabla, como quieras llamarlo, pero no utilices acentos ni otros caracteres, si no también tendrás que transformar el texto para no tener problemas.

<div class="pre"> aqui tu Codigo HTML </div>
Resultado tal como esta configurado Texto tamaño11 color 000000 negro, Fondo azul, borde 1 pixel color rojo, redondeado de esquinas 15 pixeles.

Tabla CSS


Personalización:
Personaliza tu codigo


Aprende más, todo lo que puedes hacer con las esquinas de este código CSS Kabites
Que lo disfruten Josep :)

0 comentarios:

Comentarios

Entradas recientes Entradas antiguas Inicio
Licencia Creative Commons
Optical Photo por Josep Carmona se encuentra bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.
Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarlos en nuestro apartado de Contacto