Home Slideshow Slideshow para blogger blogspot con etiquetas

Slideshow para blogger blogspot con etiquetas
Es el momento de publicar un nuevo y espectacular slideshow para uso exclusive de blogger. Este slideshow mostrara solo la etiqueta que quiera mostrar en su blog de blogger. La instalación de este Slideshow para blogger es muy fácil de realizarlo solo tienen que seguir las instrucciones que les dejo en este post.

También publique algunos slideshow, de los cuales te puedo gustar, a continuación les dejo los enlaces de mis anteriores publicaciones:

Como crear un slideshow manual para mi blog de blogger
Como hacer un slideshow carrusel basado en etiquetas para blogger
Widget para blogger slideshow con entradas populares
Mostrar un slideshow con mis entradas populares para blogger
Slideshow con control deslizante para blogger
Slideshow de popular post o entradas populares para mi blog de blogger
Slider para mi blog de blogger
Como agregar a mi blog de blogger unslideshow automático
Como crear una galería de imágenes para mi blog de blogger

Slideshow para blogger blogspot con etiquetas

  Bueno ahora pueden ver el slideshow en mi pagina de demos


Luego deber su demostración nos dirigimos a trabajar.

1 Ir a Blogger

2 Un clic en “Plantilla”

Blogger

3 Un clic en “Editar HTML”


Ahora se le abrirá el Editor HTML de su plantilla

Blogger

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.

Blogger

4 Busca este código 

 ]]></b:skin> 

 Justo arriba del código que encontraste inserta el siguiente código


/* Slide Content by www.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;}


5 Busca este código

 </header>

 Inserta el siguiente código justo abajo del código que encontró

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
          <div id='slide-wrapper'> 
    <b:section class='slide' id='slide' preferred='yes'/> 
          </div> 
    </b:if>


Ahora dale un clic en “Guardar plantilla” y dirígete a diseño, en el cual vas a encontrar un nuevo gadget, mira la imagen que te dejo a continuación para que lo puedas identificar.

Slideshow para blogger blogspot con etiquetas

1 Luego de que hayas visto que si te aparece un nuevo gadget, dirígete otra vez a “Plantilla”, luego a “Editar HTML” 

 Busca este código ]]></b:skin> 

 Ingrese el siguiente código justo arriba del código que encontró

/* Slide Content by www.ayudadeblogger.com
    ----------------------------------------------- */ 
.shadow{width:950px; height:39px; background:#fff url(http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(http://4.bp.blogspot.com/-XIuN9wCp7P4/T6v_XWDrceI/AAAAAAAABKg/X5A25lOVkVk/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(http://1.bp.blogspot.com/-yATxnq2_xaU/URgNZ9jd9WI/AAAAAAAACHw/aY2lrqZgde4/s1600/ayuda+de+blogger.JPG) no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

Te recuerdo que podrás cambiar los números que están marcados de color rojo por el número que tú quieras, este sirve para que tu slideshow aumente o se reduzca en su anchura.

width:950px

Al igual en el número que esta marcado de color azul, lo podrás cambiar por el número que tú quieras, este sirve para aumentar o disminuir la altura del slideshow

height:325px

2 Ahora busca este código </head> y arriba de el, inserta las siguientes líneas de código.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/112241212156/slider.js' type='text/javascript'/>
<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;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 7;

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 < numposts2 ; 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 = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">Ver detalles </a></p></div><p class="order"><a href="'+posturl+'">Ver!</a></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 < numposts2 ; 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 = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);   

 j++;
}

}
//]]>
</script>

Si ya utilizas un script en tu blog, ya no deberás colocar el código que esta marcado de color rojo http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js, ya que se produciría conflictos y no se mostrar bien tu slideshow, y si no utilizas ningún script puedes colocar todo el código.

3 En este punto vas a buscar este código </header> y debajo de el encontraras todas estas líneas

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

          <div id='slide-wrapper'> 

    <b:section class='slide' id='slide' preferred='yes'/> 

          </div> 

    </b:if>


Tendrás que borrar esas líneas de código y remplazarlo por estas nuevas

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title=' contenedor slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>   
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
      </div>
</b:if>
<div class='shadow'/>


Eso es todo ahora dale un clic en “Guardar plantilla”.

Y por ultimo nos dirigimos otra vez a “Diseño” y damos un clic en el widget que dice “contenedor slider” y solo ponemos el nombre de cualquier etiqueta que queramos mostrar en nuestro blog de blogger, y luego le das un clic en “Guardar”.




Ahora si disfruta de tu nuevo y espectacular 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
¿Te ha resultado útil este artículo, recomiendanos?
Si

TAGS:


Share:

Related post

Comentarios

20 comentarios: