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

Demo Clic aquí

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 != &quot;&quot;'>

<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 ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>

            <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: &#39;&#39;;

    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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Entradas PopularesPopular postSlideshow

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.