Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como darle estilo a Blockquote o también conocido como Cita. Muchos bloggers utilizan el blockquote para mostrar los códigos HTML, CSS o para una información.

Este blockquote tiene la particularidad detener un efecto hover, cada ves que el mouse pase por encima del blockquote tendrá un efecto brillo.

Antes de comenzar veremos una demostración: 


Comencemos: 

  • Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML. 
  • Paso 2: Buscamos la siguiente linea (Ctrol + F).
blockquote {
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #F7F7F7;
border : 1px solid #EEEEEE;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
font-size:15px;
}
blockquote:hover {
background-color:
white;
border: 1px solid
#ACACAC;
-moz-box-shadow: rgba(0,0,0,.2) 0 4px 16px;
-webkit-box-shadow:
rgba(0, 0, 0, .2) 0 4px 16px;
box-shadow:
rgba(0, 0, 0, .2) 0 4px 16px;
}
  • Paso 3: Guardamos los cambios efectuados en la plantilla

Ahora agregaremos el efecto Blockquote para Blogger

  • Paso 4: Dentro de una entrada pegamos el siguiente código HTML.
<blockquote>Texto que mostraremos</blockquote>

Listo ya tendríamos nuestro Blockquote o Cita personalizado  

Nota:- Solo tendrías que cambiar Texto que mostraremos por lo que tu requieras  
- - 3 Comentarios
Tag

Comentarios (3)

  1. Hola amigo como haces para poner ese marco azul donde copiamos los codigos que se ve chevere tambien tengo otra pregunta eh visto en varios blog donde dividen el contenido de cada entrada por cuadros que estan organizados por descripcion, contenido y os link todo dividido como en este blog http://conocimientoadictivo.blogspot.com/2013/06/cinema-4d-studio-r14014-final-todo-lo.html asi las divisiones como se arian saludos

    ResponderEliminar
  2. @Carlos Pavon El marco azul que tu dices son creados por Blockquote o cita, esta entrada nos referimos a eso.
    Sobre la pagina que tu me dices sobre que esta divida en cuadros eso se denomina tab (o tambien conocidas como tablas).
    Ya que me has pedido eso, tengo una tutorial sobre eso y en estos días la creare.
    Espero que te halla ayudado en algo

    ResponderEliminar
  3. Gracias amigo por tu respuesta saludos

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar