Personalizar e Insertar Blockquote Blogger

Al igual que yo, quizás te has preguntado como hacen los blogger, para insertar esos cuadros de texto en sus entradas, que sirven para resaltar esos textos o introducir códigos Html, considerados importantes.

Para empezar debemos tener presente que este cuadro con texto insertado se le denomina "BLOCKQUOTE" y para ello necesitaremos por lo menos un código que nos servirá de base.

Cómo Insertar Blockquote

Este es el código del blockquote. Y como podemos apreciar así es como nos quedará;

blockquote {
background-color: #eeeeee;
padding: 5px 15px 10px 15px;
margin: 10px 20px 3px 40px;
border-left: 5px solid #2288bb;
border-radius: 10px;
font-size: 12px;
color: #777777; }

Si te gusta como esta, lo puedes copiar y pegar en tu plantilla. Ahora veamos cómo lo podemos insertar.

• Primero vamos a plantilla > Editar Html > Presionamos Ctrl + F > y buscamos ]]></b:skin>
• Una vez localizado, insertaremos el código del Blockquote antes de ]]></b:skin>
• Guardamos la plantilla.

Es hora de probar el blockquote 

Hay dos cosas que debemos saber anticipadamente.

Para colocar Texto: si lo necesitamos solo para texto, entonces una vez que estemos en nuestra entrada, vamos a pinchar en Html, y ahí vamos a ingresar el siguiente código

<blockquote>
aquí colocamos el texto
</blockquote>

Lo que aparece de color, lo cambiamos por lo que necesitamos anotar. Ahora guardamos y hacemos una vista previa.

Ahora si lo necesitamos para colocar código Html: primero debemos parsear el código y para ello podemos ir a blogcrowds, pegamos el código y pinchamos en el botón PARSE.

Copiamos el nuevo código generado y hacemos el mismo procedimiento del anterior. Con esto podremos visualizar el código que queremos dar a conocer, ya que de no parsearlo, puedes darte cuenta que no aparecerá.

Nota: Toma en cuenta esto, cuando insertamos un código o un texto dentro de un Blockquote, todo queda como que si fuera un párrafo, y como te podrás dar cuenta, no se entenderá lo que has escrito, por lo que hay que dejarlo en líneas separadas, para ello presionamos las teclas Shif + Enter al final de cada línea, con eso evitaremos que queden espacios grandes y que se vea organizado.

Personalizar Blockquote Blogger

Este código lo podemos modificar de acuerdo a nuestro gusto, lo que aparece de color azul lo podemos cambiar de la siguiente forma:

• blockquote {
• background-color: #eeeeee; Este apartado nos indica el color del fondo del recuadro, para usar otros colores podemos acudir a Códigos de Colores Html, y ahi buscar un nuevo color.
• padding: 5px 15px 10px 15px; Este apartado nos indica las medidas del recuadro donde irá el texto. 
• margin: 10px 20px 3px 40px; Este apartado nos indica las dimensiones del recuadro.
• border-left: 5px solid #2288bb; Este apartado nos indica el color de la línea verticual que podemos apreciar en los ejemplos anteriores.
• border-radius: 10px; Como su nombre lo indica el tamaño del borde del recuadro.
• font-size: 12px; Este nos indica el tamaño de la letra.
• color: #777777; Este nos indica el color del texto.
  }