SLIDESHOW PARA LA PARTE INFERIOR DE TU BLOC
Si qieres ver su funcionamiento dale clic aqui debajo.
Nota: Es recomendable cuando se mete mano a la plantilla para retocar o incluir algún código hacer una copia de seguridad por si las moscas herramos o nos equivocamos en alguna cosa sabemos que tenemos la espalda cubierta, (Solo es un consejo.)
Trucos para Blogger Kiradober : No se responsabiliza, si no realizaste correctamente la inserción del código, para más detalles específicos, puedes visitar el siguiente enlace:
1-Vamos a "Plantilla"
2-Abre "Editar HTLM"
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.
Busca este código ]]></b:skin> y encima de el inserta las siguientes líneas de código.
/* SLIDESHOW start Ayudadeblogger*/
#slider-holder{width:900px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:900px;height:660px;position:relative;overflow:hidden}
#s3sliderContent{width:900px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:900px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}
#slider-holder{width:900px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:900px;height:660px;position:relative;overflow:hidden}
#s3sliderContent{width:900px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:900px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}
Si quieres cambiar la anchura del Slideshow y hacerlo mas pequeño, solo basta con cambiar los números que están marcados de color verde y si quieres cambiar la altura de tu Slideshow, tendrás que cambiar el número que esta marcado de color naranja por el número que tú quieras.
También deberás buscar este código </head> y encima de el inserta la siguiente secuencia de código
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//--><!]]></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
“Ultimo paso en el que aparecerá el Slideshow”,
En este punto es muy importe que te enteres de lo siguiente, si ya utilizas en tu blog de blogger un script, tendrás que borrar solo el script que esta marcado de color rojo, si no lo haces no se vería bien este Slideshow en tu blog, y si no utilizas ningún script en tu blog inserta todo el código tal y cual lo explico, y si ya utilizas un script similar a este, borra solo el código que esta marcado de color rojo: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
Ahora el ultimo paso
Y si quieres que tu Slideshow aparezca en un widget en la parte inferior de tu blog de blogger o en cualquier sección, omite la inserción del código en la parte que dice “Ultimo paso en el que aparecerá el Slideshow”, desde este punto, deberás dirigirte a “Diseño” y abrir “Añadir un gadget” y busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Coloca el siguiente codigo en el interior
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=6998880464736570415;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=1;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5dDoJ2YxhF77_6U0yCA0Z98JpgonKnsuYXJdEPDk-_wHUprXV_jGLie3vk7SIUokXtAjJQMXd4CcjrYh_M83v5d-sQbY7xsepWfNso01G7vG9gopqQxj_0r_LpDARoJJJzlledNG4Bx8/s1600/7BA_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=6998880464736570415;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=1;src=link'>formulario de contactos de blogger</a><br/>
formulario de contactos de blogger en una pagina
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=3063257186668154408;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=3;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNqYmOmKvauszHJtAqy5xLQLBbYBSoZM9mJkMOjk568uAzoIj9O_cECEqyxV4ZA9AdexJFne5F8IuZ59d_6318jc2n3rC8VhRcP3aCXgis6BI-ztz8NQMyjF1sitzTPNl7lVaiILPI87G/s1600/419_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=3063257186668154408;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=3;src=link'>caja de aviso sencilla </a><br/>
caja de aviso sencilla para tu blog
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=9066327521844465093;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=2;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdw8mZvsFz4SROR7-iFBnhy7-AaPTCqNYegkFKCAA-Z65GkirQ5vdiz9cbR4oMgZ3asGNbmo_kILx4mC9yb9FjSdoomMQbi2VBDHjBTImproOsRJ2lf-nsEZgyyHSud5cpwP1cxoX2vZd2/s1600/850_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=9066327521844465093;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=2;src=link'>Slideshow para la parte inferior de tu blog </a><br/>
Slideshow para la parte inferior de tu blog ?.....
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=7792332674002187739;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=4;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6861BnspyY2Hhz1WK6gp1AF8V63UaP3rm0X3WD4vrJQQgAWozJEHr2H40s232ET7aEZVTUygXY2Ags_Wo4Z4iVNBHJLsIkr0DDmwHxavb_bvbDSuub9rqnWygczOFmx0OLD24RdKUpPjj/s1600/ani-matrix_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=7792332674002187739;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=4;src=link'>buscador de Google sólo de imágenes</a><br/>
buscador de Google sólo de imágenes
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=515691632471568827;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=9;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCe_iwz8EJ0a0uXTOggEPUOca3OZYkE-UtXGX8I4niS_eohXjJ_C5IipAED0HVQ5MMC3axF0xkHJkYRhvKcC_slvQci-0LTppVWs-hmgKFlo5M89yxfJ4Uy2K5QgL-UhU8vJVHgamfUDh/s1600/caveira+de+fogo+quebrando+guitarra+577_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=515691632471568827;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=9;src=link'>Imagen que aparece </a><br/>
Imagen que aparece con efecto deslizante...
</span>
</li>
<li class='clear s3sliderImage'/>
</li></ul>
</div>
</div>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=6998880464736570415;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=1;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5dDoJ2YxhF77_6U0yCA0Z98JpgonKnsuYXJdEPDk-_wHUprXV_jGLie3vk7SIUokXtAjJQMXd4CcjrYh_M83v5d-sQbY7xsepWfNso01G7vG9gopqQxj_0r_LpDARoJJJzlledNG4Bx8/s1600/7BA_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=6998880464736570415;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=1;src=link'>formulario de contactos de blogger</a><br/>
formulario de contactos de blogger en una pagina
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=3063257186668154408;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=3;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNqYmOmKvauszHJtAqy5xLQLBbYBSoZM9mJkMOjk568uAzoIj9O_cECEqyxV4ZA9AdexJFne5F8IuZ59d_6318jc2n3rC8VhRcP3aCXgis6BI-ztz8NQMyjF1sitzTPNl7lVaiILPI87G/s1600/419_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=3063257186668154408;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=3;src=link'>caja de aviso sencilla </a><br/>
caja de aviso sencilla para tu blog
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=9066327521844465093;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=2;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdw8mZvsFz4SROR7-iFBnhy7-AaPTCqNYegkFKCAA-Z65GkirQ5vdiz9cbR4oMgZ3asGNbmo_kILx4mC9yb9FjSdoomMQbi2VBDHjBTImproOsRJ2lf-nsEZgyyHSud5cpwP1cxoX2vZd2/s1600/850_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=9066327521844465093;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=2;src=link'>Slideshow para la parte inferior de tu blog </a><br/>
Slideshow para la parte inferior de tu blog ?.....
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=7792332674002187739;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=4;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6861BnspyY2Hhz1WK6gp1AF8V63UaP3rm0X3WD4vrJQQgAWozJEHr2H40s232ET7aEZVTUygXY2Ags_Wo4Z4iVNBHJLsIkr0DDmwHxavb_bvbDSuub9rqnWygczOFmx0OLD24RdKUpPjj/s1600/ani-matrix_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=7792332674002187739;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=4;src=link'>buscador de Google sólo de imágenes</a><br/>
buscador de Google sólo de imágenes
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=515691632471568827;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=9;src=link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCe_iwz8EJ0a0uXTOggEPUOca3OZYkE-UtXGX8I4niS_eohXjJ_C5IipAED0HVQ5MMC3axF0xkHJkYRhvKcC_slvQci-0LTppVWs-hmgKFlo5M89yxfJ4Uy2K5QgL-UhU8vJVHgamfUDh/s1600/caveira+de+fogo+quebrando+guitarra+577_600x300.jpg' style='width: 600px; height: 300px;'/></a>
<span style='display: none;'>
<a class='https://www.blogger.com/blogger.g?blogID=7639838625886183004#editor/target=post;postID=515691632471568827;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=9;src=link'>Imagen que aparece </a><br/>
Imagen que aparece con efecto deslizante...
</span>
</li>
<li class='clear s3sliderImage'/>
</li></ul>
</div>
</div>
Realiza estos cambios:
Los links que están marcados de color azul, deberás remplazarlos por los links correspondientes de tus post.
Los links que están marcados de color Amarillo, son los que sirven para mostrar las imágenes de tus post, deberás insertar cada uno de ellos en los diferentes links que están marcados de color rojo y remplazarlos por los tuyos.
Las letras que están marcadas de color Azul electrico, caberas cambiarlas por el titulo que tu quieras que se muestre en tu Slideshow
Y por último las palabras que se encuentran marcadas de color Gris deberás cambiarlas por un pequeño resumen en cada una de ellas.
Eso es todo, dale un clic en “Guardar” y ubica tu widget donde quieras mostrar este nuevo Slideshow.
