add

Entradas populares para Blogger estilo diferente


Obtener nuevos estilos fascinantes para implementarlos en nuestro blog de blogger es lo que van a aprender con este grandioso tutorial de blogger. Voy a explicar un truco muy simple y fácil de realizar para cambiar el estilo de nuestras entradas populares para blogger, este truco para blogger se lo realiza de forma sencilla, solo tendrán que seguir las instrucciones claras de como insertar los diferentes estilos y así podrán obtener este magnifico truco para blogger. Ayudadeblogger.com se basa en presentarles trucos nuevos para blogger y que se muestren en todos los navegadores posibles como Firefox, Google Chrome, Internet Explorer etc. La funcionalidad de este nuevo estilo de entradas populares para blogger es, aumento de la imagen al momento de pasar el cursor por una de ellas, estilo único en la forma en que se muestra la imagen y el resumen de nuestra entra popular de blogger.

Entradas populares para Blogger estilo diferente

Antes de ir a las instrucciones de configuración de nuestro nuevo estilo de entradas populares para blogger, les invito a que visiten algunos otros estilos de entradas populares para blogger de los cuales les dejo los enlaces a continuación

  1. Cambiar mis Entradas Populares de forma Horizontal
  2. Como cambiar de estilos a mis Entradas Populares de blogger
  3. Entradas Populares convertidas en imágenes 3D
  4. Entradas Populares para blogger nuevos estilos
  5. Mostrar un Slideshow con mis entradas populares para blogger
  6. Nuevo estilos de imágenes de entradas populares para blogger
  7. Nuevos estilos Entradas populares para blogger
  8. Slideshow con Entradas Populares Nuevo estilo
  9. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  10. Widget para blogger, Slideshow con Entradas Populares

A continuación mire su demostración en un blog que ya utiliza este tipo de estilos de entradas populares, el widget tiene como nombre “CATEGORÍAS


Te gusto verdad!

Vamos a trabajar

1 Ir a blogger

Luego dirígete a diseño y mira si tienes habilitado el widget de Entradas populares, si no lo tienes habilitado, tendrás que habilitarlo y ubícalo donde mejor te parezca.

Entradas populares para blogger
Entradas populares para blogger
Entradas populares para blogger

2 Da un clic en “Plantilla

3 Un clic en “Editar HTML

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

Entradas populares para 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.

Entradas populares para blogger

4 Busca este código

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontraste

/*-----PopularPosts start by Ayudadeblogger.com-----*/
.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}


5 Busca este código

</head>

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

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


6 Busca este código

</body>

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

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

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

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 y de inmediato les responderé

Saludos.

1 comentarios:

  1. señor luis chaves, ya instale la barra de entradas populares con mucho exito una duda cuando hago click en una de las opciones de las entradas me abre una ventana aparte con la entrada , me gustaria saber que codigo cambio o elimino para que cuando seleccione una entrada me la abra en la misma ventana sin dejarme la entrada anterior abierta . espero entenderme espero repuesta

    ResponderEliminar

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