Como colocar una imagen en el borde del blockquote

Hoy les traigo un corto y sencillo tutorial de como colocarle un pattern a los bordes del blockquote como pueden ver en la imagen de ejemplo o también pueden chequear el resultado en mi blog de pruebas ♥

Paso 1

Vas a Plantilla | Editar HTLM | y encima de ]]></b:skin>  pegas el siguiente código:
     

blockquote {
background: #fafafa; /* Color del fondo de la caja */
padding: 5px;
color: #666; /* Color del texto */
border: 10px solid ; /* Grosor del borde */
box-shadow: inset 0 0 10px #bbb, 0 0 5px #bbb; /* Sombra dentro de la caja */
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-DF0Y2w6RBYxyg4xrQ-Ox9ZtKi4D_GyBAgwvIx8WEGW5iMHODTwgyjbKedH-d7tMkh59TwXaEuzfff8iJcKJzKIVAETsigl92oV_D-qYVvTlmHsi5VbcZKQflUN8A7sona8KTcq7UPE/s1600/3817521.png') /* Url de la imagen del borde */
    20 20 round; /* Escala de la imagen del borde */}

Paso 2

Ahora solamente debes de editar cada cosa a tu gusto:

Donde dice /* Escala de la imagen del borde */ es para ajustar el tamaño de la imagen que aparecerá en el borde del blockquote..
si pones un numero menor, como 10 10 round; la imagen será mas grande..
si pones un numero mayor como 30 30 round; la imagen será mas pequeña..

RECOMENDACIÓN
Si ya tenias tu antigua blockquote personalizada, te recomiendo que borres  el código que ya tenia tu plantilla y que lo remplaces con el que deje.. si no podría no quedar bien al superponerse ambos códigos..