domingo, 9 de junio de 2013

Blockquote Rotante con jQuery en Blogger

Leave a Comment
 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.


Enhanced by Zemanta
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario