Beleza Nerd

19 março 2018

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

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.

Salve.

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

Modelo 01

18 junho 2016

HTML: Titulos da sidebar personalizado em nuvem

ㅤ blogs html personalização sidebar Tutoriais

Oláá! tudo bem com vocês? espero que todo mundo esteja super bem. Apesar de eu ainda estar meio enrolada nos assuntos pessoais tô fazendo o que posso para manter o blog atualizado, creio que a partir da próxima semana volta tudo ao normal, sem atrasar postagens e sem demorar horrores para responder os comentários, peço até desculpas por isso, eu leio todos os comentários (chegam a notificação no email do celular,) mas no celular é difícil de responder e como não estou usando muito o computador acaba acumulando, mas em breve vou responder todos os comentários ♥

Eu vi que tem um tempinho que não posto tutoriais de HTML, então achei uma boa postar hoje, é bem simples e fácil de fazer, admito que não era esse tutorial que queria postar hoje, mas eu comentei no post passado que houve alguns casos de plágio

com esse layout, e um deles foi essa parte do código, ai eu pensei já que roubaram mesmo na cara dura, vou postar tutorial pra todo mundo aprender também HAUASA eu juro que o tutorial é super fácil!

Esse é o resultado, é o modelo que eu uso atualmente aqui no blog

São só três passos, então tá fácil fácil

1 - Sua sidebar (barra lateral) tem que estar com os gadgets separados, um espaço entre um e outro, caso o seu não estiver siga esse tutorial do Cherry bomb ♥

2 - Abra seu HTML e procure por }]]></b:skin> ou só }]]> e ACIMA dele cole o seguinte código

.sidebar .widget {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin: 70px 0;
background: #fff;
box-shadow: 0px 0px 2px #ccc;
}
.sidebar h2 {
font-family: 'Grand Hotel', cursive;font-size: 35px;color: #000000;font-weight: normal;
background: url(http://i.imgur.com/PYkI0e3.png);
padding-top: 35px;
font-weight: normal;
height: 50px;
width: 280px;
text-align: center;
margin-left: 25px;
margin-bottom: 10px;
margin-top: -70px;
position: absolute;
}

Entendendo o código: As partes em vermelho são as que você deve alterar ou não, vai depender do seu gosto. A parte "margin:70px;0;" vai ser o espaçamento entre os gadgets e as nuvens, pode ser que no seu as nuvens fique muito em cima do próximo gadget ou do anterior ou muito separado, nesse caso você aumenta o numero para da mais espaço, e diminui para diminuir o espaço. No caso aqui do blog 70 ficou perfeito.

A parte que tem o background e a url de uma imagem, é a nuvem e vocês podem alterar a cor no photoshop por exemplo.

Já as partes em lilás é a parte que você deve alterar, a primeira é o nome da fonte, em seguida o tamanho e o terceiro a cor, você altera de acordo com seu gosto.

Se você quiser usar a mesma fonte que eu usei (Grand Hotel) no seu HTML procure por <head> e ACIMA dele cole

<link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css/>

3 - Salve! Pronto sua nova sidebar está pronta para uso.

Uma dica: Para usar e ela ficar mais bonita, normalmente o conteúdo dos gadgets "colam" e acaba ficando embaixo da nuvem, para isso não acontecer no seu gadget se for de HTML/Javacript ANTES do conteúdo, você coloca duas quebras de linha que são <br><br> e salva, e pronto fica tudo perfeito.

E como sou uma boa pessoa