Según el autor, el plugin es compatible con Firefox 3, Chrome 5, IE7, Safari 4 y Opera 10 en adelante. Puedes ver la Demostración, desde la página del plugin o bien en este blog donde lo he probado. La explicación será considerando el ejemplo 1, que muestra la barra de navegación con las letras del alfabeto (en inglés), como se aprecia en la siguiente imagen.
La imagen solo muestra una parte del elemento (recortada).
Cómo implementarlo en el blog
Vamos a pensar que quieres agregarlo en la columna lateral del blog, entonces harás lo siguiente:
1. Primero, necesitas agregar jQuery antes de </head>, yendo a la edición de HTML de la plantilla. Si ya lo tienes agregado, entonces no necesitas volverlo a poner. Como lo muestro enseguida, lo cargamos desde la librería CDN de Google:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
2. Luego, agregas el plugin directamente en la plantilla después de jQuery:
<script type='text/javascript'>
//<![CDATA[/*
* SliderNav - A Simple Content Slider with a Navigation Bar
* Copyright 2010 Monjurul Dolon, http://mdolon.com/
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://devgrow.com/slidernav
*/
$.fn.sliderNav=function(options){var defaults={items:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],debug:false,height:null,arrows:true};var opts=$.extend(defaults,options);var o=$.meta?$.extend({},opts,$$.data()):opts;var slider=$(this);$(slider).addClass('slider');$('.slider-content li:first',slider).addClass('selected');$(slider).append('<div class="slider-nav"><ul></ul></div>');for(var i in o.items)$('.slider-nav ul',slider).append("<li><a alt='#"+o.items[i]+"'>"+o.items[i]+"</a></li>");var height=$('.slider-nav',slider).height();if(o.height)height=o.height;$('.slider-content, .slider-nav',slider).css('height',height);if(o.debug)$(slider).append('<div id="debug">Scroll Offset: <span>0</span></div>');$('.slider-nav a',slider).mouseover(function(event){var target=$(this).attr('alt');var cOffset=$('.slider-content',slider).offset().top;var tOffset=$('.slider-content '+target,slider).offset().top;var height=$('.slider-nav',slider).height();if(o.height)height=o.height;var pScroll=(tOffset-cOffset)-height/8;$('.slider-content li',slider).removeClass('selected');$(target).addClass('selected');$('.slider-content',slider).stop().animate({scrollTop:'+='+pScroll+'px'});if(o.debug)$('#debug span',slider).html(tOffset);});if(o.arrows){$('.slider-nav',slider).css('top','20px');$(slider).prepend('<div class="slide-up end"><span class="arrow up"></span></div>');$(slider).append('<div class="slide-down"><span class="arrow down"></span></div>');$('.slide-down',slider).click(function(){$('.slider-content',slider).animate({scrollTop:"+="+height+"px"},500);});$('.slide-up',slider).click(function(){$('.slider-content',slider).animate({scrollTop:"-="+height+"px"},500);});}}; //]]>
</script>
O bien, lo alojas en un sito de alojamiento que uses de confianza, para luego llamarlo usando la etiqueta script:
<script type='text/javascript' src='//mi_arcivo_con_el_plugin.js'></script>
3. Después, agregas la función de jQuery para llamar al elemento que se está creando...
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#slider').sliderNav();
});
//]]>
</script>
4. Luego, agregas el CSS, yendo a plantilla > Personalizar > Avanzado > Añadir CSS.
/*
* SliderNav - A Simple Content Slider with a Navigation Bar
* Copyright 2010 Monjurul Dolon, http://mdolon.com/
* Released under the MIT, BSD, and GPL Licenses.
* More information: http://devgrow.com/slidernav
*/
.slider {
width: 300px; /*el ancho del slider.Toma nota del ancho de donde lo colocaras*/
min-height: 250px;
display: block;
position: relative;
background: #fff;/*color de fondo de los elementos de la lista*/
overflow: hidden;
}
.slider ul {
list-style: none;
margin:0;
padding:0;
}
.slider-content {
float: left;
width: 100%;
display: block;
overflow: hidden;
min-height: 250px;
}
.slider-content ul {
float: left;
width: 100%;
display: block;
position: relative; top:-3px;
}
.slider-content ul li {
float: left; width: 100%;
}
.slider-content ul ul li a {
padding: 5px 10px;
display: block;
border-bottom: 1px solid #f3f3f3; /*borde al fondo de cada elemento*/
text-transform: capitalize;
}
.slider-content ul ul li a:hover {
background: #f3faff; /*el color de fondo al poner el puntero encima del titulo*/ border-color: #d5ebf9;/*color del borde*/
}
.slider-content .title {
padding: 5px 0;
text-indent: 10px;
background: #bbb; /*color de fondo del bloque de cada letra en la lista*/
color: #fff; /*color de fuente*/ width: 100%;
float: left; font-weight: bold;
text-transform: uppercase;
}
.slider-content .selected .title {
background: #666; /*el color de fondo de la letra seleccionada en la lista*/
}
.slider .slider-nav {
position: absolute;
right: 0;
top: 0;
background: #666; /*color de fondo barra vertical con letras de navegación*/
min-height: 250px;
}
.slider .slider-nav ul {
padding: 5px 0; }
.slider .slider-nav li a {
padding: 3px 5px;
line-height: 13px;
text-align: center;
color: #fff; /*color de fuente de cada elemento de lista*/
font-weight: bold;
display: block;
text-transform: uppercase;
cursor: pointer;
}
.slider #debug {
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
background: #000;
color: #fff;
}
.slider .arrow { /*las flechas creadas con css*/
font-size: 0px;
line-height: 0%;
width: 0px;
border-bottom: 8px solid #fff;
border-left: 5px solid #333;
border-right: 5px solid #333;
position: relative; top: -5px; /*mover flecha de arriba*/
}
.slider .down {
border-bottom: none;
border-top: 8px solid #fff;
top: 2px; /*mover flecha al fondo*/
}
.slider .slide-up, .slider .slide-down {
height: 20px;
background: #333; /*color de fondo de las barras horizontales con las flechas */
text-align: center;
cursor: pointer;
float: right;
width: 100%;
position: relative;
}
Notas importantes del CSS.
- Comúnmente, cuando agregas un elemento a una plantilla de Blogger, hay que hacer ajustes, ya que puede haber algunas propiedades que estén en la plantilla que se hereden al elemento, cuando no fueron especificadas en el CSS, y por ello, puede verse alterado la apariencia de dicho elemento.
- En la plantilla de ejemplo, he editado algunos valores y agregado algunas propiedades del CSS mismas que he resaltado de morado para que puedas identificarlas, que pueden ser claves para ajustar el elemento.
- En cuanto a los colores de fondo, bordes y color de fuentes, los he resaltado de rojo para que puedan editarse. Por favor, también lee los comentarios de color verde, para que sepas de que se trata cada cosa, ya que termines, puedes eliminarlos.
5. Finalmente, y pensando en que vas a agregar el elemento en una columna lateral, ve a Diseño y agregas el código HTML en un gadget con la opción de HTML/Javascript, siguiendo la siguiente estructura:
<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="#">Adam</a></li>
<li><a href="#">Alum</a></li>
<li><a href="#">Ali</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="#">Bohemia</a></li>
<li><a href="#">Becky</a></li>
</ul>
</li>
etc... </ul> </div>
Explicación de la estructura del código HTML (del paso 4)Antes del cierre de la etiqueta <ul> que resalté de azul, deben estar los bloques con las listas en orden alfabético, es decir en la parte que dice etc... Asegúrate de eliminar ese texto del código. Entonces, siguiendo con la estructura anterior, seguiría la "C", y el código HTML de éste se verá así:<li id="c"><a name="c" class="title">C</a>
<ul>
<li><a href="#">Corem</a></li>
<li><a href="#">Cohemia</a></li>
</ul>
</li>IMPORTANTE: Cada vez que agregues el bloque con la lista, asegúrate de que el ID de la etiqueta "li" y el nombre asignado a la etiqueta "a", lleven la misma letra respectivamente. En el bloque anterior lleva la "c" que es la que seguía, tomando en cuenta el orden alfabético.Si quieres agregar más elementos a la lista de cada bloque con determinada letra, entonces deberás repetir esta linea...<li><a href="#">Cometia</a></li>Entonces, el bloque anterior, con la linea anterior, quedaría así:<li id="c"><a name="c" class="title">C</a>
<ul>
<li><a href="#">Corem</a></li>
<li><a href="#">Cohemia</a></li>
<li><a href="#">Cometia</a></li>
</ul>
</li>Al terminar de poner todos los elementos con la letra "c", seguirá el bloque con la letra "d" y así sucesivamente. Su estructura será la misma que se explicaba anteriormente.Otras notas:
Se puede ajustar la altura en pixeles, si deseas anular la detección automática basada en la navegación vertical. Según explican, puede que sea necesario ajustar la altura mínima en el CSS (min-height). Puede inhabilitarse las flechas. Puedes verse todos los detalles en la página del autor.
No hay comentarios:
Publicar un comentario