segunda-feira, 26 de outubro de 2015

Popular post novo estilo blogger 2015

popular-post-widget-new-style-2015

Demo 

Hoje vamos apresentar um lindo popular post widget com um estilo muito atraente para seu blogger, popular post tem se tornado mais frequente em blogger e por isso a real função disso é aumentar pageviews e dar prioridade o que as pessoas estão acessando com mais frequência no seu blog por isso vamos compartilhar com você isso para adicionar isso siga os passos abaixo.


Adicionando no seu blogger popular post widget

Faça login no blogger, então no menu clique em modelo então editar html 
com as teclas combinadas CTRL+F busque por ]]><b:/skin>  para adicionar o código CSS e então acima disso copie o código abaixo e cole antes.

/* Popular Posts Widget  */
.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-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

Nota se você tem outra configuração para popular post remova isso antes de adicionar o código


Agora vamos adicionar o JS 

então busque novamente por </body> então copie o código abaixo e cole antes disso


<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[
    // 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>



Note se você ja possui Jquery no seu template remora o que esta em amarelo caso contrario deixe como esta

Salve e pronto confira o resultado.

Créditos: Allblogertricks


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner