quarta-feira, 13 de maio de 2015

Adicionando CSS3 Style Numbered List post Blogger

numbered-list-custom-post-inside-blogger


Hoje vamos falar de adicionar Css3 Style Numbered List post Blogger significa série numérica que pode ser usado em Blog post. Geralmente pelo Blog do padrão tem lista de opção de estilo, onde selecionando dois ou mais linha se eu clicar na opção de lista, em seguida, ele irá adicionar automaticamente o número de série por linha. Esta opção é mais popular no modelo de blog, bem como Blog de musica cai bem, onde utilizar maciçamente para listar o recurso de modelo ou Mp3 lista de faixas.

Geralmente no blog de música vemos a lista de faixas com a lista manual, mas é difícil para adicionar o número de série por linha se criarmos aleatoriamente post. Mas a solução é usar Lista Widget estilo que irá ajudá-lo a adicionar o número de série por linha por um clique.

No entanto Widget estilo de lista padrão não é atraente ou elegante e não pode capaz de atrair visitantes. Por esta razão eu estou compartilhando tutorial que irá ajudá-lo a adicionar CSS3 ordenou estilo de lista com efeito hover. Para escolha diferente de leitores são 2 estilo. Você pode facilmente usar qualquer estilo de lista numerada CSS3.

Passo 1 Faça login na sua conta do Blogger e Vá para o seu painel do Blogger

Passo 2 Clique em Agora clique em -> Modelo -> Editar HTML

Passo 3 Agora, encontrar o </ b: skin> pressionando Ctrl + F

Passo 4 Copie o código abaixo e cole o código acima / antes </ b: skin>

/* CSS3 ordered list Rectangle style one*/
ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#FA8072;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}

Para mudar a cor só substituir o codigo amarelo pelo codigo de sua cor 



Estilo 2 


/* CSS3 ordered list Rounded style by www.bloggerspice.com */
ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#87CEEB;color:#FEFEFE;height:2em;width:2em;border-radius: 30px;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#87CEEB;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}

Para trocar a cor só substituir o campo listado em amarelo pelo codigo da cor favorita 

para usar é simples você precisa acessar o blogger ir no campo da postagem e selecionar

Simplesmente escreva selecione o texto e clique em marcadores vai mostrar o seu resultado final 





NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner