domingo, enero 12, 2014

[ TutosBlogs ] Slide automático con jquery

By: Ghaaby Captor | Fecha: 1/12/2014 |
Slide automático con jquery para blogger o pagina web

Hola mis loqueros!!  espero que estén muy bien!   yo aquí con otro tutorial jajaja ya me obsesione con esto  pero es que me gusta hacer cosas que te llamen la atención  y te hace pensar yo quiero hacerlo!!  y por hay  sale mi animo de hacer tutoriales  . . . en esta ocasión trata sobre colocar un Slide con efecto jquery! para mi este ha sido uno de los slide que me ha impresionado . . . espero que les gusten!


VIDEO TUTORIAL



Deben irse al escritorio del blog  plantilla  edición de html ► Ctrl + F 
(para la barra de búsqueda)

1- Deben buscar el siguiente código </head> y arriba de el coloquen estos Script
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/jmpress.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/jquery.jmslideshow.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/modernizr.custom.48780.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/jmpress.min.js' type='text/javascript'/>


NOTASi algunos de estos script ya posees no es necesario repetirlo o sino te dará error




2 - Busquen </body> y arriba de el coloquen este código
<script type='text/javascript'>
$(function() {
var jmpressOpts = {
animation : { transitionDuration : &#39;0.8s&#39; }
};
$( &#39;#jms-slideshow&#39; ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: &#39;0.8s&#39;,
arrows : false
}));
});
</script>


Este hará que las imágenes se cambien automáticamente


3- Agregamos el estilo lo cual deben buscar ]]></b:skin> y arriba de este peguen el siguiente código:
.jms-slideshow {
position: relative;
width: 80%;
max-width: 1400px;
min-width: 640px;
margin: 20px auto;
height: 460px;
}
.jms-wrapper {
width: auto;
min-width: 600px;
height: 440px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;    
background-clip: padding-box;
border: 10px solid #fff;
border: 10px solid rgba(255, 255, 255, 0.9);
outline: none;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.color-1 {
    background: URL(http://2.bp.blogspot.com/-ravFnEgk1mo/Ushf8tkSXuI/AAAAAAAASKo/e6v2eCIAUwk/s1600/1.jpg);
}
.color-2 {
    background: URL(http://2.bp.blogspot.com/-HIwrb1WiYes/Ushf8LpXYyI/AAAAAAAASKk/_tbGfNdpI4s/s1600/2.jpg);
}
.color-3 {
    background: URL(http://4.bp.blogspot.com/-zOyjR9hKvgI/UshiQpvIMpI/AAAAAAAASLk/3M8mi0BkXZE/s1600/55.jpg);
}
.color-4 {
    background: URL(http://2.bp.blogspot.com/-J10GQj11Ywg/UshgCv6J42I/AAAAAAAASLE/JrRxy5YBME4/s1600/4.jpg);
}
.color-5 {
    background: URL(http://3.bp.blogspot.com/-gq-VXu0OM5o/UshgBQ5IdrI/AAAAAAAASK8/UtiayYMNyx4/s1600/5.jpg);
}
.step { width: 900px;
    height: 420px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.jms-content{
margin: 0px 370px 0px 20px;
position: relative;
clear: both;
}
.step h3{
color: #fff;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
a.jms-link{
color: #fff;
text-transform: uppercase;
background: #969696; /* Old browsers */
background: -moz-linear-gradient(top, #969696 0%, #727272 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(100%,#727272)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #969696 0%,#727272 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #969696 0%,#727272 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #969696 0%,#727272 100%); /* IE10+ */
background: linear-gradient(top, #969696 0%,#727272 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#727272',GradientType=0 ); /* IE6-9 */
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
-webkit-transition: all 0.4s ease-in-out 1s;
-moz-transition: all 0.4s ease-in-out 1s;
-ms-transition: all 0.4s ease-in-out 1s;
-o-transition: all 0.4s ease-in-out 1s;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 30px;
}
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.jms-arrows{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
/* Not supported style */
.jms-wrapper.not-supported{
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.jms-wrapper.not-supported:after{
content: 'The slideshow functionality is not supported on your device.';
padding: 0px 0px 30px 0px;
text-align: center;
display: block;
}
.jms-wrapper.not-supported .step{
display: none;
position: relative;
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
margin: 20px auto;
}
.jms-wrapper.not-supported .step:first-of-type{
display: block;
}
.jms-wrapper.not-supported .step:not(.active) a.jms-link{
opacity: 1;
margin-top: 40px;
}

Ahora Guarden los cambios

4- Y ya solo falta colocar el código HTML lo pueden colocar en una entrada o un gadget (a donde quieran) este es su código:

<section class="jms-slideshow" id="jms-slideshow">
    <div class="step" data-color="color-2">
<div class="jms-content">
<h3>TITULO 1</h3>
AQUI VA EL CONTENIDO 1<br />
<a class="jms-link" href="URL-DE-LA-PAGINA 1">Ver Mas</a>
     </div>
<img src="URL-DE-LA-IMAGEN 1" />
    </div>

<div class="step" data-color="color-3" data-rotate-x="80" data-y="900">
<div class="jms-content">
<h3>TITULO 2</h3>
AQUI VA EL CONTENIDO 2<br />
<a class="jms-link" href="URL-DE-LA-PAGINA 2">Ver Mas</a>
     </div>
<img src="URL-DE-LA-IMAGEN 2" />
    </div>

<div class="step" data-color="color-4" data-rotate="170" data-x="-100" data-z="1500">
<div class="jms-content">
<h3>TITULO 3</h3>
AQUI VA EL CONTENIDO 3<br />
<a class="jms-link" href="URL-DE-LA-PAGINA 3">Ver Mas</a>
     </div>
<img src="URL-DE-LA-IMAGEN 3" />
    </div>

<div class="step" data-color="color-5" data-x="3000">
<div class="jms-content">
<h3>TITULO 4</h3>
AQUI VA EL CONTENIDO 4<br />
<a class="jms-link" href="URL-DE-LA-PAGINA 4">Ver Mas</a>
     </div>
<img src="URL-DE-LA-IMAGEN 4" />
    </div>

<div class="step" data-color="color-1" data-rotate-y="45" data-x="4500" data-z="1000">
<div class="jms-content">
<h3>TITULO 5</h3>
AQUI VA EL CONTENIDO 5<br />
<a class="jms-link" href="URL-DE-LA-PAGINA 5">Ver Mas</a>
     </div>
<img src="URL-DE-LA-IMAGEN 5" />
    </div>

</section>


Guarden los cambios y listo!

Gracias por tu visita!
avatar
Rei Osaki:
Admin
12 de enero de 2014, 4:34

Hola Ghaaby! Cuánto tiempo! :D ¿Cómo te va todo? Espero que bien ^^ Hacía tiempo que no pasaba por aquí... He visto la demo de esta entrada y hay dos en los que falla... :S Aunque no sé si será mi ordenador o es que falla de verdad, pero está muy chulo :D

Un besito! :)

avatar
eri-san
Admin
12 de enero de 2014, 5:05

Uiui que complicado todoooo jajajaja
Pues si que he empezado las clases, pero esya semana solo voy tres dias por cambios de horario y tonterias.varias jaja
Pasate por mi blog que hay muchas mas entradas que igual te gustan, que he hecho un monton de entradas de mangas conocidos!

avatar
Yurika
Admin
12 de enero de 2014, 6:13

muy buen tutorial, gracias ^^

avatar
R
Admin
12 de enero de 2014, 7:13

Hola Ghaaby, paso en primera para desearte una muy feliz navidad y un muy feliz y productivo 2014, espero que sigamos en contacto sobre todo jajaja.
Ahora, es muy útil lo que propones, sabes algo? nunca supe como eso de "head", por que me pregunto: si luego quiero colocar otra aplicación y también me dice: colócalo antes de "head", pero si antes ya coloqué por ejemplo este, no afecta? y mi temor por ejemplo que si no sabes usar bien la plantilla una vez que cambia y por azares del destino cometes un error, ya es difícil regresarla como antes, bueno hablo con cosas que he leído, pero tu eres la experta, sería genial si me ayudas a resolver esa duda que he tenido por mucho tiempo.
Te mando un beso enorme, un abrazo, tu blog cada vez más precioso, es todo un placer poder seguir intercambiando mensajes contigo.
Estamos en contacto.
R.

avatar
Lee Rae Mi
Admin
12 de enero de 2014, 7:50

Waa~Amigus*#*como estas?que haz hecho?dime!!!D-I-M-E@0@
ok yap,Me gusta como se ve,y la tutorial aun mas...lo voy a tratar con alguna plantilla!!
saludos&besos~

avatar
Bam
Admin
12 de enero de 2014, 8:00

Woow este me vendría genial así que creo que lo usare n.n
Muchas Gracias por ponerlo!
Besos!

avatar
12 de enero de 2014, 8:31

Si que te estas dedicando mucho a tu blog, esta hermoso, como siempre, gracias por el aporte <3

avatar
POPOTAN
Admin
12 de enero de 2014, 8:45

>.< Interesante efecto... muy bueno... aunque antes me parecia excelemte para mi blog... ahora como que no me gusta... -.-! cosas mias... xD bueno... que pudo dcir... te obsecionaste con los video-tutoriales... que bueno ps... me gusta mucho tu voz-... aunque debo decir que la cancion de InuYacha... no la reconocí hasta que leí que le pertenecía... será porque no he visto esa peris ps :3
Bueno... la verdad que aun que me esfuerzo por publicar a diario o mas seguido... siempre trato de separar un poco de tiempo para mi... claro despues de mi secuestro en el trabajo, es claro que quiero y me lomeresco :p
La verdad que como te lo habia dicho antes... fotos de cosplay tengo... a por montones... y cientos de imagenes... tantas que aun dia publicaré 300... bueno tampoco no creo... aun que si tengo un cosplay de mas de 500 creo que maypr mente bnsepararé por bloques esos cosplay extensos... bueno ademá que me ha llegado material mucho mas del genero Ecchi.-.. >///< en que estaran pensando las cosplayer de hjoy en dia?...
bueno,, la verdad que tembien recuperaré mi afición por publicar letras de canciones y por ahí quizas le de la oportunidad a INUYACHA... pero no creo... primero trendria que ver la serie :p
Bueno... espera la pases escelente y que soples cientos de dientes de leon... Besos Ighaby.

avatar
Haruko
Admin
12 de enero de 2014, 19:37

otro buen tuto!
pero antes de opinar, tengo que decirlo, ¡¡te pasaste con la música de inicio!!! <3 <3 <3 es que también adoro esa canción, es de mi infancia(no, no estoy tan vieja .-.) pero con escucharla suspiro por el perro inuyasha, mi lindo perrito...ejem, donde iba? ah! el tuto estuvo bueno, lo voy a poner en marcha, o bueno, a intentarlo ^^ gracias por las explicaciones ^v^
saludame al orejudo!!! :3

avatar
Citu
Admin
12 de enero de 2014, 19:39

Uy se ve genial y re difícil. si me atrevo hacerlo te digo para que me ayudes Un beso y te me cuidas.

avatar
YoSueño
Admin
13 de enero de 2014, 4:20

FELICIDADES por tu trabajo es estupendo.Un ABRAZO
Que tengas un buen comienzo de semana.

avatar
Lia A.G.
Admin
13 de enero de 2014, 14:34

Excelente tutorial:)

avatar
14 de enero de 2014, 12:57

wuuuuaaaaaaauu me encanta el tutorial *-*

avatar
Genesis
Admin
15 de enero de 2014, 7:16

waa cuando cmbie el diseño lo hagoo

avatar
17 de enero de 2014, 3:43

Waaa!! Me encanto los efectos! Vi la demo y está hermoso todo!
Espero que estés bien :3

Besos~

avatar
Anyi
Admin
18 de enero de 2014, 7:32

Haces que parezca fácil... Pues sentía curiosidad como se hacía esto.

muchas gracias por el tutorial, la verdad es que se agradecen mucho!

un besooo

avatar
YoSueño
Admin
18 de enero de 2014, 8:54

Hola Ghaaby, me alegro que disfrute y te lo pases bien mientra aprendes, que tengas un estupendo fin de semana. Un ABRAZO

avatar
Eme San
Admin
18 de enero de 2014, 11:01

Gracias, estaba buscando esto desde hace tiempo

avatar
27 de enero de 2014, 7:18

Hola! pues en mi opinion es verdad que hay trucos o efectos que hacen que tu plantilla se ponga loca! pero es por eso que hay la opcion de descargar tu plantilla y con eso puedes estar segura de que si algo pasa puedes volver a la normalidad pero. . . . hay veces que uno agrega y agrega entonces ya no sabes de que trata ese codigo, yo los identifico con
y con eso por lo menos se de que son los codigos

avatar
Kai
Admin
28 de agosto de 2014, 8:46

Muy buen tutorial :D
Me encantó ^-^
Si no te importa, lo pondré en mi blog :)
Un saludo ~

avatar
Anónimo
Admin
29 de abril de 2015, 13:50

Exlelente pagina y muy buen tutorial, :)