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

Blockquote Rotante con jQuery en Blogger

 En variedad de ocasiones un articulo no puede estar completo sin una cita propia  o una cita de grandes autores o de otras personas o articulos.Por que se cita para tener una noticia que sea precisa y objetivamente clara.

Por lo tanto debemos de contar con estos recursos de citar a autores de las misma con claridad. Lo que no debemos hacer es rellenar nuestro articulo con demaciadas citas pues haria de este uno largo y monotono, y muchas veces el lector no quiere bajar mucho en la pagina.

Pero que tal si presentamos la cita con un animador y rotante con codigo de jQuery , el cual no solamente hara tus citas lucir mejor sino podras agruparlas en un solo lugar y presentarlas. En este articulo el truco,  como crear una cita o blockquote rotante con jQuery en Blogger.

He aqui un ejemplo de este widget:

• Blogear no es sobre ganancias. es como servir a la humanidad.
• No escojas blogear como tu profesion, a menos que no tengas otra opcion!!!
• La Educacion es la arma mas poderosa la cual se puede usar para cambiar el mundo.
• Levartarse es muy corto, vivelo o pierdelo.
• Esta bien celebrar el exito pero es mas importante aprender de las caidas.
• Puedes tener luz sin tinieblas si permaneces en ella.
• Si piensas que tu maestro es duro, espera a que llegue el jefe. El no tiene cotemplacion.

 La primera cosa que necesitas hacer es entrar a tu cuenta de blogger. Ahora Crea una nueva Entrada >> Etiqueta Editar HTML y pega el siguiente codigos de JavaScript y CSS dentro del editor Html de Blogger.

 <link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>

<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>

 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

Después de añadir los códigos anteriores, es necesario agregar el siguiente código HTML en el Editor HTML de Blogger para que te ayude en la creación de rotación y citas animados. Usted puede cambiar la operación de animación en función de sus necesidades.

<!-- Ciudadblogger Rotator -->
<div id="words">

<ul class="word-container">

<li data-author="---  Syed Faizan Ali" data-easeout="lightSpeedOut">Blogear no es sobre ganancias.
es como servir a la humanidad.</li>

<li data-author="---  Syed Faizan Ali">No escojas blogear como tu profesion,  a menos que no tengas otra opcion!!!</li>

<li data-author="---  Syed Faizan Ali" data-easeout="fadeOutDown">La Educacion es la arma mas poderosa la cual se puede usar para cambiar el mundo.</li>

<li data-author="---  Syed Faizan Ali" data-easein="fadeInDown">Levartarse es muy corto, vivelo o pierdelo. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">Esta bien celebrar el exito pero es mas importante aprender de las caidas.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">Puedes tener luz sin tinieblas si permaneces en ella. </li>

<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">Si piensas que tu maestro es duro, espera a que llegue el jefe. El no tiene contemplacion.</li>

</ul>

<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

Enhorabuena: Ahora puedes publicar un artículo y disfrutar de la magia. La cita girará automáticamente. Sin embargo, este pasa a la siguiente cita con facilidad. Este seguira girando hasta que se vaya a otra página web.

Esperamos que este tutorial te ha ayudado en el aprendizaje de cómo crear un rotador de cita con Jquery en Blogger.

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