SLIDESHOW PARA TU BLOC CON JQUERY.

Todas las personas que poseen un blog siempre tratan de hacerlo lo más atractivo posible para sus visitantes.

Y una gran opción para hacer tu blog más atractivo es añadiéndole un slideshow de imágenes.
En el slideshow puedes mostrar las imágenes más resaltantes, y puedes añadir la cantidad de imágenes que desees.

No sólo eso, podrás añadirle un título y una descripción breve para cada imagen, que al dar click en ellas te llevará al artículo correspondiente de la imagen que quieres hacer llegar a tus lectores ó visitantes.




Podrás ajustar el tamaño y ancho del slideshow, al igual que la velocidad de las imágenes que se muestra. Parece difícil, pero en realidad no lo es, sólo te tomará algunos pasos para tener este sencillo, pero elegante slideshow en tu blog.

Para instalarlo 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

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


</head>



Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(4500);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:500px;
height:350px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:500px;
height:350px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Si ya tienes el script de jQuery en tu plantilla, entonces no agregues lo que está de color verde. 

Guarda los cambios de tu plantilla.

4) Ahora necesitamos añadir un gadget,

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

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

4-Coloca el siguiente codigo en el interior

<ul class="slideshow">
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
<li><a href="#"><img src="URL de la imagen" title="Título de la imagen aquí" alt="Descripción de la imagen aquí" /></a></li>
</ul>

6) Ahora necesitas hacer los siguientes cambios:


> URL de la imagen: Aquí la URL de la imagen (el enlace).


> Título de la imagen aquí: Aquí le agregas un título a la imagen correspondiente.


> Descripción de la imagen aquí: Aquí le agregas una descripción breve de la imagen correspondiente.


> #: Los asteriscos son los enlaces de los artículos que enlazan las imágenes. 




Opcional:



> width:500px y height:350px son el ancho y el alto del slideshow y está en el código 2 veces, así que si decides cambiarlo, no te olvides de cambiarlo 2 veces también.


> width:500px y height:70px son el ancho y el alto del cuadro negro que va dentro del slideshow; es decir, donde va el título y la descripción de las imágenes.




> 4500: Esta es la velocidad con que se muestra cada imagen al pasar. Si aumentas su valor, la velocidad será menor. Si disminuyes su valor, cada imagen pasará más rápido.




7) Hecho los cambios respectivos, guardas los cambios de tu gadget y voyla! con eso tendrás un elegante slideshow en tu blog.

Despues de haber insertado el código, un clic en  "Guardar"

Fecha de la Publicación; 18-06-2019

 Fuente; masaudaz.

 Publicado por;                                      

ROTADOR DE IMÁGENES PARA TU BLOC.

Este es un bonito rotador de imagenes automático, hecho a base de css y JavaScript, y lo puedes ver Una Imagen a continuación.

Para instalarlo 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

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


</head>



Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 6000); //Duracion de tiempo en rotar (6 segundos)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

A coninuación toca el CSS, para eso buscamos ]]></b:skin> y encima pegamos estos codigos:

 Un clic en “Editar HTML”

  Ahora se te abrirá el Editor HTML de tu plantilla

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,

3 Busca el siguiente código


]></b:skin>


4 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

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:260px; width: 490px;/*--TAMAÑO DEL ROTADOR DE IMAGENES--*/
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
height:260px; width: 490px;/*--TAMAÑO DE LAS IMAGENES--*/
float: left;
}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 10px; right: -2px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfOhccnyNRubTZegLYORnRjbDNLvzD_2HkzyX1C-yO0rDf8oGKOWKm7l09mrUtZ_zUIEt3F5r8dz8RH0S-aVi2zy8P_FtDMAmMrdo2ZxjOM_ngzeQJyFE6PDa7lTHxR557KC-csot8Yuw/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Una vez hecho los pasos anteriores, GUARDAMOS PLATILLA.

3.- Para verlo en acción en nuestro blog, vamos a Diseño/Añadir un gadget/HTML/Javascript

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

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

4-Coloca el siguiente codigo en el interior

  

<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='URL DE TU ENLACE1'><img alt='' src='URL DE TU IMAGEN1'/></a>
<a href='URL DE TU ENLACE2'><img alt='' src='URL DE TU IMAGEN2'/></a>
<a href='URL DE TU ENLACE3'><img alt='' src='URL DE TU IMAGEN3'/></a>
<a href='URL DE TU ENLACE4'><img alt='' src='URL DE TU IMAGEN4'/></a>
</div>
</div>
<div class='paging'>
<a href='URL DE TU ENLACE1' rel='1'>1</a>
<a href='URL DE TU ENLACE2' rel='2'>2</a>
<a href='URL DE TU ENLACE3' rel='3'>3</a>
<a href='URL DE TU ENLACE4' rel='4'>4</a>
</div>
</div>

Despues de haber insertado el código, un clic en  "Guardar"

Fecha de la Publicación; 18-06-2019

 Fuente;  coquitoblogger

 Publicado por;                                                                       

PONER UNA LISTA DE REPRODUCCIÓN DE YOUTUBE A MI BLOC .

Hace tiempo que estaba pensando poner una lista de reproducción de Youtube a mis blogs. Por ello empecé a investigar cómo podía poner esta lista de reproducción con mis vídeos favoritos de una forma fácil.

Simplemente añadiendo un gadget html a mis blogs blogger. Por fin lo encontré y fue en el blog Ciudad Blogger.  Un sitio sin duda recomendado para visitar.

En él, el administrador comparte este código genial para hacer la lista de reproducción aleatoria de vídeos en nuestro blog.

Para ponerlo tendrías que entrar en tu cuenta blogger, luego.


1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

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

4-Coloca el siguiente codigo en el interior

<script type='text/javascript'>
//<![CDATA[
var vid = [ //La ID de los videos
"_20uZeoSq7c",
"_bxncSQvo_I",
"9d_vB32tE-o",
"GVA0LpC1h_s",
"hTuw9g6JWdA"
];
var ancho_vid = '480'; //Ancho del reproductor
var alto_vid = '295'; //Alto del reproductor
var ran_unrounded = Math.random()*vid.length;
var ran_number = Math.floor(ran_unrounded);

document.write('<object width="'+ancho_vid+'" height="'+alto_vid+'"><param name="movie" value="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vid[ran_number]+'&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="'+ancho_vid+'" height="'+alto_vid+'"></embed></object>');
//]]>
</script>

Despues de haber insertado el código, un clic en  "Guardar"

Donde está rojo tendríamos que poner el código del vídeo a utilizar. Para saber cual código tenemos que poner, visitamos el vídeo en Youtube y miramos la url en la barra de direcciones.

http://www.youtube.com/watch?v=GRhWlNNs_Po

Solo tendremos que copiar el mismo código del vídeo que queremos poner en la lista de reproducción y pegarlo en el código rojo de arriba.

Desde el código verde podréis cambiar el tamaño del vídeo y ajustarlo a vuestra web (cambiando el número del ancho y el alto).

Espero que os haya servido esta información. Tras mucho tiempo buscando por fin lo encontré.

Gracias a Ciudad Blogger por compartir este magnífico código.


Fecha de la Publicación; 18-06-2019

 Fuente;  Ciudad Blogger

 Publicado por;