Slideshow con Entradas Populares Nuevo estilo

Es indispensable para cada blog de Blogger tener nuevos trucos y que funcionen, es por esto que les traigo un nuevo Slideshow para blogger. Este Slideshow para blogger funciona con sus entradas populares, la incrustación del código es muy simple de realizarlo, solo deberán seguir mis instrucciones al pie de la letra y lo podrán obtener completamente gratis. Los Slideshow son muy apetecidos por todos los bloggers, la facilidad con que les voy a presentar este nuevo Slideshow para Blogger es muy fácil, Ayudadeblogger.com te ayudara con dos códigos, con el cual hará que se muestre este Slideshow. Lo que vamos hacer es habilitar nuestro widget de Entradas Populares, una vez que ya este habilitado, nos dirigiremos al Editor HTML de nuestro blog para insertar dos códigos, eso es todo, esto hará que cambie nuestra Entrada Popular a un Slideshow. El Slideshow se mostrara en nuestra pagina principal, luego cuando habrán cualquier post ya no se mostrara, ya que esta configurado para que se muestre solo en nuestra pagina principal de Blogger.

Anteriormente publique algunos Slideshow para blogger de los cuales les dejo los enlaces:

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Mostrar un Slideshow con mis entradas populares para blogger
  6. Necesito un Slider para mi blog de blogger
  7. SlideShow con control deslizante para blogger
  8. Slider para blogger en 3D
  9. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  10. Slideshow para blogger blogspot con etiquetas
  11. Slideshow para blogger manual nuevo estilo
  12. Slideshow para blogger nuevo estilo
  13. Slideshow vertical para usarlo en blogger
  14. Widget Slider galería de imágenes acordeón para blogger
  15. Widget para blogger, Slideshow con Entradas Populares
  16. Slideshow para Blogger

A continuación puede ver su demostración en el siguiente blog de demos


Te gusto!

Vamos a configurar nuestro Slideshow en blogger

1 Ir a blogger

2 Da un clic en “Diseño

3 Abre un gadget “Añadir un gadget

slideshow para blogger

4 Una vez que hayas abierto un nuevo gadget, tendrás que buscar el widget que dice “Entradas populares”, habilítalo y luego le das un clic en “Guardar”, y ubícalo en la cabecera principal de tu blog. Si ya tienes habilitado el widget de Entradas populares en tu blog, sáltate este paso.


slideshow para blogger

5 Ahora dale un clic en “Plantilla

slideshow para blogger

6 Luego un clic en “Editar HTML” una vez que ya estas en el Editor HTML de tu plantilla, vas a encontrar un icono en la parte de arriba del Editor la cual dice “Ir al widget”, tienes que dar un clic en ese icono, y se te desprenderá todas las secciones de tu blog, en el cual tendrás que dar un clic en “Entradas populares”, y te llevara a la posición del código de tus Entradas populares, mira la imagen a continuación

slideshow para blogger

En este punto deberás dar un clic en la parte izquierda donde se encuentran los números de posición para que se muestre todo el código de tu Entrada popular, mira la imagen a continuación:

slideshow para blogger

Se te mostrar un código como el siguiente:

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
            <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
          </b:widget>

Realiza este cambio:

Borra todo el código que encontraste y remplázalo por el siguiente código:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style scoped='' type='text/css'>
#coin-slider-pop img {width: 100%;height: 300px;}
#coin-slider-pop {margin: 0 auto;}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ color: #fff; text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title {width: 97%;padding: 10px 1.5%;background-color: #000000; color: #FFFFFF;}
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
</style> 
  <div class='widget-content popular-posts'>
    <div id='coin-slider-pop'>
      <b:loop values='data:posts' var='post'>
      <a expr:href='data:post.href' expr:title='data:post.title'>
      <b:if cond='data:post.thumbnail'>
      <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
      <b:else/>
      <img expr:alt='data:post.title' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
      </b:if>
      <span>
      <strong><data:post.title/></strong>
      <p><data:post.snippet/></p>
      </span>      
      </a>
      </b:loop>
    </div>
<script type='text/javascript'>
//<![CDATA[
function resizeimage(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}}
resizeimage("PopularPosts2",630);
//]]>
</script>     
<script src='https://cdn.statically.io/gh/Ayudadeblogger/coin-slider/main/coin-sliders-min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$('#coin-slider-pop').coinslider({width:630,height:300});
//]]>
</script>
</div>
</b:if>
</b:includable>
</b:widget>

Una vez hecho esto, presiona la tecla Control seguido de la tecla F de tu teclado para que se muestre el buscador de tu Editor HTML.

slideshow para blogger

Busca este código:

</head>

Arriba del código que encontraste inserta las siguientes líneas de código

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b);d[a].width=b}}
//]]>
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

Eso es todo, ahora dale un clic en “Guardar plantilla” y mira tu nuevo y espectacular Slideshow basado en Entradas populares.

Felicidades ahora ya tienes un nuevo Slideshow para blogger

Espero haber sido lo mas explicativo posible, en este tutorial para blogger.

¿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



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

19 comentarios:

  1. Amigo como le coloco el nombre de Lo Mas Visto? a este slideshow?

    ResponderEliminar
  2. Buenas.. Me encanta tu blog, siempre paso a ller tus articulos.. Pero esta vez tengo una duda y me atrevo a escribirte por aqui ya que no veo algun post similar.. Tienes alguna idea de como controlar el tamaño de las imagenes que agregamos en los gadgets de Blogger "Imagen".. El mismo se ajusta automaticamente al ancho que decidimos que tenga la barra latera, y no quiero que quede asi!
    Desde ya gracias por todo, ya que sin saberlo, me haz sido de gran ayuda siempre!

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion de tu correo electronico para poder enviarte el codigo que necesitas,y explica en tu mensaje que es lo que necesitas..
      Saludos.

      Eliminar
    2. Necesito simplemente poder controlar el tamaño de las imagenes que agrego en los gadgets, no que se reduzcan automaticamente en relacion al ancho de las barras laterales. valeforlan@hotmail.com

      Eliminar
    3. Mi primera pregunta, necesitas saber si tu cargas la imagen a un widget y luego lo pones en tu sidebar..
      Responde saludos.

      Eliminar
  3. Luis quiero felicitarte por la informacion que nos prestas a traves de tu blog...Es impresionante la informacion y muy practica....Que tengas muchos mas exitos.....

    ResponderEliminar
  4. Buenas, he estado haciendo el tutorial y bueno, no estoy contento con el resultado, lo noto bugueado, es decir el fondo se queda raro y tambien me gustaria que la imagen que sale en las entradas populares no salga en mosaico, gracias y espero respuesta.
    Visita mi blog para que veas como quedo.

    http://elblogdeabramsm1a2.blogspot.com.es/

    ¿qué puuedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, el problema es que las imagenes que tienes publicado en tu blog son pequeñas, como minino una imagen debe tener entre 350x350 pixeles, es por eso que te sale en mosaico..
      Saludos.

      Eliminar
    2. aaaaa, ok ahora las publicare con mayor tamaño, gracias

      Eliminar
  5. amigo hice todos los pasos en mi blog pero las imagenes no las muestra solo los link el fondo qda gris http://lazonalternativa.blogspot.com/ mi correo es josealberto525@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, el problema es que no estas subiendo tu mismo las imaganes y las estas copiando desde otra pagina externa, mira he visto que tienes imaganes incrustadas de otros sitios web como esta: http://www.tandildiario.com/thumb/63449/280-194-92/0003405258.jpg: el cual te da problemas al mostrar la imagen en tu blog, sube la imagen desde tu PC a blogger en tu entrada has eso en todas y veras que te funciona.
      Saludos.

      Eliminar
  6. Hola. Lo he integrado y ha quedado estupendo, pero un poco grande. Es posible cambiar el tamaño?
    Mi Blog para ver el resultado: http://almoradi1829.blogspot.com.es/
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog y el slideshow esta perfecto. y en este punto es en donde podras cambiar el tamaña: {width:630,height:300}
      Saludos.

      Eliminar
  7. hola yo lo que quiero cambiar es el numero de entradas que solo me muestre 5 no mas aunque si publico ams al dia solo quiero que muestre 5 es posible? un saludo y espero pronta repuesta me urge gracias

    ResponderEliminar
    Respuestas
    1. Ingresas a "Diseño" de tu blog y buscas el widget de “Entradas populares” lo abres yhabilitas solo el numero 5, eso es todo
      Saludos

      Eliminar
    2. muchisimas gracias perdon mi ignorancia :) que padre contar con alguien que ayuda desinteresadamente

      Eliminar
  8. Hola amigo, esta muy interesante y muy util este slideshow, gracias por compartirlo amigo! una pregunta, como podria hacer que este slideshow se vea pero no en un widget, si no en una de las paginas de blogger? intente mover los divs pero no se ve nada.

    Epsero tu respuesta! Gracias

    ResponderEliminar
  9. Hola por que no se me ven las imágenes ?

    https://skalatopi.blogspot.com

    ResponderEliminar