Translate

24 fevereiro 2016

Como colocar marcadores personalizados no blog

Oi pérola, hoje personalizei minha categoria marcadores, ela estava normal, a que já vem no blog, eu estava achando muito bagunçado e resolvi da um jeitinho, e como gosto de compartilhar coisas boas com as pessoas, vou compartilhar com vocês.
Este é o modelo.




Primeiro adicione o widget marcadores: Vá até Layout> Adicionar Gadgets> e procure por marcadores


Clique no   e em salvar.

Agora vá até Modelo> Editar HTML> clique em qualquer lugar do Html, segure CTRL e aperte o F> irá aparecer uma caixinha dentro dela digite ]]></b:skin> e aperte enter.

Acima desse código cole este abaixo:

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#FF1493;
color:#FF1493;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #FF1493 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#FF1493;
-moz-box-shadow:-1px -1px 2px #FFFAFA;
-webkit-box-shadow:-1px -1px 2px #FFFAFA;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#FFFAFA;}
.label-size a:hover:before{border-color:transparent #FFFAFA transparent transparent;
}    

Depois disso é só clicar em Visualizar modelo, se tiver tudo certo clique em Salvar Modelo.

Obs: Para troca as cores de fundo é só procurar Background nesse codigo ai acima e substituir os por exemplo #FFFAFA pelo código da cor que você quer. Nesse site aqui http://www.color-hex.com/color-palettes/  você pode escolher as cores e pegar o código.

Então é isso, qualquer duvida só perguntar :D beijinhos




10 comentários: