19 março 2018

Tutorial: 5 Modelos de Postagens Populares Personalizadas (Mais Lidos)



Postagens populares personalizada



Update feito em 23/02/2019

Olááá! tudo bem com vocês? espero que sim! hoje eu trouxe mais um tutorial super útil para o blog de vocês, que também é muito pedido pelos clientes no portfólio. São posts populares personalizados e automáticos. No total são cinco modelos todos em CSS prontinho para uso, somente com três passos de HTML você já instala o seu! Vem conferir.

Em Tema >> Editar HTML >> Clique dentro da caixa de códigos e tecle Ctrl+f quando aparecer a barrinha pesquise por </body>  e ACIMA dele cole o código abaixo. Não precisa editar nada. 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/><script type='text/javascript'>//<![CDATA[$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});//]]></script>

2. Pesquise por <head> e ACIMA dessa tag cole o código abaixo. 

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Salve.

3. Escolhendo seu modelo de posts populares, o código do seu modelo favorito e cole ACIMA de </head>


 Modelo 01 


Postagens populares personalizada



<style type='text/css'>.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}</style>


 Modelo 02 


Postagens populares personalizada

<style type='text/css'>.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:&quot;&quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}</style>


 Modelo 03 


Postagens populares personalizada


<style type='text/css'>.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}</style>

 Modelo 4 


Postagens populares personalizada





<style type='text/css'>.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}</style>

 Modelo 5 


Postagens populares personalizada

<style type='text/css'>.sidebar .PopularPosts ul {counter-reset: popularcount;margin: 0;padding: 0;list-style-type:none;}.sidebar .PopularPosts ul li {float: left;max-height: 130px;min-width: 250px;position: relative;}.sidebar .PopularPosts .item-thumbnail::after {color: rgba(255,255,255, 0.63);content: counter(popularcount, decimal);counter-increment: popularcount;font: 70px &#39;Oswald&#39;, sans-serif;list-style-type: none;position: absolute;left: 5px;top: -5px;z-index: 4;}.sidebar .PopularPosts .item-thumbnail::before {background: rgba(0, 0, 0, 0.3);bottom: 0px;content: &quot;&quot;;height: 100px;width: 100px;left: 0px;right: 0px;margin: 0px auto;position: absolute;z-index: 3;}.sidebar .PopularPosts .item-thumbnail a {clip: auto;display: block;height: auto;overflow: hidden;}.sidebar .PopularPosts .item-thumbnail {width: 100px;height: 100px;margin: 0px 10px 0px 0px !important;position: relative;}.sidebar .PopularPosts .item-thumbnail:hover:before {display: none;}.sidebar .PopularPosts .item-thumbnail img {position: relative;padding-right: 0px !important;height: 100%;width: 100%;object-fit: cover;}.sidebar .PopularPosts .item-title {font: 13px &#39;Oswald&#39;, sans-serif;text-transform: uppercase;padding: 0px 5px 10px;}.sidebar .PopularPosts .item-title a {color: #000;text-decoration: none;}.sidebar .PopularPosts .item-snippet {font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li {padding: 0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content {padding: 5px 0px;overflow: hidden;height: 100px;position: relative;}</style>


Códigos originais pelo blog gringo Help Blogger

 Adicionando postagens populares no blogger 


Basta ir em Layout >> no local de seu preferencia e clique em adicionar novo gadget >> Postagens mais visitadas e configure o gadget a seu gosto

postagens populares personalizadas


 Caso as imagens  do gadget fiquem borradas



Pode acontecer (eu vi em alguns blogs por ai) que as imagens da caixinhas ficares desfocadas. Se for seu caso, você vai precisar adicionar uma linha de código a mais.

Pesquise dentro do seu HTML por </body encontrou? ACIMA dele, cole o código abaixo
Depois salve, e o problema estará resolvido!

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>

</script>

Gostaram do tutorial? super simples e muito funcional. Qual foi o modelo que vocês mais gostaram? Até o próximo post  




4 comentários:

  1. Adorei os modelos, são lindos e dá uma cara mais legal ao blog. Muito legal compartilhar bjo

    ResponderExcluir
  2. Adorei seu post. Parabéns pelo blog.

    ResponderExcluir
  3. Ameei vou fazer agora, amoo tutoriais

    ResponderExcluir
  4. Eu adorei todos os modelos que tu mostrou nesse post. É um assunto de utilidade pública pra todos nós da blogosfera. Beijos

    ResponderExcluir

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2019. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo