Translate

Pesquisar

Marcadores


Saiba Como:..."Personalizar rótulos de rodapé pós-"..."etiquetas de post-footer"

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"> &#10087;</ 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 != &quot;true&quot;'>  , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' 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">&#10087;</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;
}
Si te ha gustado ¡ Compártelo !

0 comentários:

Postar um comentário

Mensagem do formulário de comentário:
obrigada por comentar,
volte sempre!