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
- Cambiar mis Entradas Populares de forma Horizontal
- Como cambiar de estilos a mis Entradas Populares de blogger
- Entradas Populares convertidas en imágenes 3D
- Entradas Populares para blogger nuevos estilos
- Mostrar un Slideshow con mis entradas populares para blogger
- Nuevo estilos de imágenes de entradas populares para blogger
- Nuevos estilos Entradas populares para blogger
- Slideshow con Entradas Populares Nuevo estilo
- Slideshow de Popular post o Entradas polulares para mi blog de blogger
- 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 “EN ESTA SEMANA”
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.
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
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.
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 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”
Fácil verdad! Es momento de mirar el nuevo cambio de tu Entrada popular de blogger en tu blog.
No hay comentarios:
Publicar un comentario