Personalizar bloques entrecomillados

Hoy vamos a explicaros como podemos personalizar bloques entrecomillados de nuestra plantilla.

Contenido del artículo 

• Introducción
•  Primer resultado
• Formulario de contacto arcoiris
• tema dos
•  Formulario de contacto CSS Ribbon

Introducción

Para personalizar estos bloques entrecomillados entra en Diseño> Edición de HTML y busca esto:

blockquote{                                                                                  ------------                                                                                      -----------                                                                                       -------------                                                                                     }                                                                                                                                                                                             

y lo cambiamos por este otro.

blockquote {background: #A9F5D0

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68HAUtG26NBQhEV1rG5wBBefOT9E4I6sSXJEm9uKTMEIGluqsU4lIXpdKT92bbQIWg2gnPpPJHzRf_nBHt5l_lRtrq18mcRodIE1aRNz2i5Gma7trLA8a_gzQVqgfCnHCZFdl7GmIXfM/s200/blockquote.png)
top left no-repeat;

margin: 10px 15px 3px 3px;

padding: 5px 15px 10px 32px;

border-top: 1px solid #DDD;

border-right: 1px solid #666;

border-left: 1px solid #DDD;

border-bottom: 1px solid #666;

font-style: italic;

}
font-size:14.0pt;mso-bidi-font-size:11.0pt'>border-top:
1px solid #DDD;

border-right:
1px solid #666;

border-left:
1px solid #DDD;

border-bottom:
1px solid #666;

font-style:
italic;

}
n";mso-ansi-language:EN-US'>border-bottom: 1px solid#666;

font-style: italic;

}   

>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

Paso a Paso
Nos vamos a Tema > HTML 
Busca la etiqueta  ]]></b:skin> y añade este bloque encima:

Código

.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

  visibility: hidden;

  width: 320px;

  background-color: black;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 5px 0;

  

  /* Position the tooltip */

  position: absolute;

  z-index: 1;

  top: -5px;

  left: 105%;

}

.tooltip:hover .tooltiptext {

  visibility: visible;

}

</style>

Texto a mostrar con el contenido oculto.....

Texto a mostrar expandiendo todo el contenido oculto........

Pasa el cursor aquíEste es el mensaje que se mostrará al pasar el cursor.

Enlace

Datos de https://www.soratemplates.com/