Personalizar e Insertar Blockquote Blogger

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.
    }
Personalizar e Insertar Blockquote Blogger Personalizar e Insertar Blockquote Blogger Reviewed by Dinerointer ptc on diciembre 28, 2015 Rating: 5

2 comentarios:

Deja tu comentario

Con tecnología de Blogger.