La verdad es que eso de TriSlider me lo he inventado porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto ...

OTRO SLIDER CON JQUERY

 




La verdad es que eso de TriSlider me lo he inventado porque no tengo la menor idea de cómo se llame este slider, pero muchos lo han visto en la plantilla Dilegno Star: https://btemplates.com/2010/blogger-template-dilegno-star/

 y me han pedido que lo publique, así que mientras aparece el nombre real de este slider vamos a llamarlo así.


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:

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:




 Un clic en “Plantilla”


 Un clic en “Editar HTML”


Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, 

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.



 Coloca este código en el buscador y dale un "Enter"



</head>




Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste




<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<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(&#39;#s1&#39;).cycle({
timeout: 0,
speed: 1000,
fx: &#39;fade&#39;
});

});
</script>



Cambia donde se indica, la URL del archivo que subiste previamente.


Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”



  Un clic en “Editar HTML”


  Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, 

 Busca el siguiente código


]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste


#gallery {
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/AVvXsEjnt37Oos3lP6_tVZMgdSJSP8fIs_WWSBbREtuNIECcWImaMX35_-xwIhZ_Cal9Pv6SsinC2_L39_qOrgEyW_85c4M2z118mRBBBPeE83aK464v-3fZHxSoYGny7quhu-tYHU_jM0-hrhY/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/AVvXsEgiv7-jTpNoHO_9qWxC_B6CuWJsQIKe_NJBSBSU6BRA42DCdOiTuuwFYCrVlX6pbXADoUeQtcx9M_bTW2Cq0dxeKKTo5ZAftD5L-Vkw1PgTWYiz1EGNoU_KKsYmO6TPXDRJRUqWD0cOffA/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;}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega la estructura del slider:-


Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el interior

Después de haber insertado el código, un clic en "Guardar"



<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.



0 comentarios:

  GALERÍA DE IMAGENES GIRATORIA 3D "BLOGS KIRADOBER" La galería de imágenes es una característica muy útil de la aplicació...

GALERÍA DE IMÁGENES GIRATORIA 3D

 




GALERÍA DE IMAGENES GIRATORIA 3D
"BLOGS KIRADOBER"


La galería de imágenes es una característica muy útil de la aplicación web. Básicamente, la galería de imágenes ayuda a agrupar las imágenes en una vista fácil de usar en la página web. El efecto 3D hace que la galería de imágenes sea más atractiva y proporciona una mejor interfaz de usuario. Este tutorial le mostrará cómo puede crear una galería de imágenes 3D utilizando CSS puro en el sitio web.
Hay muchos complementos de jQuery disponibles para crear una galería de imágenes en 3D. Pero el complemento de terceros aumenta el tamaño de la página web, lo que afecta el tiempo de carga de su sitio web. Por lo tanto, si desea crear una galería de imágenes en 3D con CSS sin utilizar un complemento, nuestros conceptos de CSS en 3D lo ayudan a hacerlo fácilmente.
 Stu Nicholls es su creador y te puedes descargar el codigo completo haciendo click aqui.: Ir al Sitio

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

 Un clic en “Diseño”                                           


Clic en “Añadir un gadget”                        


Busca el widget que dice “HTML-Javascript” y ábrelo

                                                                                      


Coloca el siguiente código en el interior

                                                                              


Después de haber insertado el código, un clic en "Guardar"


                                                                                       



                                                                                   


<div class="container">
<div class="rotate">
<img class="p1" src="URL DE LA IMAGEN" alt="" />
<img class="p2" src="URL DE LA IMAGEN" alt="" />
<img class="p3" src="URL DE LA IMAGEN" alt="" />
<img class="p4" src="URL DE LA IMAGEN" alt="" />
<img class="p5" src="URL DE LA IMAGEN" alt="" />
<img class="p6" src="URL DE LA IMAGEN" alt="" />
<img class="p7" src="URL DE LA IMAGEN" alt="" />
<img class="p8" src="URL DE LA IMAGEN" alt="" />
<img class="p9" src="URL DE LA IMAGEN" alt="" />
</div>
</div>

<style type="text/css">
.container {width:480px; height:280px; margin:250px 0;
-webkit-perspective:1200px;
perspective:1200px;
}
.rotate {width:480px; height:280px; position:relative;
-webkit-transform-style:preserve-3d; /* for Chrome */
transform-style:preserve-3d; /* for Firefox */
/* IE10 does not support preserve-3d so will ignore the above */
-webkit-transform: translate3d(0,0,-700px);
-webkit-perspective:1200px;
transform: translate3d(0,0,-700px);
perspective:1200px;
}
.rotate img {width:480px; height:280px; position:absolute; left:0; top:0; perspective:1200px;}

.p1 {
-webkit-animation:spin1 10s infinite linear;
animation:spin1 10s infinite linear;
}
.p2 {
-webkit-animation:spin2 10s infinite linear;
animation:spin2 10s infinite linear;
}
.p3 {
-webkit-animation:spin3 10s infinite linear;
animation:spin3 10s infinite linear;
}
.p4 {
-webkit-animation:spin4 10s infinite linear;
animation:spin4 10s infinite linear;
}
.p5 {
-webkit-animation:spin5 10s infinite linear;
animation:spin5 10s infinite linear;
}
.p6 {
-webkit-animation:spin6 10s infinite linear;
animation:spin6 10s infinite linear;
}
.p7 {
-webkit-animation:spin7 10s infinite linear;
animation:spin7 10s infinite linear;
}
.p8 {
-webkit-animation:spin8 10s infinite linear;
animation:spin8 10s infinite linear;
}
.p9 {
-webkit-animation:spin9 10s infinite linear;
animation:spin9 10s infinite linear;
}

/* for Chrome */
@-webkit-keyframes spin1 {
0% {-webkit-transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); opacity:1;}
55% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); opacity:1;}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); opacity:0.9;}
44% {opacity:0.5;}
88% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); opacity:0.9;}
}
@-webkit-keyframes spin3 {
0% {-webkit-transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); opacity:0.8;}
33% {opacity:0.5;}
77% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin4 {
0% {-webkit-transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); opacity:0.7;}
22% {opacity:0.5;}
66% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin5 {
0% {-webkit-transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); opacity:0.6;}
11% {opacity:0.5;}
55% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin6 {
0% {-webkit-transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); opacity:0.6;}
44% {opacity:1;}
100% {-webkit-transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); opacity:0.6;}
}
@-webkit-keyframes spin7 {
0% {-webkit-transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); opacity:0.7;}
33% {opacity:1;}
88% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); opacity:0.7;}
}
@-webkit-keyframes spin8 {
0% {-webkit-transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); opacity:0.8;}
22% {opacity:1;}
77% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); opacity:0.8;}
}
@-webkit-keyframes spin9 {
0% {-webkit-transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); opacity:0.9;}
11% {opacity:1;}
66% {opacity:0.5;}
100% {-webkit-transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); opacity:0.9;}
}

/* IE10 require z-index to stack the images in the right order - other browsers use preserve-3d */
@keyframes spin1 {
0% {transform: rotateY(40deg) rotateX(0deg) translate3d(0,0,350px) rotateX(0deg) rotateY(-40deg); z-index:10; opacity:1;}
11% {opacity:1; z-index:10;}
55% {opacity:0.6; z-index:6;}
100% {transform: rotateY(40deg) rotateX(360deg) translate3d(0,0,350px) rotateX(-360deg) rotateY(-40deg); z-index:10; opacity:1;}
}
@keyframes spin2 {
0% {transform: rotateY(40deg) rotateX(40deg) translate3d(0,0,350px) rotateX(-40deg) rotateY(-40deg); z-index:9; opacity:0.9;}
44% {opacity:0.5; z-index:6;}
88% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(400deg) translate3d(0,0,350px) rotateX(-400deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}
@keyframes spin3 {
0% {transform: rotateY(40deg) rotateX(80deg) translate3d(0,0,350px) rotateX(-80deg) rotateY(-40deg); z-index:8; opacity:0.8;}
33% {opacity:0.5; z-index:6;}
77% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(440deg) translate3d(0,0,350px) rotateX(-440deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin4 {
0% {transform: rotateY(40deg) rotateX(120deg) translate3d(0,0,350px) rotateX(-120deg) rotateY(-40deg); z-index:7; opacity:0.7;}
22% {opacity:0.5; z-index:6;}
66% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(480deg) translate3d(0,0,350px) rotateX(-480deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin5 {
0% {transform: rotateY(40deg) rotateX(160deg) translate3d(0,0,350px) rotateX(-160deg) rotateY(-40deg); z-index:6; opacity:0.6;}
11% {opacity:0.5; z-index:6;}
55% {opacity:1; z-index:10;}
100% {transform: rotateY(40deg) rotateX(520deg) translate3d(0,0,350px) rotateX(-520deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin6 {
0% {transform: rotateY(40deg) rotateX(200deg) translate3d(0,0,350px) rotateX(-200deg) rotateY(-40deg); z-index:6; opacity:0.6;}
44% {opacity:1; z-index:10;}
88% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(560deg) translate3d(0,0,350px) rotateX(-560deg) rotateY(-40deg); z-index:6; opacity:0.6;}
}
@keyframes spin7 {
0% {transform: rotateY(40deg) rotateX(240deg) translate3d(0,0,350px) rotateX(-240deg) rotateY(-40deg); z-index:7; opacity:0.7;}
33% {opacity:1; z-index:10;}
77% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(600deg) translate3d(0,0,350px) rotateX(-600deg) rotateY(-40deg); z-index:7; opacity:0.7;}
}
@keyframes spin8 {
0% {transform: rotateY(40deg) rotateX(280deg) translate3d(0,0,350px) rotateX(-280deg) rotateY(-40deg); z-index:8; opacity:0.8;}
22% {opacity:1; z-index:10;}
66% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(640deg) translate3d(0,0,350px) rotateX(-640deg) rotateY(-40deg); z-index:8; opacity:0.8;}
}
@keyframes spin9 {
0% {transform: rotateY(40deg) rotateX(320deg) translate3d(0,0,350px) rotateX(-320deg) rotateY(-40deg); z-index:9; opacity:0.9;}
11% {opacity:1; z-index:10;}
55% {opacity:0.5; z-index:6;}
100% {transform: rotateY(40deg) rotateX(680deg) translate3d(0,0,350px) rotateX(-680deg) rotateY(-40deg); z-index:9; opacity:0.9;}
}

</style>


                                                                                  


Data de la Publicación; 09-09-2020


 Publicado por;                                                         










0 comentarios:

Post Recientes