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 != &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



Share:

Related post

Comentarios

1 comentario: