Aunque est? dise?ado para mostrar tres im?genes es un slider con un aspecto bastante lindo que estoy seguro que se ver? muy bien en muchas plantillas para mostrar el contenido destacado del blog.
Para poner este slider en tu blog primero descarga este archivo, descompr?melo y s?belo a un hosting.
Luego entra en Dise?o | Edici?n de HTML y antes de </head> pega esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>Cambia donde se indica, la URL del archivo que subiste previamente.
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
var $featured_area = jQuery('#featured-area');
var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
var $slider_control = jQuery('#featured-area div#slider-control');
var $image_container = jQuery('div#s1 > div');
var ordernum;
var pause_scroll = false;
$featured_item.find('img').fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
$image_container.hover(
function () {
jQuery(this).find("img").fadeTo("fast", 0.7);
},
function () {
jQuery(this).find("img").fadeTo("fast", 1);
}
);
function gonext(this_element){
$slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
$slider_control.find("div.featitem.active").removeClass('active');
this_element.addClass('active');
$slider_control.find("div.featitem.active img").fadeTo("fast", 1);
ordernum = this_element.find("span.order").html();
jQuery('#s1').cycle(ordernum - 1);
}
$featured_item.click(function() {
clearInterval(interval);
gonext(jQuery(this));
return false;
});
var auto_number;
var interval;
$featured_item.bind('autonext', function autonext(){
if (!(pause_scroll)) gonext(jQuery(this));
return false;
});
interval = setInterval(function () {
auto_number = $slider_control.find("div.featitem.active span.order").html();
if (auto_number == $featured_item.length) auto_number = 0;
$featured_item.eq(auto_number).trigger('autonext');
}, 5000);
});
//]]>
</script>
<script type='text/javascript'>
jQuery(function(){
jQuery('#s1').cycle({
timeout: 0,
speed: 1000,
fx: 'fade'
});
});
</script>
Luego antes de ]]></b:skin> pega los estilos del slider:
#gallery {Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y pega la estructura del slider:
width:616px; /* Ancho del contenedor general */
height:320px;
margin:0 0 20px 0;
float:left;
display:inline;
}
#featured-area {
height: 300px;
width:616px; /* Este ancho debe ser igual al contenedor general */
position: relative;
padding: 11px 0px 10px 0px;
z-index: 1;
}
#featured-area .pics {
position: absolute;
width: 490px; /* Ancho de las im?genes */
height: 298px;
top: 11px;
left: 14px;
}
#featured-area .pics div.excerpt {
background: #fff; /* Color de fondo de la descripci?n */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px; /* Ancho de los t?tulos */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%;
}
#featured-area .pics div.excerpt p {
color: #203136; /* Color de la descripci?n */
width:450px; /* Ancho de la descripci?n */
height:20px;
}
#featured-area .pics div.excerpt a {
font-size:18px; /* Tama?o de los t?tulos */
color: #000; /* Color de los t?tulos */
font-weight:bold;
text-decoration:none;
}
#featured-area .pics div.excerpt a:hover {
color: #ddd; /* Color de los t?tulos al pasar el cursor */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:12px; /* Tama?o del texto de la descripci?n */
width:450px; /* Ancho de la descripci?n */
padding:0px 0 10px 0;
}
#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px; /* Mismo ancho de las im?genes */
height:298px;
z-index: 1;
}
#featured-area div#slider-control {
position: absolute;
width: 110px;
height: 296px;
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}
#featured-area div#slider-control div.featitem {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5nUp2R2QqvxJPjoig7itscU9DEdxkKt5jLOAhkopfQJiT1niuYiGB5XThm3UcOHg9RTM31rZMSMH78jVgrZkJV03kheUK2A6lKVLlLKHbsUS2nYtsmf-F6ovv06QLVQMDJjCn6HZ4mQ/s1600/featitem-bg.png) no-repeat top left;
width: 76px;
height: 77px;
float: left;
padding: 10px 16px 12px 18px;
cursor: pointer;
}
#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6;
margin-top: 5px;
width:67px;
height:67px;
}
#featured-area div#slider-control div.featitem.active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Pyb1Hb8LZ5gtro2-YJBhMr0ep6feIENaR299hMeti9C3YYfPJl9JQlshJg1H79YIhzSqKc4gt5lEt1L7DvNbuaf_IR7-9dCpWzu37Uj-pAhuYoRixweG_KuSveNh91cQT7Uhb75eDAk/s1600/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {display:none;}
#featured-area div#slider-control div.featitem.active span.meta {border: 0px;}
#featured-area div#slider-control div.featitem span.order {display: none;}
#featured-area div#slider-control div.featitem span.meta {display:none;}
<div id='gallery'>
<div id='featured-area'>
<div class='pics' id='s1'>
<!-- Im?genes grandes -->
<div>
<img src='URL de la imagen UNO' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aqu? va la descripci?n.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>
<div>
<img src='URL de la imagen DOS' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aqu? va la descripci?n.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>
<div>
<img src='URL de la imagen TRES' style='width: 490px; height: 298px;'/>
<div class='excerpt'>
<p><a href='URL del enlace'>Lorem ipsum</a></p>
<p class='excerpt-text'>Aqu? va la descripci?n.</p>
</div>
<a href='URL del enlace'><span class='feat-overlay'/></a>
</div>
</div>
<div id='slider-control'>
<!-- Im?genes en miniatura -->
<div class='featitem active'>
<img src='URL de la imagen UNO' style='width: 67px ; height: 67px ;'/>
<span class='order'>1</span></div>
<div class='featitem '>
<img src='URL de la imagen DOS' style='width: 67px ; height: 67px ;'/>
<span class='order'>2</span></div>
<div class='featitem '>
<img src='URL de la imagen TRES' style='width: 67px ; height: 67px ;'/>
<span class='order'>3</span></div>
</div>
<div class='clear'/>
</div>
</div>
En este ?ltimo c?digo cambia donde se indica la URL de las im?genes y la URL de los enlaces. Notar?s que cada imagen se pone dos veces, esto es porque una es para la imagen grande y otra para las im?genes en miniatura.
Algo parecido sucede con los enlaces, ver?s que el enlace se pone dos veces, uno es para en enlace de la imagen grande, y otro para el enlace del titulo que est? arriba de la descripci?n.
En el primer c?digo ver?s en color azul un n?mero, este es el tiempo en milisegundos que tarda cada imagen en cambiar.
Como mencion� antes el slider est? dise?ado para mostrar s?lo tres im?genes porque aunque se podr?an agregar m?s quedar?a poco est�tico, cr�anme, no les gustar? el resultado si agregan m?s. Sin embargo pueden cambiar el ancho del slider, s?lo hay que poner atenci?n en las anotaciones que est?n en color verde dentro del segundo c?digo y en el tama?o de las im?genes del tercer c?digo.
Ah? mismo en el segundo c?digo hay ?reas que se pueden personalizar, como color del t?tulo, color de la descripci?n, etc. En el caso del fondo del ?rea de las miniaturas es una imagen, bueno en realidad son dos, y si se de desea cambiarlas de color hay que editar las URLs de las im?genes que se encuentran tambi�n en el segundo c?digo.
La verdad es que as? como est? el slider se ve muy bien, es de los pocos gadgets que no necesitan nada m?s que ponerlo en el blog y presumirlo a sus lectores.
No comments:
Post a Comment