Nuevo estilos de imágenes de entradas populares para blogger


Un truco para blogger sobre como rediseñar nuestras entradas populares de blogger, es muy simple de realizarlo. Lo que hoy voy a compartir con ustedes es un truco exclusivo para usarlo en nuestro blog de blogger y que tenga una apariencia única. Vamos a trasformas nuestras entradas populares en imágenes pequeñas como cuadriculas, el cual nos mostrar las imágenes en una forma muy innovadora. Realizar cambios en nuestro blog de blogger incrementara nuestras visitas. Ya que los usuarios de la red podrán tener una buena perspectiva del blog que están visitando.  Anteriormente publique algunos diseños exclusivos para transformar nuestras entradas populares en unos extraordinarios Slideshow, si no has visto mis publicaciones anteriores, puedes seguir los enlaces que les dejo aquí.

Nuevo estilos de imágenes de entradas populares para blogger


Ahora les invito que vean la demostración del nuevo estilo de imágenes con entradas populares, el widget se llama “Entradas Populares” y se encuentra en la parte superior derecha de mi blog de demos.


Luego de que hayan visto la demostración, nos dirigimos a trabajar.


1 Ir a blogger
2 Diríjase a “Diseño” y luego dele un clic en “Añadir un gadget” y busque el widget que dice “Entradas populares
3 Dejar la configuración del widget de Entradas populares tal como se muestra en la imagen a continuación.


4 Ahora da un clic en “Guardar” y ubica tu widget de entradas populares en cualquier parte de tu blog de blogger.
5 Nos dirigimos a “Plantilla”, le damos un clic en “Edicion de HTML” y en continuar
6 Presiona “F3” y buscamos el siguiente código

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

7 Remplázalo por el siguiente código

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><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 == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (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/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>        
             </div>
            <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>


8 Dale un clic en “Guardar plantilla
9 Ahora dale un clic en “Personalizar” y se te abrirá el diseñador de plantillas de blogger.
10 Dale un clic done dice “Avanzado” y busca “Añadir CSS” e inserta el siguiente código en su interior.

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}


Luego dale un clic en “Aplicar al Blog” y listo mira sus cambios en tu blog de blogger y disfruta de esta espectacular cuadricula de Entradas populares. A continuación te dejo la imagen tal como deberías introducir el código.



¿Necesitas ayuda?

Cualquier parte que no hayan entendido no duden en preguntarme y de inmediato les responderé.

Saludos.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



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.

Related post

Comentarios

4 comentarios:

  1. Hola webmaster, Grandioso tema, ya lo aplique y me funciono gracias por su ayuda.
    Saludos.

    ResponderEliminar
  2. Hola, denada, recuerda que estoy para ayudarte, y me da gusto que te haya sido de mucha ayuda.

    ResponderEliminar
  3. HOLA me agrada esa idea pero se podra poner para una etiqueta? es decir en lugar de las entradas populares m muestre el contenido de una etiqueta de antemano gracias

    ResponderEliminar
  4. Hola, Adolfo, es muy buena tu idea, voy a ver si configuro un nuevo codigo para que aprescan con las etiquetas ok. Si logro hacer ese truco de etiquetas para que se muestre las imagenes, tu seras el primeo que lo vea.
    Saludos.

    ResponderEliminar