Slideshow para Blogger versión 4

El día de hoy en este tutorial aprenderán a instalar en su blog de blogger un nuevo y sorprendente slideshow para blogger, el cual es totalmente diferente de los demás slideshow para blogger que he dado a conocer. Este nuevo slideshow funciona de forma manual, ya que deberán insertar el nombre de cada etiqueta que queramos mostrar en una categoría diferente del slideshow. Vamos a disponer de 5 diferentes categorías y en cada una de ellas tendremos que insertar el nombre de la etiqueta que vamos a mostrar en cada una de nuestras categorías del Slideshow para blogger. La instalación del código es muy fácil de realizarlo, tienen que seguir todas las instrucciones tal como lo muestro en este tutorial de blogger para que pueda funcionar perfectamente este nuevo slideshow para blogger. Lo que vamos hacer es instalar todo el código en el Editor HTML de nuestra plantilla.

Si aún necesitan ver diferentes tipos de Slideshow para blogger les dejo algunos tutoriales

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

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”

3 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4 Busca este código

]]></b:skin>

Inserta el siguiente código arriba del código que encontraste

#sliderTimer-wrapper{width:970px;padding:0 10px 10px 0}

#sliderTimer-header li a.active{background:#2F2F2E;text-shadow:0 1px 0 rgba(0,0,0,.2);color:#fff}

#sliderTimer-header li a.active div.carouselProgress{display:block;background:#298A08}

.sliderTimer-item{position:absolute;top:0;left:0;height:300px;width:970px;display:none;padding:0}

#sliderTimer h2 a{font:normal 20px Oswald;color:#fff;line-height:1.1em}

#sliderTimer a.carousel_link span{background:#d10110;display:block;color:#fff;float:right;padding:7px 10px}

#sliderTimer{position:relative;height:300px;overflow:hidden}

#sliderTimer-header{height:32px;border-bottom:4px solid #878773;border-top:1px solid #878773;padding:0}

#sliderTimer-header li{display:inline;list-style:none}

#sliderTimer-header li a{display:block;text-shadow:1px 1px 1px #fff;height:32px;float:left;line-height:32px;text-decoration:none;color:#333;font-size:14px;font-style:tahoma;position:relative;padding:0}

#sliderTimer-header li a div.carouselProgress{display:none;height:4px;background:transparent;width:0;position:absolute;bottom:-4px;left:0;margin:0}

#sliderTimer-header li a .carouselHeaderContent{padding:0 15px}

.sliderTimer-item .infos{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMpyTNO29VEIKsUdhxmpliSCuFGMnOzmXL06Wzsgk2LAz8K0Qan9fzeaj4WxgQwKi4mVv17CyImKdLyIoqaTQr26v09OJP4Y50i5PZioH0ZWW376GuU1x1ef9qP-ARM9-mXQhwFz4nbRT/s1600/transparant.png);width:200px;height:300px;z-index:9;position:absolute;padding:10px 10px 0}

.sliderTimer-item h3{font-size:20px;line-height:20px;color:#1b1b1b;font-weight:700;margin-bottom:10px}

.sliderTimer-item p{font-size:12px;color:#fff;line-height:16px;width:200px}

.sliderTimer-item ul{margin-top:0;position:absolute;bottom:10px;width:970px}

.sliderTimer-item ul li{display:inline}

.sliderTimer-item ul li a{line-height:1.3em;display:block;font-size:15px;font-weight:700;color:#fff;float:left;text-decoration:none;margin-bottom:10px;padding:0 10px}

.sliderTimer-item .attachment-post-thumbnail,.sliderTimer-item .attachment-full{position:absolute;right:0;top:0;z-index:-1}

.sliderTimer-item .attachment-full img{width:970px;height:auto;overflow:hidden;margin-top:-20%}

#sliderTimer-header li a.active span.carouselHeaderDecorator,#sliderTimer .active{display:block}

/* Slider */

.sompret-wrapper {float:right; position: relative;}

.sompret { overflow: hidden; position: relative; width:300px; height:400px;}

.image_reel { position: absolute; top: 0; left: 0; }

.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}

.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }

.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhleQbENrZDINeye6dMSPLFZTUlWPLuSJrJgqRs7HtVgwdLt66h11am1VgFptdDHLwZl08OknORFyOMCau3RF1lu7SaO8WtB_Ho45NES5Tu9ppDqBcI54lYI7IcyBNEdFwh7_iVnPIpRRk/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }

.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnyJ-1L4zKMxkTpEbEjjY46WtHRkJvTG85uVDuAFg2A-3NJy8qafnl5RCjipfne2QNjj5o17_HtKS3hyphenhyphengrWRVKrGAbqsWQCKbqaJv-Mp2JLxt8rCPDAiqThIv4WRaTjGxNpwz6bolmjo/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}

.paging a:hover {font-weight: bold; border:none; outline:none;}

.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPyQx3Rcfmk7qZPPf_bj4tutA2n8CLXwhDztN3jr4NMMVYi0TvZa96K7K8AZ-XfQ-S7DyZ-78bh7u8RGxD4_0x8VHQsO4coikxG4TDUQ_B2yqU_trF6zM3ZuQf60DdHWtEI6b_Ip2NiVLi/s1600/uj-opacity-40.png);padding:5px 10px; }

.crott a{color: #fff;font: 16px Oswald }

.crott p{color: #fff;font: 12px Arial;}

5 Busca este código

</head>

Inserta el siguiente código justo arriba del código que encontraste

//<![CDATA[

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

var stepInterval = 4000;

var initialDelay = 2000;

var fadeTime = 1000;

var carouselID;

var i=1;

function myAfterCall() {

$('.carouselProgress').width(0);

}

function myBeforeCall() {

$('#sliderTimer-header .active').removeClass('active');

startProgress();

carouselID = $(this).attr('id').replace('mas-', '');

startProgress(carouselID);

$('#mas-head-'+carouselID).addClass('active');

}

function startProgress(carouselID){

parentWidth = $('#mas-head-'+carouselID).width();

$('#mas-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');

}

$('.sliderTimer-item-header').live('click', function(a){

var clicked = $(this);

$('.sliderTimer-item-header').each(function(e){

console.log(clicked.attr('id'));

console.log($(this).attr('id'));

if(clicked.attr('id')!=$(this).attr('id')){

$(this).children('.carouselProgress').stop();

}

});

//$('.sliderTimer-item').hover(function(){}, function(){});

$('#sliderTimer').cycle({

delay: initialDelay,

timeout: stepInterval,

speed: fadeTime,

after: myAfterCall,

before: myBeforeCall,

pager: '#sliderTimer-header',

pause: true,

pagerAnchorBuilder: function(idx, slide) {

carouselID = slide.id.replace('mas-', '');

carouselTitle = $(slide).attr('ref');

if(i==1) {

myClass="active"

} else {

myClass="";

}

i++;

return '<li> \

<a href="#" class="sliderTimer-item-header '+myClass+'" id="mas-head-'+carouselID+'"> \

<div class="carouselProgress"></div> \

<span class="carouselHeaderContent">'+carouselTitle+'</span> \

<span class="carouselHeaderDecorator"></span> \

</a> \

</li>';

}

});

//$('#sliderTimer-header:first-child').addClass('active');

parentWidth = $('#sliderTimer-header .active .carouselProgress').width();

$('#sliderTimer-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');

});

//]]>

</script>

$(function() {$('.sompret-image').hover(function(){$(this).find('img').animate({top:'260px',right:'200px'},{queue:false,duration:500});}, function(){$(this).find('img').animate({top:'0px',right:'0px'},{queue:false,duration:500});});})

</script>

//<![CDATA[

jQuery(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 = $(".sompret").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)

$(".crott").stop(true,true).slideUp('slow');

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

//Slider Animation

$(".image_reel").animate({

left: -image_reelPosition

}, 500 );

};

//Rotation + Timing Event

rotateSwitch = function(){

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

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

}, 10000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

//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>

//<![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 = 180;

summaryPost1 = 80;

summaryTitle = 20;

numposts = 1;

numposts1 = 6;

//]]>

</script>

//<![CDATA[

function resizeThumb(el, from, to) {

$(el).each(function() {

$(this).attr({

'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),

'width': to, 'height': to

});

}

$(function() {

resizeThumb('#PopularPosts1 img', '72', '105');

});

//]]>

</script>

$(function() {

$('#comments p').find('a').remove();

});

</script>

Nota: Si ya utilizas un script jQuery, ya no tendrás que poner solo el código que está marcado de color amarillo, y si no utilizas ningún jQuery inserta todo el código tal como está.

6 Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código

Al dar un clic en “Header1” nos mostrara un código similar al siguiente, mira la imagen

En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

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

</script></li>

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

</script></li>

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

</script></li>

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

</script></li>

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

</script></li>

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

</script></li>

</ul>

</div>

</b:if>

Realiza estos cambios:

He marcado de color rojo a 6 tipos de categorías, esos son los nombres de los títulos del slideshow, cámbialos por los que tú quieras.

También, marque de color azul a 6 nombres de etiquetas, aquí es en donde tienen que poner el nombre de la etiqueta que quieran mostrar en cada una de ellas, borralos y pon el nombre de tu etiqueta.

Que es una etiqueta, más información en este enlace

Eso es todo ahora es momento de dar un clic en “Guardar plantilla” y mira los nuevos cambios en tu blog de blogger

Fácil verdad!

Recuerda suscribirte, y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿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 versión 4

Recuerda suscribirte:

Related post

Comentarios

7 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 versión 4

Recuerda suscribirte:

Related post

Comentarios

7 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