add

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

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios