Entradas populares slider para Blogger


Preguntas ¿cómo hacer que mis entradas populares se conviertan en slider? ¿Hacer que mis Entradas populares se deslicen de izquierda a derecha? Tener un aspecto adecuado con una nueva función diferente en nuestro blog de Blogger es lo que aprenderán el día de hoy. Vamos a transformar a nuestras Entradas populares y las cambiaremos a una forma de diseño web profesional, un estilo diferente, un aspecto único.

Entradas populares slider para Blogger

Información:

Lo que vamos hacer es ingresar unos códigos en la plantilla.

¿Cómo funciona?

Al transforma nuestra entrada popular nos mostrara dos imágenes grandes y al pasar el cursor por una de ella mostrara una pequeña descripción sobre lo que se trata la entrada, luego si el usuario quiere ver más entradas populares, tendrá que dar un clic en las flechas ubicadas al final del widget Entradas populares, al hacer un clic en una de las flechas de inmediato se desplazara a otras imágenes de Entradas populares, tanto hacia la izquierda o a su derecha, el código es tan simple, lo que hace es desplazar el widget Popular post en forma deslizante para ver los demás contenidos que tiene su widget de Entradas populares.

Esta modificación de las Entradas populares funciona correctamente tanto para mostrarse en los navegadores web populares como FireFox, Google Chrome, Internet Explorer, etc.

Al principio se tuvo un poco de dificultades para tener este código muy preciso y realizar una serie de transformaciones antes de presentarles este espectacular truco para blogs de Blogger. Les comento que tuve la ayuda de un gran amigo, se llama Raúl Garrido un crack de Blogger, es de la ciudad de México, el cual ayudo con una parte del código y se perfecciono en la totalidad esta nueva modificación de las Entradas populares para Blogger.

Pueden ver su demostración en el siguiente blog de demos

DEMO

Video tutorial


Tutorial Guía paso a paso

Instrucciones

1 Ir a Blogger

2 Un clic en “Plantilla

Entradas populares slider para Blogger

3 Un clic en “Editar HTML

Entradas populares slider para Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Entradas populares slider para 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.

Entradas populares slider para Blogger


4 Busca este código

<head>

Ingrese el siguiente script justo abajo del código que encontró

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'/>
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>


Entradas populares slider para Blogger


5 Busca este código

]]></b:skin>

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

/*---CSS Estradas populares Slider--*/

#slideshow6, #PopularPosts2 ul {min-width: 100%;}
#PopularPosts2 .fa {font-size: 30px; padding: 0px 11px 2px 11px; border-radius: 3px; background-color: #3b3b3b; color: white;}
.scroll-nav{text-align:center;direction: rtl;}
#PopularPosts2 .fa:hover {background-color: #000000;}
#PopularPosts2 .scroll-item{position:relative;padding:0;height:185px;float:left;width:100%;margin-bottom:30px}
#PopularPosts2 .item-thumbnail{float:none;width:100%;height:185px;overflow:hidden;margin:0;padding:0}
#PopularPosts2 .item-thumbnail img{float:left;width:105%;height:auto}
#PopularPosts2 .item-title{position:absolute;bottom:0;padding:5px 10px 9px;line-height:1.2em;font-family:Open Sans,serif;font-weight:600;font-size:18px}
#PopularPosts2 .item-title a{color:#fff;}
#PopularPosts2 .item-snippet{color:#ddd;max-height:0;font-size:11px;line-height:1.2em;margin-top:5px;-moz-transition:max-height .8s;-ms-transition:max-height .8s;-o-transition:max-height .8s;-webkit-transition:max-height .8s;transition:max-height .8s;overflow:hidden}
#PopularPosts2 .scroll-item:hover .item-snippet{max-height:185px}
.thumb-overlay{position:absolute;display:block;left:0;right:0;bottom:0;top:50%;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.8)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=0)}
.scroll-box.related .scroll-item .post-wrap,
.scroll-box .scroll-item  .post-wrap
{padding-top:40px;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b3000000',GradientType=0);}

/*---Fin CSS Estradas populares Slider--*/

Entradas populares slider para Blogger

6 Busca este código

</body>

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

<script src='http://yourjavascript.com/24646156136/ayudadeblogger.js' type='text/javascript'/>

<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    // Cambio de dimension
    var dimension = 400;
    //
    $('#PopularPosts2,#PopularPosts1').find('.item-thumbnail img').each(function(n, image){
      var image = $(image);
      image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
      image.attr('width',dimension);
      image.attr('height',dimension);
    });
  });
  //
  (function($){  
    var newerLink = $('a.blog-pager-newer-link1');
    var olderLink = $('a.blog-pager-older-link1');
    $.get(newerLink.attr('href'), function (data) {
      newerLink.html('<h6>Siguiente</h6><h5>'+$(data).find('.post h1.post-title').text()+'</h5>');  
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
      olderLink.html('<h6>Anterior</h6><h5>'+$(data2).find('.post h1.post-title').text()+'</h5>');  
    },"html");
  })(jQuery);
  //]]>
</script>

Entradas populares slider para Blogger


7 Esta es la parte muy importante en la cual tienen que poner mucha atención.

- Tenemos que mirar con cuidado donde insertar el último código.

- Cada blog de Blogger dispone de un identificador conocido como Sidebar, al cual debemos buscarlo e ingresar el código

- Pueden buscarlo de la siguiente manera

Busca este código

class='sidebar'

Nos mostrara un código similar al siguiente

<b:section class='sidebar' id='sidebar' preferred='yes'>

Justo abajo del código que les mostré, tendrán que insertar las siguientes líneas de código

<b:widget id='PopularPosts2' locked='false' title='Entradas populares' type='PopularPosts' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
   <div class='widget-content'>
    <ul class='group_items-box' id='slideshow6'>
                          <b:loop values='data:posts' var='post'>
                            <li class='scroll-item'>
                              <b:if cond='!data:showThumbnails'>
                                <b:if cond='!data:showSnippets'>
                                  <!-- (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 class='item-snippet'>
                                      <data:post.snippet/>
                                    </div>
                                  </div>
                                </b:if>
                                <b:else/>
                                <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
                                <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
                                  <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 class='thumb-overlay'/>
                                    </div>
                                  </b:if>
                                  <div class='item-title'>
                                    <a expr:href='data:post.href'>
                                      <data:post.title/>
                                    </a>
                                    <b:if cond='data:showSnippets'>
                                      <div class='item-snippet'>
                                        <data:post.snippet/>
                                      </div>
                                    </b:if>
                                  </div>
                                </div>
                                <div style='clear: both;'/>
                              </b:if>
                            </li>
                          </b:loop>
                        </ul>
                        <div class='scroll-nav'>
                          <a href='#' id='next6'>
                            <i class='fa fa-angle-right'/>
                          </a>
                          <a class='prev-scroll' href='#' id='prev6'>
                            <i class='fa fa-angle-left'/>
                          </a>
                        </div>
                        <div class='clear'/>
                      </div>
                      <div class='clear'/>
</b:includable>
  </b:widget>

Entradas populares slider para Blogger
Entradas populares slider para Blogger

Eso es todo, es momento de dar un clic en Guardar plantilla

Entradas populares slider para Blogger

Nota: recuerden no tener habilitado el popular post “Entradas populares” en el diseño de su plantilla hasta después que terminen este tutorial.

Visite su blog de Blogger y mire cómo funciona esta espectacular modificación de su Entrada popular “Popular post”

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: