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.

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”

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>     <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://ivyth.googlecode.com/svn/js/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>

<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://ivyth.googlecode.com/svn/js/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.

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.

Share :

Tweet