Personalizar rótulos de rodapé pós-
Um tempo atrás vi como adicionar ícones para as guias do post-footer, agora vamos adicionar alguns estilos simples, que irá destacar formulário.
Na marca de edição de HTML para expandir o modelo e olhar a parte relativa às etiquetas.
Destacadas em negrito é o rótulo <data:label.name/> que é responsável por gerar as etiquetas, em seguida, adicione a marcação de cor vermelho.
class='post-labels'> <span
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
valores = 'data: post.labels' var='label'> <b:loop
<a expr:href='data:label.url' rel='tag'>class='etiquetas'> <span<data:label.name/></ Span></ A>
dados cond = ': <b:if label.isLast != "true"'> , </ B: if>
== Cond = 'data: <b:if blog.pageType "item"'>
<Expr Script: src = "/ feeds/posts/default/- /" + data: label.name + "alt = json-in-script & callback = related_results_labels & max-results = 20?" 'Tipo = "text / javascript '/>
</ B: if>
</ B: loop>
</ B: if>
<-! QuickEdit lápis ->
name='postQuickEdit'/> <b:includable 'post' data =
</ Span>
Bem ali, você pode excluir a vírgula separando as abas, é marcada com um fundo preto.
Se nós somos o lugar da vírgula pode acrescentar algo imagem decorativa ou de caráter unicode.
style = "vertical-align: middle; <span color:#000; 1px 1px 1px font-size:24px;text-shadow: #505050"> ❧</ Span>
Salve as alterações e adicionar os estilos para os separadores, pouco antes ]]></ B: skin>
. Cloud {
padding: 4px;
color: # ffffff;
opacidade: 0,6;
text-shadow: 0 3px 2px # 000000;
background: none repeat scroll 0 0 # 990000;
}
. Tags: hover {
opacidade: 0,9;
}
Ao fundo, mudar a cor de fundo, a cor da fonte na sombra de texto " de cor", que usamos para pintar o texto e opacidade para o efeito hover.
Qualquer estilo que podemos adicionar e visualizar os resultados ou continuar mudando.
. Cloud {
padding: 4px;
color: # ffffff;
-Moz-border-radius: 5px 5px 5px 5px;
background: none repeat scroll 0 0 # 990000;
text-shadow:-1px 1px 1px-# 555;
-Moz-box-shadow: 3px 3px 3px # 000000;
}
. Tags: hover {
opacidade: 0,9;
}
original post:
\/
fonte e créditos: http://gemablog-.blogspot.com/
Personalizar las etiquetas de post-footer
Hace un tiempo vimos la forma de añadir iconos a las etiquetas del post-footer, hoy vamos a añadirle unos sencillos estilos de forma que las resaltaremos.
En edición de html marcamos para expandir la plantilla y buscamos la parte que afecta a las etiquetas.
Resaltado en negrita está la etiqueta <data:label.name/> que es la encargada de generar las etiquetas, a continuación añadiremos lo marcado en color rojo.
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='etiquetas'><data:label.name/></span></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
Ahí mismo podemos eliminar la coma que separa las etiquetas, está marcado con fondo negro.
Si queremos en el lugar de la coma podemos añadir algo decorativo una imagen o carácter unicode.
<span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">❧</span>
Guardamos los cambios y añadimos los estilos para las etiquetas justo antes de ]]></b:skin>
.etiquetas {
padding:4px;
color:#ffffff;
opacity:0.6;
text-shadow:0 3px 2px #000000;
background:none repeat scroll 0 0 #990000;
}
.etiquetas: hover {
opacity:0.9;
}
En background cambiamos el color de fondo, el color de fuente en "color" text-shadow lo utilizamos para dar sombra el al texto y opacity para el efecto hover.
Cualquier estilo podemos añadirlo y ver el resultado o seguir cambiando.
.etiquetas {
padding:4px;
color:#ffffff;
-moz-border-radius: 5px 5px 5px 5px;
background:none repeat scroll 0 0 #990000;
text-shadow: -1px -1px 1px #555;
-moz-box-shadow: 3px 3px 3px #000000;
}
.etiquetas:hover {
opacity:0.9;
}
Postagens
0 comentários:
Postar um comentário
Mensagem do formulário de comentário:
obrigada por comentar,
volte sempre!