terça-feira, 21 de abril de 2015

Labels Coloridas no Blogger


labels-coloridas-blogger
O Blogger Labels Widget pode ser denominado em uma variedade de maneiras. Anteriormente vimos Labels ondulados e animados. Agora, que tal uma etiquetas coloridas widget? Este suporta um máximo de 20 etiquetas. Você poderá obter esta ferramenta incrível arco-íris, adicionando alguns passos de CSS

vamos começar então a fazer isso siga os passos 
Etapa I: Adicionando os Labels ferramenta ao seu Blog

De Dashboard do seu Blog, navegue até Layout -> Adicionar um Gadget -> e selecione Labels da lista. Selecione Classificando por frequência. Não se esqueça de selecionar a exibição Cloud. Agora salve o Gadget. como a figura abaixo mostrada
configurando-labels


Etapa II: Adicionando CSS

Agora volte para o Dashboard do seu Blog e navegue até Template -> Personalizar -> Avançado -> Adicionar CSS. Copie e cole o código abaixo e clique em Aplicar para blog. Isso é tudo!

.label-size {display:inline-block; float:left; padding:7px; font:12px verdana; text-transform:uppercase; margin:0 4px 4px 0;}

.label-size a {color:#fff!important; text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}
.label-size a:hover {text-decoration:none;}

.label-size:nth-child(1) {background:#ff0000;}
.label-size:nth-child(2) {background:#cf650d;}
.label-size:nth-child(3) {background:#9e0963;}
.label-size:nth-child(4) {background:#f54e67;}
.label-size:nth-child(5) {background:#42ad9d;}
.label-size:nth-child(6) {background:#b3001b;}
.label-size:nth-child(7) {background:#5c3e31;}
.label-size:nth-child(8) {background:#8e4811;}
.label-size:nth-child(9) {background:#ff9900;}
.label-size:nth-child(10) {background:#097054;}
.label-size:nth-child(11) {background:#6599ff;}
.label-size:nth-child(12) {background:#461d7c;}
.label-size:nth-child(13) {background:#666666;}
.label-size:nth-child(14) {background:#00ff00;}
.label-size:nth-child(15) {background:#7c71ad;}
.label-size:nth-child(16) {background:#1eb6ff;}
.label-size:nth-child(17) {background:#898c17;}
.label-size:nth-child(18) {background:#000078;}
.label-size:nth-child(19) {background:#ffcc00;}
.label-size:nth-child(20) {background:#cc3333;}

.label-size:hover {opacity:0.6; -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s;}

Pronto agora esta pronto para fazer suas tag label coloridas 
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