Slideshow para blogger manual nuevo estilo
Estabas buscado un nuevo Slideshow y que
sea fácil de instalar, Ayudadeblogger.com, te lo trae así de rápido. Es indispensable
para un blog de blogger tener un Slideshow en su blog bien presentable, que se
ajuste con todas las normas y especificaciones de Google, no todos los
Slideshow cumplen con las reglas de un webmaster, ya que algunos Slideshow lo
que hacen es demorar el tiempo de carga de cualquier blog. Por eso he sido muy
cuidadoso en realizar un código que tenga las especificaciones correctas de un
webmaster. Anteriormente publique varios Slideshow, de los cuales les voy a
dejar los enlaces.
¿Cómo funciona este nuevo Slideshow para
Blogger?
La forma de insertar las imágenes es de
forma manual, y no automático, ustedes mismos tendrán que insertar el link de
cada imagen, como también un pequeño resumen de su post y un titulo del artículo
que quieran mostrar en su nuevo Slideshow.
Vamos a utilizar 3 secuencias de código que
es fácil de insertarlo en nuestro blog. Podrán cambiar el tamaño que ustedes
quieran, al insertar el link de la imagen de forma automática se configura su
anchura y altura. Además podrán aumentar en la última posición del código nuevas
imágenes para mostrar en su Slideshow. Lo podrán utilizar en la cabecera
principal, en un widget, en la parte final de plantilla, ya depende del uso que
ustedes lo quieran dar.
Bueno a continuación mire su demostración
en mi blog de demos, yo lo tengo puesto en un widget en la parte inferior de mi
blog.
Ahora nos dirigimos a trabajar!
1 Ir a Blogger
2 Dale un clic en “Plantilla”
Luego 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.
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}
|
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 rojo, y si quieres cambiar la altura de tu Slideshow, tendrás que
cambiar el número que esta marcado de color verde 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>
|
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
Ultimo
paso en el que aparecerá el Slideshow
Ahora viene tu decisión, si quieres que
se muestre el Slideshow en la cabecera principal de tu blog de blogger deberás
buscar este código <div id='main-wrapper'> y debajo del código
que encontraste deberás insertar el siguiente código.
<div
id='slider-holder'>
<div id='s3slider'>
<ul
id='s3sliderContent'>
<li
class='s3sliderImage' style='display: list-item;'>
<a href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'><img
src='http://2.bp.blogspot.com/-6N3-yPXeuYY/UUiPO-jhDCI/AAAAAAAACk4/oyRfKYAh18k/s1600/hostgator+widget+para+blogger.JPG'
style='width: 900px; height: 200px;'/></a>
<span style='display:
block;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'>Cuadro de
Comentarios</a><br/>
Expandir
Contraer cuadro de Comentarios en Blogger, metodo facil
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'><img
src='http://1.bp.blogspot.com/-wEK2GkDSnko/UUiSLmugrjI/AAAAAAAACl4/Qh0vLSMWax0/s1600/hostgator+widget+para+blogger.JPG'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'>Caja de Redes
Sociales</a><br/>
Insertar
caja de redes sociales en mi post de blogger, aplicarlo con facilidad
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'><img
src='http://2.bp.blogspot.com/-ltwz_WGLaaw/T-p9Vq2STII/AAAAAAAAASU/KNiX2pUPAdg/s1600/Cu%C3%A1les+son+los+sitios+de+Google+para+empresas.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'>Sitios de
Google</a><br/>
Cuáles
son los sitios de Google para empresas?.....
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'><img
src='http://2.bp.blogspot.com/-gja4ih5zDQc/T-abiWCvAFI/AAAAAAAAARA/W7-HUfjlb-8/s1600/Crear+una+p%25C3%25A1gina+de+negocios+en+Google+%252B+para+atraer+m%25C3%25A1s+clientes++%255BTutorial%255D.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'>NEGOCIOS EN
GOOGLE</a><br/>
Crear
una página de negocios en Google + para atraer más clientes
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'><img
src='http://4.bp.blogspot.com/-VpxPcM08qbU/T-aPPRAi7lI/AAAAAAAAAP8/81J67VSDVXw/s320/Las+20+mejores+t%25C3%25A1cticas+de+SEO+que+cada+blogger+debe+saber.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'>Tacticas para
Blogger</a><br/>
Las
20 mejores tácticas de SEO que cada blogger debe saber....
</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
rojo, 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
verde, 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 purpura, deberás cambiarlas por un pequeño resumen
en cada una de ellas.
Si te decidiste en insertar el código debajo
de la cabecera principal será el final de la inserción de tus códigos y podrás
dar un clic en “Guardar plantilla” y mirar tus nuevos cambios en tu blog.
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:
<div
id='slider-holder'>
<div id='s3slider'>
<ul
id='s3sliderContent'>
<li
class='s3sliderImage' style='display: list-item;'>
<a href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'><img
src='http://2.bp.blogspot.com/-6N3-yPXeuYY/UUiPO-jhDCI/AAAAAAAACk4/oyRfKYAh18k/s1600/hostgator+widget+para+blogger.JPG'
style='width: 900px; height: 200px;'/></a>
<span style='display:
block;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/expandir-contraer-cuadro-de-comentarios.html'>Cuadro de
Comentarios</a><br/>
Expandir
Contraer cuadro de Comentarios en Blogger, metodo facil
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'><img
src='http://1.bp.blogspot.com/-wEK2GkDSnko/UUiSLmugrjI/AAAAAAAACl4/Qh0vLSMWax0/s1600/hostgator+widget+para+blogger.JPG'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html'>Caja de Redes
Sociales</a><br/>
Insertar
caja de redes sociales en mi post de blogger, aplicarlo con facilidad
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'><img
src='http://2.bp.blogspot.com/-ltwz_WGLaaw/T-p9Vq2STII/AAAAAAAAASU/KNiX2pUPAdg/s1600/Cu%C3%A1les+son+los+sitios+de+Google+para+empresas.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/cuales-son-los-sitios-de-google-para.html'>Sitios de
Google</a><br/>
Cuáles
son los sitios de Google para empresas?.....
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'><img
src='http://2.bp.blogspot.com/-gja4ih5zDQc/T-abiWCvAFI/AAAAAAAAARA/W7-HUfjlb-8/s1600/Crear+una+p%25C3%25A1gina+de+negocios+en+Google+%252B+para+atraer+m%25C3%25A1s+clientes++%255BTutorial%255D.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/crear-una-pagina-de-negocios-en-google.html'>NEGOCIOS EN
GOOGLE</a><br/>
Crear
una página de negocios en Google + para atraer más clientes
</span>
</li>
<li
class='s3sliderImage' style='display: none;'>
<a href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'><img
src='http://4.bp.blogspot.com/-VpxPcM08qbU/T-aPPRAi7lI/AAAAAAAAAP8/81J67VSDVXw/s320/Las+20+mejores+t%25C3%25A1cticas+de+SEO+que+cada+blogger+debe+saber.jpg'
style='width: 900px; height: 200px;'/></a>
<span style='display:
none;'>
<a
class='featured-title block' href='http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html'>Tacticas para
Blogger</a><br/>
Las
20 mejores tácticas de SEO que cada blogger debe saber....
</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
rojo, 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
verde, 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 purpura, 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.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
8 comentarios: