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!
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.
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.
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.
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? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.