Marcadores Personalizados

Muitos desejam implementar marcadores fascinantes e personalizados, mas não fazem a mínima ideia de como deixa-los a sua cara. Há muitas customizações para deixar cada detalhe de seu blog, a sua cara! Pois então, neste tutorial irei ensina-los à como personalizar os Marcadores.

Algumas propriedades como CSS3 Gradientes e box-shadow, são bastante usados para contribuir com o desenvolvimento do designer.

Antes de começarmos , certifique-se que o seu Widget de "Marcadores" esteja marcado a opção de exibição para Cloud, assim como podem visualizar abaixo:

O resto das outras opções, fica ao seu critério. Mas para que o efeito seja concedido, é necessário preencher obrigatoriamente o recurso "Cloud".

Depois de terem feito como pedido acima, agora vamos ao próximo passo.

Como adicionar estilo de marcadores no blogger?

a. Aceda ao Painel do Blogger e navegue até Modelo > Editar HTML
b. Encontre o seguinte ]]></b:skin>(use CTRL + F para encontrar o código, basta apertar a tecla de atalho dita entre os parágrafos e digitar o que procura)
c. Copie e cole o seguinte código antes de ]]></b:skin>

/*------------- Start label by www.dicasblogger.org -------------*/

.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:#0089e0;
color:#fff;
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 #0089e0 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:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

/*------------- End of label by www.dicasblogger.org -------------*/

d. Clique em Salvar modelo e prontinho!
e. O resultado será:

Qualquer duvida não hesite em perguntar, pois estaremos ao dispor em lhe ajudar, se necessitarem de suporte adicional.

Até a próxima!

Fonte: www.dicasblogger.org



Sobre o Autor



Confira Todas Postagens de Elielton Queiroz Clique Aqui...

Share :

• Tweet

Related posts

Marcadores Personalizados

Description: Marcadores Personalizados Rating: 4.5 Reviewer: Unknown ItemReviewed: Marcadores Personalizados

Al

Mbah Qopet Updated at: 22:57