add

¿Cómo cambiar de estilos a mis Entradas populares de mi blog Blogger?


¿Cómo puedo cambiar los estilos a mis entradas populares de mi blog de Blogger? La facilidad con la que podemos cambiar de estilos a nuestras Entradas populares de nuestro blog de Blogger es lo que vas aprender el día de hoy, un truco de Blogger muy fácil de realizarlo, tendrás que seguir las instrucciones de este Tutorial tal como lo muestro. Lo que vamos hacer es insertar unas líneas de código dentro del editor HTML de nuestra plantilla, y luego ver los cambios. Al agregar los nuevos estilos en nuestra plantilla, nos mostrara la primera imagen de nuestro widget popular post de un tamaño grande y las demás imágenes de un tamaño reducido, dándole un aspecto único a nuestras entradas populares.

¿Cómo cambiar de estilos a mis entradas populares de Blogger?

Bueno luego de esta explicación vamos a trabajar

1 I r a Blogger

2 Un clic en “Diseño

¿Cómo cambiar de estilos a mis entradas populares de Blogger?

3 Abre “Añadir un gadget

Cómo cambiar de estilos a mis entradas populares de Blogger

4 Busca el widget que dice “Entradas populares” ábrelo

Cómo cambiar de estilos a mis entradas populares de Blogger

5 Configúralo tal como lo muestro en la siguiente imagen

Cómo cambiar de estilos a mis entradas populares de Blogger

Una vez realizado esos cambios da un clic en “Guardar” y ubica tu entrada popular donde mejor te parezca

6 Ahora vamos a insertar unos estilos dentro de la plantilla, sigue las siguientes instrucciones:

7 Da un clic en “Plantilla

Cómo cambiar de estilos a mis entradas populares de Blogger

8 Un clic en “Editar HTML

Cómo cambiar de estilos a mis entradas populares de Blogger

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Cómo cambiar de estilos a mis entradas populares de Blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, 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 te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Cómo cambiar de estilos a mis entradas populares de Blogger

9 Busca este código

]]></b:skin>

Inserta el siguiente estilo justo antes del código que encontraste

/* ---PopularPosts--- */
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:bold;font-size:14px;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .item-title a:hover{color:#10A0DF;text-decoration:underline}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts img{width:100%;height:100%}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts .widget-content ul li{padding:.2em 0}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:70px;height:60px;margin:5px 8px 5px 0;overflow:hidden}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:190px;overflow:hidden;margin-bottom:20px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-snippet{position:absolute;top:50px;width:75%;left:20px;color:#fff;background-color:rgba(226,71,25,0.82);padding:15px}
.PopularPosts li:first-child .item-title a{font-size:16px;}

Cómo cambiar de estilos a mis entradas populares de Blogger

10 Busca este código

</head>

Inserta el siguiente código justo arriba del código que encontraste

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

11 Busca este código

</body>

Inserta el siguiente código encima del código que encontraste

<script type='text/javascript'>
    //<![CDATA[
    var newSize = 296;  // este el nuevo aumentador thumbnail size, usted puede cambiarlo
    $(".popular-posts .item-thumbnail img").each(function() {
        var oldSize = $(this).attr("width");
        $(this).attr("width", newSize); $(this).attr("height", newSize);
        $(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));
    });
    //]]>
  </script>


Eso es todo, ahora dale un clic en “Guardar plantilla

Cómo cambiar de estilos a mis entradas populares de Blogger

¡Fácil verdad!

Es momento de mirar el nuevo cambio de tu Entrada popular de Blogger en tu blog.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

0 comentarios:

Publicar un comentario en la entrada

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