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

6

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