Nuevo diseño del Gadget Entradas populares Versión Advance One

Con un nuevo nombre "Popular post advance One", que se lo denomina Gadgets avanzados de publicaciones populares, que funcionan como publicaciones destacadas con una velocidad de carga rápida.

Te sorprende todo lo que la plataforma de Blogger puede hacer?, hemos mejorado los diseños de los Gadgets de Blogger, un diseño moderno y sorprendente, es momento de actualizar nuestro blog de Blogger con un diseño diferente en nuestras entradas populares. 

Con unos simples pasos aprenderás a modificar el gadget de Entradas populares "Popular post" a un diseño moderno denominado Gadget avanzado de publicaciones populares "Popular post Advance ONE"

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 Posts Advance' type='PopularPosts' version='1'>

              <b:widget-settings>

                <b:widget-setting name='numItemsToShow'>5</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;'><h2><data:title/></h2></b:if>

  <div class='widget-content PopularPosts'>

    <ul class='big-popular '>

      <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'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><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 caja-amp-img'>

                <a expr:href='data:post.href'>

                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 300)                                  : data:post.thumbnail' var='image'>

                    

                    <img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='200' width='291'/>

                  </b:with>

                </a>

              </div>

            </b:if>

              

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

                        <b:if cond='data:showSnippets'>

              <div class='item-snippet'><data:post.snippet/></div>

            </b:if>

          </div>

          <div class='clear'/>

        </b:if>

      </li>

      </b:loop>

    </ul>

  </div>

</b:includable>

            </b:widget>

9.- Tenemos que ingresar el codigo CSS, para ello debe buscar el siguiente código

</head>

Ingrese las siguientes líneas CSS, justo arriba del código que encontró 

<style>

/* Popular post advance ONE*/

  #PopularPosts3 {

    padding: 20px;

    height: auto;

    box-sizing: border-box;

    background-color: #fff;

    border-width: 0;

    box-shadow: 0 15px 25px rgb(35 81 196 / 10%);

    margin-bottom: 29px;

}

  .widget-content.PopularPosts {

    display: flex;

}

  .widget-content ul {

    padding-left: 0;

}

  .PopularPosts .widget-content ul li:first-child {

    padding: 0;

    width: 49%;

    float: left;

    margin-right: 10px;

}

  .widget-content ul li {

    list-style: none;

}

.PopularPosts .widget-content ul li {

    padding: 0 !important;

}

.PopularPosts .widget-content ul li {

    margin: 0px 0px 17px;

    float: left;

    width: 49%;

}

@media (max-width: 570px){

  .PopularPosts .widget-content ul li:first-child {

    padding: 0;

    width: 100%;

    float: left;

    margin-right: 0px;

}

  .PopularPosts .widget-content ul li {

    margin: 0px 0px 17px;

    float: left;

    width: 100%;

}

  }

  .PopularPosts ul li:first-child .item-thumbnail {

    float: left;

    width: 100%;

    margin-right: 10px;

    position: relative;

    margin-bottom: 19px;

}

    .PopularPosts ul li .item-thumbnail {

    float: left;

    width: 125px;

    margin-right: 13px;

    position: relative;

    height: auto;

    display: block;

}

    .PopularPosts ul li:first-child .item-snippet {

   display:block;

}

      .PopularPosts ul li .item-snippet {

   display:none;

}

  .PopularPosts ul li:first-child .item-title a {

       color: #000;

       font-size: 25px;

       font-weight: 700;

       line-height: 24px;

       padding-bottom: 20px;

}  

  .PopularPosts ul li .item-title a {

      color: #000;

      font-size: 15px;

      font-weight: 700;

      letter-spacing: normal;

      line-height: 1.4em;

}

  .PopularPosts .item-thumbnail {

    margin: 0;

}

  .PopularPosts .item-thumbnail {

    float: left;

    margin: 0 5px 5px 0;

}

  .PopularPosts ul li:first-child img {

    width: 100%;

    height: auto;

    border-radius: 5px;

}

  .PopularPosts img {

    height: 80px;

    margin: 0 19px 0 0;

    width: 120px;

    padding: 0;

    display: block;

    border-radius: 5px;

    object-fit: cover;

    background-color: rgba(155,155,155,0.07);

}

  .PopularPosts ul li:first-child .item-title {

       padding-bottom: 20px;

}

/* End Popular post advance ONE */

</style>

10.- Un clic en Guardar

¡Fácil verdad!

¿Necesitas ayuda? 

Cualquier pregunta no dude 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 post

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.