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.
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.
A continuación puede ver su demostración en el siguiente blog de demos
Video tutorial
Tutorial Guía paso a paso
Instrucciones
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
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.
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'/>
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: 100%;height: 100%;object-fit: cover;}#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);}ul#slideshow6 {width: 100% !important;}/*---Fin CSS Estradas populares Slider--*/
6 Busca este código
</body>
Ingrese el siguiente código script justo arriba del código que encontró
<script src='https://cdn.statically.io/gh/Ayudadeblogger/slider-popular/main/slider-popular.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[$(document).ready(function() {// Cambio de dimensionvar 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>
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 != ""'><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 ? "item-content" : "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 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>
Eso es todo, es momento de dar un clic en Guardar plantilla
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 dude en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario