Bienvenido a bloggertrucos.com un espacio para el blogger moderno donde buscar soluciones a nuestros problemas de cada día.

Gadget de Entradas populares al estilo Hongkiat

Hongkiat es uno de los sitios en internet más populares del mundo blogging ya que cubre diferentes temáticas como diseño, desarrollo web, herramientas, creación de blogs, etc. El sitio también usa un widget o gadget simple pero interesante el cual ha llamado la atención de muchos bloggers y finalmente ha salido a luz como usarlo en nuestro propio sitio de Blogger.

Blogger por defecto viene con un gadget oficial para mostrar las entradas más leídas o populares en nuestro sidebar, pero en este caso no usaremos otro gadget sino que modificaremos la vista de su widget oficial con CSS.

hongkiat

Gadget de Entradas populares al estilo Hongkiat

Lo único que debemos hacer es ir a nuestra cuenta de Blogger y seleccionar la bitácora donde agregaremos el gadget al estilo de hongkiat. Vamos a la sección de “Diseño” y seleccionamos “Editar HTML”.

Buscamos el siguiente código:

]]></b:skin>

Y pegamos antes lo siguiente:

.PopularPosts {

width:100%;

margin: 0 auto;

padding: 0!important;

border-radius: 2%;

-moz-border-radius: 2%;

-webkit-border-radius: 2%;

counter-reset: trackit;

box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

border: 1px solid #EEE;

}

 

.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: “Calibri”,”Droid Sans”,Tahoma,Geneva,sans-serif;font-weight: 500!important;

text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;

box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);

font-size: 16px!important;

border-top-right-radius: 3px;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

border-top-left-radius: 3px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 0;

-moz-border-radius-bottomleft: 0;

-moz-border-radius-topleft: 3px;

-webkit-border-top-right-radius: 3px!important;

-webkit-border-bottom-right-radius: 0;

-webkit-border-bottom-left-radius: 0;

-webkit-border-top-left-radius: 3px;

bottom:0;

top:0;

}

.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;

}

.popular-posts ul{padding:0!important;margin:0!important;}

.popular-posts ul li {

border-bottom: 1px solid #f1f1f1;

list-style: none outside none !important;

margin-left: 0 !important;

overflow: hidden;

padding: 10px 0 !important;

transition: all 0.25s linear 0s;

counter-increment: trackit;}

#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}

#PopularPosts1 li:nth-child(even) {background: #FFF;}

#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}

#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}

#PopularPosts1 ul li:before {content: counters(trackit,”.”);padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}

#PopularPosts1 a:hover {text-decoration: underline;}

#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}

.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}

Guardamos los cambios y ahora podemos agregar el gadget de “Entradas populares” en Blogger para ver el resultado el cual deberá ser así:

gadget

Fuente | Track My Blog

 

 

 

Show Comments

No Responses Yet

Leave a Reply