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.

Slideshow vertical para usarlo en blogger

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(http://3.bp.blogspot.com/-_RkTTrabRbs/UQWYmksVCYI/AAAAAAAABaU/3vvF1qFSAYI/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(http://4.bp.blogspot.com/-b9OEmVdL6Q4/URA_BL7OXWI/AAAAAAAAB2k/c9exOQaNu2U/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(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</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.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: