Citas con estilo Burbuja de Diálogo

Por ejemplo en HoyGeek lo usamos para mostrar los códigos que usamos en los tutoriales.
Lo mejor de esta Burbuja de Diálogo es que puedes modificar el Ancho y el Color, así puedes personalizarlo de acuerdo al estilo de tu Blog.



Lo primero que tenemos que hacer es dirigirnos a la sección Tema > Editar HTML y buscar lo siguiente ]]></b:skin> y justo arriba de este texto pegamos lo siguiente:

blockquote {

    width: 400px;

    margin: auto;
    background: #e55564; /* Color de fondo */

    color: #ffffff; /* Color del Texto */

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 13px; /* Tamaño de Letra */
    font-style: italic; /* Estilo de letra */
    font-weight: bold; /* Letra en Negrita */

    line-height: 18px;

    padding: 20px 11px 10px 11px;

    text-align: center; /* Texto alineado */

    -moz-border-radius: 12px;

    -webkit-border-radius: 12px;

    border-radius: 12px;

}

blockquote:after {

    border: solid 10px transparent;

    border-top-color: #e55564; /* Color de fondo */

    border-bottom: 0;

    bottom: -20px;

    content: "";

    display: block;

    height: 0;

    left: auto;

    right: -350px;

    overflow: hidden;

    position: relative;

    width: 0;

}

Aquí podemos personalizar nuestra burbuja como por ejemplo: color de fondo y texto, ancho de la burbuja, estilo de letra, etc.

En el código he colocado unos comentarios para que ustedes identifiquen cada propiedad y así puedan personalizar su Burbuja de Diálogo.