Entradas populares para Blogger Slideshow - Popular post Blogger
Vamos a modificar las entradas populares de nuestro blog de Blogger a un nuevo
diseño de Slideshow, las entradas populares de Blogger "Popular post" tienen
excelentes vistas por los usuarios que visitan nuestros blogs de Blogger, por
ello vamos a realizar un truco nuevo con las entradas populares para que tenga
un mejor diseño en nuestro blog.A continuación puede ver su demostración en el siguiente blog de demos
Video Tutorial
Empezamos
1.- Ir a Blogger.com
2.- Un clic en Diseño
3.- Habilite el gadget Popular Post y ubíquelo donde mejor le parezca
4.- Un clic en Tema
5.- Un clic en Editar HTML
6.- Vamos a buscar nuestro gadget Popular post
7.- Seleccione todo el widget popular post y elimínelo
8.- Ahora ingrese el siguiente código
<b:widget id='PopularPosts3' locked='false' title='Popular post Carrusel News' type='PopularPosts' version='1'><b:widget-settings><b:widget-setting name='numItemsToShow'>10</b:widget-setting><b:widget-setting name='showThumbnails'>true</b:widget-setting><b:widget-setting name='showSnippets'>true</b:widget-setting><b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting></b:widget-settings><b:includable id='main'><b:if cond='data:title != ""'><div class='post-titulo title-principal'><h2><div><data:title/></div></h2></div></b:if><div class='widget-content popular-posts'><amp-carousel height='239' layout='fixed-height' type='carousel'><b:loop values='data:posts' var='post'><li><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-2'><a expr:href='data:post.href'><data:post.title/></a></div><div class='item-snippet-2'><data:post.snippet/></div></b:if><b:else/><!-- (3) Show only thumbnails --><div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'><b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href'><b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'><amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='220' layout='responsive' width='300'/></b:with></a></div></b:if><div id='box-title-snippets'><div class='titulo-popular'><div class='item-title-2'><a expr:href='data:post.href'><data:post.title/></a></div></div><b:if cond='data:showSnippets'><div class='item-snippet-2'><data:post.snippet/></div></b:if></div></div><div class='clear'/></b:if></li></b:loop></amp-carousel><script async='async' src='https://cdn.ampproject.org/v0.js'/><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><style>#gadget-horizontal {margin: 0;padding: 0;margin-bottom: 10px;}#gadget-horizontal {width:100%;float:none;}.widget-content.popular-posts {margin-bottom: 40px;}#PopularPosts3 .item-content {box-shadow: 4px 4px 15px rgba(0,0,0,0.1);background-color: #fff;margin-bottom: 20px;height: 220px;}.item-title-2 {width: 177px;}.item-snippet-2{width: 177px;white-space: normal;color: #444;font-size: 13px;line-height: 18px;font-weight: 200;}.popular-posts amp-img{width:300px;height:220px;}.item-thumbnail-only {border-radius: 4px;display: flex;width: 510px;height: 220px;margin: 5px 8px 5px 0px;box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);overflow: hidden;background-color: #fff;}#PopularPosts3 .item-thumbnail{display: flex;width: 300px;height: 220px;justify-content: center;overflow: hidden;float: left;}.titulo-popular {padding: 0px 0px 20px;white-space: normal;}#popularposts3.PopularPosts li a {color: #111;font-size: 14px;line-height: 18px;font-weight: 200;}.PopularPosts li a:hover{color:#07ACEC;border:none;}.PopularPosts ul li:hover .item-title-2 a{color:#07ACEC;}#box-title-snippets{padding: 5px 20px 15px;position: relative;display: block;-ms-flex: 0 1 357px;flex: 0 1 357px;-ms-flex-positive: 1;flex-grow: 1;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;-ms-flex-pack: justify;justify-content: space-between;}@media (max-width: 728px){#PopularPosts3 .item-content {display:flex;}#box-title-snippets {flex: 0 1 200px;display: inline;}.popular-posts amp-img{width:200px;height:220px;}#PopularPosts3 .item-thumbnail{width: 200px;height: 220px;}.item-title-2 {width: 100%;}.item-snippet-2 {width: 100%;display: none;}}.amp-carousel-button {background-color: #4285f4;border-radius: 100%;-webkit-box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);-moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);box-shadow: 0 8px 17px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);cursor: pointer;}.post-titulo.title-principal {font-weight: 700;color: #191919;font-size: 18px;position: relative;margin-bottom: 15px;line-height: 45px;width: 100%;text-transform: uppercase;}.post-titulo.title-principal:before {content: '';position: absolute;height: 81%;width: 5px;background-color: #111;left: -21px;top: 5px;}</style></div></b:includable></b:widget>
9.- Un clic en Guardar
Eso es todo
Es momento de ver en nuestro blog el nuevo slideshow de Popular post
¡Fácil verdad!
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
1 comentario: