Entradas populares para Blogger like style


Cambiar el aspecto de las entradas populares de nuestro blog de Blogger a un nuevo diseño y estilo totalmente diferente, es lo que aprenderán en este tutorial de Blogger creado exclusivamente para usuarios de Blogger.

La implementación del código es sumamente fácil de realizarlo, solo tendrá que seguir las instrucciones que se detallan en este tutorial

A continuación puede ver su demostración en el siguiente blog de demos

Video tutorial


Empezamos

Un clic en Diseño


Un clic en Añadir un gadget


Busque el gadget “Entradas populares”


Un clic en Guardar


Ubiquelo donde mejor le parezca


Ahora diríjase a Tema

1 Un clic en Tema


2 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.



Busque el siguiente código

</head>

Inserte el siguiente CSS justo arriba del código que encontró


<style>
/* Popular Posts */

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,
.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;
background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:#333;}
.PopularPosts ul li img {display:block;width:100%;height:180px;float:left;transition:all 0.3s ease-out;max-width: none;}
.PopularPosts ul li {background-color:#fff;margin:2px;margin-bottom: 30px;padding:0;padding-bottom:5px;position:relative;transition:all 0.3s ease-out;}
.PopularPosts ul li:last-child {padding-bottom:0;}
.PopularPosts .item-title a { font:600 14px 'Playfair Display';color: #555; font-size: 16px; padding: 10px; position: absolute; right: 0; left: 0px; margin: 0px auto; text-align: center; text-decoration: none; top: 120px; overflow: hidden; z-index: 2; line-height: 1.2; background: rgb(255, 255, 255); width: 70%; border-top: 3px solid #FEC606; }
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {}
.PopularPosts ul li:before {display:none;list-style:none;}
.PopularPosts .item-thumbnail {margin:0 0 0 0;background: #333;overflow: hidden;}
.PopularPosts .item-snippet {font-size:11px;color:#333;font-weight:400;}
.PopularPosts .item-title {padding-bottom:.2em;line-height: 0.9;}
.PopularPosts .item-thumbnail::after {color: #f8f8f8; list-style-type: none; position: absolute; z-index: 4;font-size: 22px; background: rgb(31, 118, 158); padding: 10px; font-weight: 700;    left: 0;}

/* Popular Posts */
</style>


Busque el siguiente código

PopularPosts1

Le mostrara un código perteneciente a las Entradas populares


<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>…</b:widget>


Ejemplo:


Elimine todo el código y remplacelo por el siguiente código


<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts' version='1'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>7</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</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 popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail Ayudadeblogger.com -->
            <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 or (4) Snippets and 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' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 300, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </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 style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
      </b:widget>


Un clic en Guardar tema

Visite su blog y mire su nuevo gadget de Entradas populares

Nota: si actualmente tiene el gadget Entradas populares ingresado un estilo, primero deberá eliminar dicho estilo CSS y remplazarlo por el CSS de este tutorial.

¡Fácil verdad!

¿Necesitas ayuda?

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

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: