Un slider es un elemento muy atractivo en nuestro blog ya que este nos da una vista grafica mas llamativa, ademas que así podemos resaltar de una forma muy elegante ciertos elementos.
Orbit es un Slider de imágenes automático que funciona gracias Jquery, muy fácil de usar pero eso si con un aspecto muy elegante. Este Slider de inicio automático tiene como característica el poder insertar elementos HTML sombre las imágenes, ademas que se pausa al momento de que usamos los controles de "Siguiente & Anterior", ademas que se ajusta automáticamente al tamaño de la imagen mas grande (en mi caso yo trabaje todas las imágenes a 600 x 300), ademas como ya mencione se instala muy fácil.
Podemos ver el demo del slider en funcionamiento en este blog de pruebas a diferente tamaño (900px x 450px):
O tambien podemos verlo aqui en esta entrada pero a menor tamaño (600 x 300)
Un blog hecho para los nuevos usuarios de Kali Linux, trucos, tutoriales, pentest y mucho mas:
kalilinuxmx.blogspot.mx/
Ahora vamos a insertarlo en nuestro blog.
1.- Nos vamos a Diseño luego a Agregar un gadget elegimos HTML/JavaScript y en este agregamos lo siguiente:
<!-- CSS -->
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/5655242/Sliders/orbit-1.2.3/orbit-1.2.3.css" />
<!-- JS -->
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/5655242/Sliders/orbit-1.2.3/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/5655242/Sliders/orbit-1.2.3/jquery.orbit-1.2.3.min.js"></script>
<!-- Importante para el Inicio del Slider -->
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
<!-- Slider -->
<center>
<div id="featured">
<img src="URL de la imagen 1" alt="Descripcion" data-caption="#htmlCaption1" />
<img src="URL de la imagen 2" alt="Descripcion" data-caption="#htmlCaption2" />
<img src="URL de la imagen 3" alt="Descripcion" />
</div>
<!-- HTML extra en slide -->
<span class="orbit-caption" id="htmlCaption1">
<div class="separator" style="clear: both; text-align: center;">
Inserta aqui el HTML que tu quieras:<br /><a href="LINK"><span style="color: orange;"><b>Texto del LINK</b></span></a></div>
</span>
<span class="orbit-caption" id="htmlCaption2">
HTML del segundo slider (puedes incluso insertar imagenes)
</span>
</center>
2.- Ahora se tiene que reemplazar lo que esta en color naranja por los urls de nuestras imágenes.
3.- Para terminar reemplazamos lo que esta en color rojo por nuestro HTML y guiandanos del identificador que esta en color verde para saber a cual imagen corresponde.
Si quieren eliminar alguno de estas cajas para insertar HTML solo tienen que borrar el siguiente código que esta un poco después de donde va el URL de la imagen
data-caption="#htmlCaption1"
Y si queremos agregar otra caja, agregamos el codigo anterior justo después de alt="Descripcion" quedando asi:
<img src="URL de la imagen X" alt="Descripcion" data-caption="#htmlCaptionX" />
y luego antes de </center> insertar este codigo:
<span class="orbit-caption" id="htmlCaptionx">
HTML del nuevo Slider</span>
Espero y les sirva hasta pronto!.
No hay comentarios.:
Publicar un comentario