- A lista numerada de posts do blog é aquela que usamos quando desejamos enumerar algum assunto que estamos abordando, ou delegando tarefas que devem seguir determinada ordem.
- Você já deve ter visto em vários blogs, a maioria está personalizada, porque também o recurso usado sem personalização é bem sem graça 😄.
- Para que não este duvidas, confira!
- Esse é o painel de postagem do blogger, a lista numerada é a segunda opção de quando você expande os 3 pontinhos.
- Abaixo como ela é sem personalização.
- Sem graça, né!
- Agora vamos às personalizações e você verá que elas podem se tornar bem mais atraentes, destacando seu conteúdo em listas ordenadas principalmente.
- A preferência que você sempre instale no seu blog de teste antes, de inserir no principal.
- Para instalar o código escolhido:
- Abra o painel do blog, tema, HTML, quando abrir dê o famoso CTRL + F, procure por:
- ]]></b:skin> de um enter, acima desse fechamento cole o código escolhido.
- 1° Modelo
.post ol{counter-reset:li;list-style: none;*list-style: decimal;margin-left:0;padding-left:0}.post ol li{position:relative;margin:0 0 20px 15px !important;padding:4px 5px 4px 10px !important;list-style:none;*list-style: decimal;border-bottom:1px solid #f6a2cc; /* estilo da borda inferior dos elementos*/background:#fffaf2; /* cor de fundo dos elementos*/text-indent:14px;}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;top:-6px;left:-10px;font-family:'Oswald', serif;font-size:14px; /* tamanho dos números*/width:20px;margin:0 0 10px 0;padding:4px !important;color:#ffffff; /* cor dos números*/text-align:left;background:#bb5076; /* cor de fundo dos números*/text-indent:6px;}.post ol li:after{content:"";position:absolute;top:-5px;left:17px;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 0 5px;border-color: transparent transparent transparent #f177a1; /* color of the triangle behind */}
.post ol{counter-reset:li;list-style:none;*list-style:decimal;font:100%;padding:0;margin-bottom:4em;font-weight:none}.post ol li{position:relative;display:block;padding:.4em .4em .4em 4em;*padding:.4em;margin:1.5em 0;text-decoration:none;border-radius:.3em;transition:all .3s ease-out}.post ol li:hover:before{transform:rotate(360deg)}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:10px;top:50%;margin-top:-1.3em;height:2em;width:2em;line-height:1.8em;color:#fff;background:#fdc5cc;border:.1em solid #fff;-webkit-box-shadow:0 8px 5px -7px #985c28;-moz-box-shadow:0 8px 5px -7px #816248;box-shadow:0 8px 5px -7px #816248;text-align:center;font-weight:600;border-radius:2em;transition:all .3s ease-out}
- Terceiro e último modelo.
.post ol{counter-reset: li;list-style: none;*list-style: decimal;padding: 0;margin-bottom: 4em;font: 100% /* tamanho e estilo da fonte*/text-shadow: 0 1px 0 rgba(255,255,255,.5);}.post ol li{position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: 1.5em 0 .5em 4.5em;text-decoration: none;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;left: -30px;top: 50%;margin-top: -1em;background: #55a39e; /* cor de fundo dos números*/height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #ffffff;}.post ol li:after{position: absolute;content: '';left: 4px;margin-top: -.5em;top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:8px solid #4d8398; /* cor de fundo da seta*/}
- Terminamos escolha o que agrada e combina mais com seu blog, para alterar as cores consulte a tabela de cores, tem muitas opções.
- Não esqueça de compartilhar, desejando uma personalização que não encontrou aqui, deixe seu pedido nos comentários.
Nenhum comentário:
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.