Personaliza tu blog: Blockquote






¡Buenassssss! Hoy les traigo una pequeña guía de los Blockquotes y cómo editarlos un poco. El siguiente será acerca de las barras de desplazamiento, quiero abarcar cosas que son muy sencillas de editar, pero que a simple vista captan mucho la atención al ser diferentes a lo usualmente visto.

Primero que todo debemos saber ¿Qué es un blockquote?
Es un texto citado, podemos añadirlo a nuestras entradas con las comillas que aparecen a la hora de redactar las mismas, y se una para resaltar o enfatizar un texto.


Tengo dos formas de añadir un blockquote a mi blog.

Usando .post-body blockquote {
Que crea un blockquote que solo se puede usar dentro de las entradas,
o usando blockquote { que crea uno que se puede usar en todos lados.



¡Aquí les dejo algunos diseños!

Para añadirlos vayan a 

Plantilla >> Editar html

buscamos ]]></b:skin> y arriba pegamos el código de nuestra preferencia.



Blockquote 1

Antes de pasar el cursor.

Luego de pasar el cursor.

.post-body blockquote{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIOp8wI_3ntehcGXM9SPpoN1JYYXerTN9rE7yWvIxb1ZIGfsRQA0ONDWSlcmfJ5aIQgUeuiXvF5hXw2IMhkMIoz3Pgjae40IlJq9njuDhdyQ4PeJwj-EaeXNi_IA5nDL60pzwK3ZvAB3y/s1600/grey.png);
padding:10px;
text-align: RIGHT; /*Posición de la letra: LEFT:Izquierda RIGHT:Derecha CENTER:Centro*/
font-family: trebuchet ms; /*Estilo de letra*/
font-style: italic;
border:4px double #a7a7a7; /*Color del borde*/
color:#ff7087; /*Color de la letra dentro del blockquote*/
text-shadow: 1px 1px 0px #747474; /*Color de sombra de la letra dentro del blockquote*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
.post-body blockquote:hover{
border-radius:20px; /*Radio del borde*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}


Blockquote 2

Antes de pasar el cursor.

Luego de pasar el cursor.


.post-body blockquote {
background: #FFEBF4; /*Color de fondo del blockquote*/
border: 1px solid #ffa0c8; /*Color del borde*/
color: #FF006B; /*Color de la letra dentro del blockquote*/
font-family: century gothic; /*Estilo de letra*/
font-weight: normal;
font-size: 11px; /*Tamaño de la letra*/
text-align: RIGHT; /*Posición de la letra: LEFT:Izquierda RIGHT:Derecha CENTER:Centro*/
padding: 7px;
border-radius: 25px; /*Radio del borde*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
.post-body blockquote:hover {
background: #FFEBF4; /*Color de fondo del blockquote*/
border: 1px solid #FF006B; /*Color del borde*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}


Blockquote 3



.post-body blockquote {
background: #f5e6a9 url('https://i.imgur.com/ppM0af8.png') top left no-repeat;
box-shadow: inset 0 0 6px #d6ba49; /* Color de sombra interior del menu */
color: #020202;/* Color del texto*/
text-shadow: 1px 1px 0px #FFFFFF;
margin: 14px 15px 3px 3px;
padding: 12px 15px 10px 32px;
font-size:15px;
font-family: trebuchet ms;
font-style: italic;
}


Creo que eso ha sido todo por este post.
¡Nos leemos!

7 件のコメント:

  1. (。◕ ‿ ◕。)/ Holaaa!!!
    que hermoso Blockquote, mi plantilla no venía con uno decente ajjajaja, gracias por compartir el tutorial, espero traigas más blockquote pls!!!

    Espero puedas pasarte por mi humilde espacio ♥

    穛 S4Ku SEK4i®

    返信削除
    返信
    1. Suele pasar que las plantillas de Internet se ven muy profesionales y todo, pero no están personalizadas al 100%. De seguro traigo más diseños.

      ¡Saluditos!

      削除
  2. ¡Hola!

    Me gusta el amarillo, se ve muy lindo. ¿sabes si se puede usar dos blockqotes diferentes en un post?

    Saludos~

    返信削除
    返信
    1. Holaaaa.
      ¡Claro que puedes hacerlo!
      En las entradas de tu blog; Redactar>>Html.
      Y pegas lo siguiente donde quieras tu segundo blockquote.

      <blockquote class="tr_bq" justify="" style="Diseño de tu blockquote aquí" text-align:="">

      <span style="text-transform: none;">

      Texto del blockquote.</span></blockquote>


      Claro, modificando los campos en negrita para ponerlo a tu gusto.
      ¡Saludos!

      削除
    2. ¡Gracias!

      Me será de mucha ayuda ^^

      削除
  3. ¡Holaaa!!
    Que buen post, me lo guardo para ver si me sale, ya que había puesto uno personalizado pero sale como quiere y no como yo quiero ¬¬

    ¡Saludos! :)

    返信削除
  4. Hola!! Una entrasa muy muy interesante y útil. Gracias!! Besos!!

    返信削除