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.

Slideshow con Entradas Populares Nuevo estilo

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 mire su demostración en mi 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>
    <b:include name='quickedit'/>
  </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{ 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='http://yourjavascript.com/72231211327/coin-slider-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.




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: