add

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.

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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios