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

Demo Clic aquí

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”

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.

5 Ahora dale un clic en “Plantilla”

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

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:

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.

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

TAGS: Entradas Populares

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.