Como Añadir Blockquote Con Estilo En Blog de Blogger

En este tutorial estare mostrandote una manera sencilla de añadir un( blockquote) o bloque de cita en tu plantilla de blogger.Este bloque de cita es uno que puede ser facilmente configurado a tu gusto,solo cambiando los colores de fondo y el color del borde del mismo.Sabemos que estos se usan para poner nuestras citas de autores o scripts como hago en la mayoria de mis articulos,pues le da ese toque especial al articulo con un diseño atractivo.
Ejemplo:
Tu Texto Va Aqui...

Para Añadir este Blockquote a tu blog de blogger sigue estos simples pasos:

1.Entra a tu cuenta de blogger>>Plantilla>>Editar Html

2. Encuentra esta etiqueta  ]]></b:skin>   usando Ctrl+F

 

3. Pegue el codigo de Abajo antes de la etiqueta  ]]></b:skin>

blockquote { background:#D1FCFA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmdg8fqhtDowvKxmHcMa6T8oHXJHs9zOCR9MLLB8pQ9_rN1tDcOWHQqOACWtFo2kpvS7-N95Ux-QmUlrDfHumtBXQyACkjtkhcAN7_QlKIGSXAuWgwYupwWBn1y9tBVIZzF5BQ0bCA-hgs/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}

4. Ahora da click en boton de Guardar Plantilla

5.Cuando desee utilizar un blockquote o Cita escriba el Texto como el ejemplo

<blockquote>
Tu Texto Va Aqui...
</blockquote>

 Entre la etiqueta de blockquote
Reemplace Tu Texto Va Aqui con cualquier frase o texto,

6. Puedes usarlo cuando estes creando un articulo.
Listo tendras un bloque de citas con estilo.

Read More

Añadir un Blockquote Animado A Tu Blog De Blogger

Los bloques de citas o blockquote es un bloque de escritura destacado cuando escribes un articulo en sitio web o blog.Cuando comparto codigos o scripts por lo general en este blog utilizo un blockquote. Anteriormente he compartido con ustedes algunos articulos de blockquote con estilo .

En esta oportunidad les mostrare un blockquote animado cual de seguro llamara la atencion de tus visitantes. Este ademas se activa al pasar cursor sobre la mismo,ademas un icono de cita se mueve hacia tu blockquote al mismo tiempo cambiara de color.

 Cheque Blockquotes con efecto bombilla para Blogger

Este es bastante apelativo y maravilloso y espero le añada mas estilo a tu articulos donde incluyas citas.

Solo sigue los pasos siguientes para insertar Blockquote Animado a tu blog de blogger.

1.Entra en tu cuenta de blogger
2.De click en Plantilla luego Editar Html
3.Encuentra la siguiente etiqueta ]]></b:skin>
4.Copia y pega el codigo de abajo antes de la etiqueta  ]]></b:skin>

/*****************************************
Blockquote por www.ciudadblogger.info
******************************************/
.post blockquote {border:5px
solid #007FFF;font-size:120%;line-height:100%;overflow:auto;padding:10px;font-family:courier;color:#000;width:360px;position:relative;margin:0
auto 20px auto;padding:12px
80px 15px;text-align:left;border-radius:5px;box-shadow:0 0 5px 2px rgba(0,0,0,.35);cursor:default;background:#9FCFFF;border:1px
solid #6F91B2;background:#9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjFT8r0d0qN0f_F_CGO6J4TfAG_QEPQ7Wsii3J67G_yxioexTzIZec4DlWHlp1F9-cDgFy-2Rm91B_pPZMPWpn_DY6Jixx_oBb4Z4nNRsOgmqwAPCCbe9OXvq2OddNXznkzwp5QtdXtT7/s320/BS+blockquote.png) no-repeat 5% 9%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote:hover {
border:5px
solid #0066B3;border-radius:15px;
background:#0186ba;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post blockquote p {
margin: 0.75em 0;
}

Como Usarlo el Blockquote Animado
:

     Para aplicar este truco selecciona el codigo que deseas destacar y da click en el,mira la siguiente imagen:

Eso es todo ahora tus citas o codigos a resaltar tendran animacion al pasar el cursor sobre ellas.

Chequea Blockquotes Personalizables

Read More

Efecto Blinking Bulb Para Blockquotes En Blog De Blogger

Con este tutorial realmente te mostrara como crear un blockquote impresionante y atractivo para tus mensajes en blogger o sitios web. Este blockquote cambiará de color cuando el cursor del ratón se pasa sobre él mismo.  Pero este truco o efecto en blockquote es excepcional! Sólo echar un vistazo al ejemplo  de blockquote a continuación.

Pasa el cursor del mouse cursor por (blockquote)o cita de abajo.

La estilizacion usada en crear esta cita al pasar el cursor del mouse sobre la misma es una idea de lo que realmente puedes hacer con Css.Si deseas puedes usar letras personalizadas,colores, y imagenes para darle un estilo distinto.

Este codigo de css puedes utilizarlo para uso comercial o persnal los bloggeres y a los webmaster se les pide que enlacen este a www.ciudadblogger.info si desean compartir este tutorial con seguidores o lectores.

Atractivo verdad? Ahora aprendamos como anadir como anadir el efecto de bombilla encendida.

Anadir efecto de bombilla encendida a las citas de tu blog

1.Entra en blogger>>Plantilla>>Editar Html
2.Busque el siguiente codigo ]]></b:skin>

 
3.Pegue el codigo de abajo de CSS  antes de ]]></b:skin>

.codigo1 {
overflow:auto;width:520px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIRYlv7IosE9AhAKIulnP9ZifpuLHlLlWsVIiwrzd9aNSHpttORGtVB5eYsxAKgQ3Q3hFHZkoc3uH-CxglMjuNrqB_Silg5u-K2qukYAbtg7A78R8s5yE08O0_4UQKDYooLCaWr5BAB5U/s1600/rb+light+bulb.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-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--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.codigo1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-14L5IJLBDsiplbHAbZe_I9tkUBkV_qh2V0kYg-en_f2X-FH-fm6EitSMGPNFx7HaesCSfgkV3H_SGy86qLY58FvXt3vOhGn-zGjGCOKkBM2ZbDoVMZcFh624uK1eupzWXsupg2WpmCM/s1600/rb+light+bulb+2.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

4.Ahora cuando vayas a poner una cita en tu pagina cambia de Redactar a Html y pon la siguiente etiqueta:

<div class=''>Pon la cita o blockquote deseada aqui</div>

Sustitute "Pon la cita o blockquote deseada aqui" por tu frase,oracion o script que desees publicar.
Listo ya podran disfrutar de un efecto iluminado a tus citas o blockquotes.

Read More