Slideshow para Blogger

En Blogger se puede crear diferentes tipos de estilos de Slideshow para blogger, en la actualidad existen muchos Slideshow para blogger gratis, pero de los cuales solo algunos son los que funcionan, es por eso que Ayuda de blogger se dedica a publicar solo temas de interés que realmente funcionen en cualquier tipo de plantillas de blogger. Hoy aprenderás a implementar un nuevo y espectacular Slideshow para blogger, este tutorial de Slideshow para blogger es muy práctico y fácil de instalarlo en tu blog de blogger. Este nuevo Slideshow para blogger mostrara hasta 5 publicaciones en el slider de forma automática, según vayas publicando tus nuevos temas y al dar un clic en la imagen o en el titulo del Slideshow se te abrirá el post.

Anteriormente publique algunos Slideshow para blogger de los cuales también te puede interesar cualquiera de ellos:

A continuación mire su demostración en mi blog de demos

Te gusto!

Ahora vamos a seguir las instrucciones de configuración

1 Ir a blogger

2 Da un clic en “Plantilla”

3 Luego presiona “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.

4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontraste

/* Slide Contentendor start by Ayudadeblogger.com

----------------------------------------------- */

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;

word-wrap: break-word; overflow: hidden;}

.slide {color: #666666;line-height: 1.3em;}

.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}

.slide li {margin:0;padding-top:0;

padding-right:0;padding-bottom:.25em;

padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

/* grupodelecluse.com */

#slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);

border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}

.slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}

ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMpyTNO29VEIKsUdhxmpliSCuFGMnOzmXL06Wzsgk2LAz8K0Qan9fzeaj4WxgQwKi4mVv17CyImKdLyIoqaTQr26v09OJP4Y50i5PZioH0ZWW376GuU1x1ef9qP-ARM9-mXQhwFz4nbRT/s1600/transparant.png);padding:10px}

ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}

ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}

ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}

ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}

ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}

.slider-opacity li{position:absolute;top:0;left:0;float:inherit}

ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}

ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}

ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}

.slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}

.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}

.slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}

.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}

.slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}

.slider-navigator li.active img{border:#eee solid 1px}

.slider-navigator li.active h5{color:#0178d3}

5 Busca este código

</head>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código arriba del código que encontraste:

//<![CDATA[

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {

setup: function() {

if ( this.addEventListener )

for ( var i=types.length; i; )

this.addEventListener( types[--i], handler, false );

else

this.onmousewheel = handler;

teardown: function() {

if ( this.removeEventListener )

for ( var i=types.length; i; )

this.removeEventListener( types[--i], handler, false );

else

this.onmousewheel = null;

}

};

$.fn.extend({

mousewheel: function(fn) {

return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");

unmousewheel: function(fn) {

return this.unbind("mousewheel", fn);

}

});

function handler(event) {

var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;

event = $.event.fix(event || window.event);

event.type = "mousewheel";

if ( event.wheelDelta ) delta = event.wheelDelta/120;

if ( event.detail ) delta = -event.detail/3;

// Add events and delta to the front of the arguments

args.unshift(event, delta);

return $.event.handle.apply(this, args);

}

})(jQuery);

// JavaScript Document

(function($) {

$.fn.lofJSidernews = function( settings ) {

return this.each(function() {

// get instance of the lofSiderNew.

new $.lofSidernews( this, settings );

});

}

$.lofSidernews = function( obj, settings ){

this.settings = {

direction : '',

mainItemSelector : 'li',

navInnerSelector : 'ul',

navSelector : 'li' ,

navigatorEvent : 'click',

wapperSelector: '.slider-main-wapper',

interval : 4000,

auto : true, // whether to automatic play the slideshow

maxItemDisplay : 5,

startItem : 0,

navPosition : 'vertical',

navigatorHeight : 60,

navigatorWidth : 210,

duration : 600,

navItemsSelector : '.slider-navigator li',

navOuterSelector : '.slider-navigator-outer' ,

isPreloaded : true,

easing : 'easeInOutQuad'

}

$.extend( this.settings, settings ||{} );

this.nextNo = null;

this.previousNo = null;

this.maxWidth = this.settings.mainWidth || 600;

this.wrapper = $( obj ).find( this.settings.wapperSelector );

this.slides = this.wrapper.find( this.settings.mainItemSelector );

if( !this.wrapper.length || !this.slides.length ) return ;

// set width of wapper

if( this.settings.maxItemDisplay > this.slides.length ){

this.settings.maxItemDisplay = this.slides.length;

}

this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;

this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );

this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;

this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );

if( this.settings.navPosition == 'horizontal' ){

this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );

this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );

this.navigatorOuter.height( this.settings.navigatorHeight );

} else {

this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );

this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );

this.navigatorOuter.width( this.settings.navigatorWidth );

}

this.navigratorStep = this.__getPositionMode( this.settings.navPosition );

this.directionMode = this.__getDirectionMode();

if( this.settings.direction == 'opacity') {

this.wrapper.addClass( 'slider-opacity' );

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);

} else {

this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );

}

if( this.settings.isPreloaded ) {

this.preLoadImage( this.onComplete );

} else {

this.onComplete();

}

$.lofSidernews.fn = $.lofSidernews.prototype;

$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;

$.lofSidernews.fn.extend({

startUp:function( obj, wrapper ) {

seft = this;

this.navigatorItems.each( function(index, item ){

$(item).click( function(){

seft.jumping( index, true );

seft.setNavActive( index, item );

} );

$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );

})

this.registerWheelHandler( this.navigatorOuter, this );

this.setNavActive(this.currentNo );

if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){

this.registerButtonsControl( 'click', this.settings.buttons, this );

}

if( this.settings.auto )

this.play( this.settings.interval,'next', true );

return this;

onComplete:function(){

setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );

preLoadImage:function( callback ){

var self = this;

var images = this.wrapper.find( 'img' );

var count = 0;

images.each( function(index,image){

if( !image.complete ){

image.onload =function(){

count++;

if( count >= images.length ){

self.onComplete();

}

image.onerror =function(){

count++;

if( count >= images.length ){

self.onComplete();

}

}else {

count++;

if( count >= images.length ){

self.onComplete();

}

} );

navivationAnimate:function( currentIndex ) {

if (currentIndex <= this.settings.startItem

|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {

this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;

if (this.settings.startItem < 0) this.settings.startItem = 0;

if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {

this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;

}

this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),

{duration:500, easing:'easeInOutQuad'} );

setNavActive:function( index, item ){

if( (this.navigatorItems) ){

this.navigatorItems.removeClass( 'active' );

$(this.navigatorItems.get(index)).addClass( 'active' );

this.navivationAnimate( this.currentNo );

}

__getPositionMode:function( position ){

if( position == 'horizontal' ){

return ['left', this.settings.navigatorWidth];

}

return ['top', this.settings.navigatorHeight];

__getDirectionMode:function(){

switch( this.settings.direction ){

case 'opacity': this.maxSize=0; return ['opacity','opacity'];

default: this.maxSize=this.maxWidth; return ['left','width'];

}

registerWheelHandler:function( element, obj ){

element.bind('mousewheel', function(event, delta ) {

var dir = delta > 0 ? 'Up' : 'Down',

vel = Math.abs(delta);

if( delta > 0 ){

obj.previous( true );

} else {

obj.next( true );

}

return false;

});

registerButtonsControl:function( eventHandler, objects, self ){

for( var action in objects ){

switch (action.toString() ){

case 'next':

objects[action].click( function() { self.next( true) } );

break;

case 'previous':

objects[action].click( function() { self.previous( true) } );

break;

}

return this;

onProcessing:function( manual, start, end ){

this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);

this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);

return this;

finishFx:function( manual ){

if( manual ) this.stop();

if( manual && this.settings.auto ){

this.play( this.settings.interval,'next', true );

}

this.setNavActive( this.currentNo );

getObjectDirection:function( start, end ){

return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");

fxStart:function( index, obj, currentObj ){

if( this.settings.direction == 'opacity' ) {

$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );

$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );

}else {

this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );

}

return this;

jumping:function( no, manual ){

this.stop();

if( this.currentNo == no ) return;

var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");

this.onProcessing( null, manual, 0, this.maxSize )

.fxStart( no, obj, this )

.finishFx( manual );

this.currentNo = no;

next:function( manual , item){

this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);

this.onProcessing( item, manual, 0, this.maxSize )

.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )

.finishFx( manual );

previous:function( manual, item ){

this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;

this.onProcessing( item, manual )

.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )

.finishFx( manual );

play:function( delay, direction, wait ){

this.stop();

if(!wait){ this[direction](false); }

var self = this;

this.isRun = setTimeout(function() { self[direction](true); }, delay);

stop:function(){

if (this.isRun == null) return;

clearTimeout(this.isRun);

this.isRun = null;

}

})

})(jQuery)

//]]>

</script>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;

summaryTitle = 20;

numposts = 10;

function removeHtmlTag(strx,chop){

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

s = s.join("");

s = s.substring(0,chop-1);

return s;

}

function showrecentposts(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

for (var i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';

document.write(trtd);

j++;

}

function showrecentposts1(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

for (var i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';

document.write(trtd);

j++;

}

//]]>

</script>

Listo ahora dale un clic en “Guardar plantilla”

6 Da un clic en “Diseño” y abre el gadget que dice “Añadir un gadget”, ábrelo y busca el widget que dice “HTML/Javascript”

Una vez que ya hayas abierto un nuevo widget “HTML/Javascript” inserta las siguientes líneas de código en su interior:

document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script>

</ul>

</div>

document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script>

</ul>

</div>

jQuery(document).ready(function($){

$('#slider').lofJSidernews({

interval:6000,

duration:800,

mainWidth: 405,

navigatorWidth: 200,

maxItemDisplay:5,

easing:'easeInOutQuad',

auto:true,

isPreloaded: false

});

</script>

Eso es todo ahora dale un clic en “Guardar” y mira tu nuevo Slideshow en tu blog de blogger.

Fácil verdad?

¿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

¿Te ha resultado útil este artículo, recomiendanos?

TAGS: Slideshow

Slideshow para Blogger

Recuerda suscribirte:

Related post

Comentarios

4 comentarios:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

Suscríbete completamente gratis a nuestro boletín diario

Slideshow para Blogger

Recuerda suscribirte:

Related post

Comentarios

4 comentarios:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

AMP ADRASTEA

AMP DESIGN DEMO

AMP INSPIRITING

AMP DESTACADO

AMP KITCHEN

AMP FENIX

AMP MODERN

AMP ANDROMEDAD

AMP ALEX DESIGN

AMP BREAKING NEWS

AMP PRO DEMO

AMP BLOG BUILD

AMP TOUCH

AMP OCEAN FREE

AMP KILO

AMP DOMPI

AMP LANDING PAGE ONE

Suscríbete completamente gratis a nuestro boletín diario