Las entradas populares es quizas uno de los gadgets mas usados por los usuarios de Blogger asi que personalizarlo un poco y darle un poco de estilo a este gadget no viene nada mal.
Con el truco de hoy el gadget se convertira en una especie de pequeño slider, ya que las entradas tendran un efecto de deslizamiento en el area del gadget,mejor pongo una imagen para que entiendan mejor el truco.
Para agregar este truco a tu blog primero debes tener el gadget de entradas populares, si ya lo tienes solo debes pegar en un gadget HTML/JavaScript lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Ir a Blogger
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhB2iz2RSKRtRy94fVIju27Jszf26oI3m7BVO7DZzr5yQku_PuMYBUK2X0cKJdpnDxVK_RysTAwtiv0uozK4GA16ep2gdEK7niccxzgjAQthr0NjTIITU0C0bx7lc7lgfuFHI5CxMcEA/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
Despues de haber insertado el código, un clic en "Guardar"
Fecha de la Publicación; 14/11/2020
Fuente miltrucosblogger.
Publicado por:
No hay comentarios:
Publicar un comentario