Slideshow vertical para usarlo en blogger
Luego de publicar varios slideshow para
blogger, les voy a enseñar a como poner un slideshow en su sidebar de blogger
en forma vertical, claro que también sirve para ponerlo en su pagina principal
como presentación de su blog, solo tiene que seguir las instrucciones y podrán tener
este espectacular slideshow vertical en su sidebar o en su pagina principal de
su blog de blogger, el truco es muy simple y fácil de realizarlo.
También puedes ver algunos slideshow de
los cuales te dejo los links de cada post.
Este nuevo slideshow vertical se
mostrara solo cuando alguien visite tus entradas y no cuando estés en tu página
principal.
Puedes ver su demostración y
funcionamiento en este post en la parte superior derecha
¿Cuáles son las características del
slideshow vertical?
Mostrara una imagen grande automática de
300 x 400
El titulo de su artículo
Una pequeña descripción de su artículo
Muestra 6 enlaces
Bueno luego de ver su demostración y las
características, nos dirigimos a trabajar.
1 Ir a blogger
2 Abrir “Plantilla”, luego das un clic
en “Editar HTML”
3 Da un clic en la parte superior
izquierda en “Expandir plantillas de artilugios” busca este código ]]></b:skin> y encima de el inserta el
siguiente código.
/* Slider by
www.ayudadeblogger.com*/
.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;} |
El código que insertaste podrás realizar
algunos cambios como, cambiar de anchura en la parte que dice width:300px y también podrás
cambiar la altura en height:400px
4 Ahora busca este código </head> y encima de el inserta el siguiente código.
<script src='http://code.jquery.com/jquery-1.8.3.js'
type='text/javascript'/>
<script type='text/javascript'> //<![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> <script type='text/javascript'> //<![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; summaryPost1 = 80; summaryTitle = 20; numposts1 = 6; 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 showrecentposts1(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; 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 = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]; 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 = m+ ' ' + day + ' ' + y ; var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++; } } function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; 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 = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"]; 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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++; } } //]]> </script> |
Te recuerdo que el código que esta
marcado de color rojo es el que va ha realizar el trabajo del movimiento y si
ya utilizas un script en tu blog de blogger similar a este <script src='http://code.jquery.com/jquery-1.8.3.js'
type='text/javascript'/> ya no deberás insertar otra vez este script ya que crearía
conflictos al momento de ver el slideshow y no se mostraría en tu blog. Y si no
has utilizado ningún script en tu blog, podrás insertar todo el código, y si utilizas
este script, solo borra el código que esta marcado de color rojo y lo demás podrás
insértalo.
Además el código que esta marcado de
color azul numposts1 = 6, podrás cambiarlo por el numero de post
que quieras mostrar en tu slideshow.
5 Y por ultimo vamos a buscar este código
<div id='sidebar-wrapper'> y encima de el insertamos las
siguientes lineas.
<b:if cond='data:blog.pageType ==
"item"'>
<div class='sompret-wrapper'> <div class='sompret'> <div class='image_reel'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>"); </script></div> <div class='description'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> <div class='paging'> <a href='#' rel='1'/> <a href='#' rel='2'/> <a href='#' rel='3'/> <a href='#' rel='4'/> <a href='#' rel='5'/> <a href='#' rel='6'/> </div> </div></b:if> |
Te recuerdo que puedes realizar algunos
cambios en esta parte del código, si quieres mostrar las ultimas publicaciones
de tu blog déjalo tal como esta, y si solo quieres mostrar alguna etiqueta en
particular deberás insertar estas líneas /-/nombre
de la etiqueta
después de default, bueno básicamente te debe de quedar así.
default/-/Plantilla?
default/-/Plantilla?
Donde dice Plantilla deberás cambiarlo por el nombre de
cualquier etiqueta de tu blog.
Eso es todo ahora dale un clic en “Guardar
plantilla” y mira tus cambios en tu post o articulo.
¿Necesitas ayuda?
Espero haber sido lo mas explicativo
posible, 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
tenia días buscando este tipo de slider vertical..... como puedo hacer para se se muestre en pagina principal y en las entradas.
ResponderEliminarQuiero este Slideshow para mi blog http://cinefarandulero.blogspot.com.ar/ tengo una de tus plantillas la Linea revista 2,pero tengo un problema no encuentro este codigo div id sidebar wrapper,(le quite los puntos porque no me permitia publicar)como veras yo uso varios elementos de tu Web,otro poblema que tuve fue que cuando cambie la plantilla,es decir tenia en uso y bien configurada la plantilla y quise hacer cambios y perdi el widget que vos lo tenes como “Slider Carrusel”,yo usaba esa etiqueta como "Revistas".Espero tu respuesta te dejo mi correo diazc15@gmail.com .Mil gracias Luis te WEB es excelente.Saludos desde Buenos Aires.
ResponderEliminarBuenas noches. Existe la posibilidad de que el slideshow de entradas recientes aparezca directamente en el area donde van las entradas? y no alrededor de ellas.
ResponderEliminarGracias por tu colaboracion.