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

60

Mostrar Entradas populares con estilo muy elegante en Blogger

El widget de las Entradas mas populares en Blogger es uno de los widgets básico que debemos de instalar o agregar al sidebar de nuestro sitio. Existen muchas formas de modificar y personalizar el widget de las “Entradas populares” en Blogger, aquí les presento una de mis favoritas.

 

entradas populares blogger

Entradas populares con estilo muy elegante

La instalacion incluye dos codigos a usar: La hoja de estilo CSS y un codigo en Javascript, pero vamos como instalarlo!

El CSS: agregamos el siguiente codigo a nuestro blog antes de

  ]]></b:skin>

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-thumbnail:hover img { transform: rotate(10deg) scale(1.2); }
.item-content { position: relative; }

Ahora agregamos el codigo en Javascript antes del cierre de BODY

 <script src=’//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’/>
<script type=’text/javascript’>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
<script type=’text/javascript’>
//<![CDATA[
// Popular Posts customization by AllBloggerTricks.com
// Trim Code by MS-potilas 2012
$(‘.popular-posts ul li .item-snippet’).each(function(){
var txt=$(this).text().substr(0,120);
var j=txt.lastIndexOf(‘ ‘);
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,’…’));
});
//]]>
</script>

Demo

Show Comments

No Responses Yet

Leave a Reply