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
<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
<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:"";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 "Times New Roman",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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;}</style>
Modelo 03
<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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}</style>
Modelo 4
<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 'Oswald', 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
<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 'Oswald', 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: "";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 'Oswald', 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 "Times New Roman",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
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>
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.
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
Adorei os modelos, são lindos e dá uma cara mais legal ao blog. Muito legal compartilhar bjo
ResponderExcluirAdorei seu post. Parabéns pelo blog.
ResponderExcluirAmeei vou fazer agora, amoo tutoriais
ResponderExcluirEu adorei todos os modelos que tu mostrou nesse post. É um assunto de utilidade pública pra todos nós da blogosfera. Beijos
ResponderExcluir