saiba mais  sobre:..."link selecionado",,,"etiqueta selecionada"
Autor: arqblog | Publicado: 2014-02-10T17:55:00-08:00


saiba mais  sobre:..."link selecionado",,,"etiqueta selecionada"






traduzido: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 








Alteração dos rótulos widget selecionado rótulo,

&nbsp;e dar um "estilo diferente"&nbsp;

de ser identificado como&nbsp;

um link selecionado











Antes, eles disseram que, como&nbsp;a criação de uma caixa ou bloco as etiquetas ligações widget&nbsp;.&nbsp;
Há uma limitação, eu não levei em conta, e Blogger definido no HTML do widget, ou seja, converter o link para o tag selecionado em texto simples, que não é mais um link, e não link, não aplicar estilos CSS, declaramos cada link do rótulo:




Então, quando ele mostrou-lhes&nbsp;&nbsp;como criar botões nos links para os rótulos&nbsp;, decidi desaparecer do&nbsp;link selecionado&nbsp;, no final, que quando estava na página desse link, não gostaria de voltar a entrar no mesmo rótulo, e ainda não ser possível, porque já não link, texto, e também perdeu os estilos declarados e não podia ver o botão.&nbsp;

# Label1 span [dir = ltr] {
display: none;
}&nbsp;

Com o código acima, evitamos mudando o estilo ou melhor, não mostram a tag selecionada,&nbsp;somente&nbsp;&nbsp;quando selecionado.&nbsp;

Pensando sobre estes casos e mais estético,&nbsp;podemos converter os selecionados tag link,&nbsp;e depois&nbsp;criar uma classe&nbsp;para o rótulo do link selecionada e criar um estilo "&nbsp;diferente&nbsp;", para que nossos usuários estão cientes de que alguns rótulo é selecionado, como com o link selecionado, widget páginas estáticas em modelos Blogger.&nbsp;


"Soa melhor certo? é mais mais simples do que parece, e ter usado os estilos CSS de cada tutorial que eu mencionei, nós só precisamos, mudar um pouco rótulos widget HTML, e declarar alguns estilos (CSS) para o link selecionado, e você pode ver&nbsp;diferentes&nbsp;.&nbsp;"

Como se passo a passo&nbsp;

Passo 1&nbsp;.&nbsp;Editar ► Vamos design HTML, Expandir modelos de widgets e com a ajuda de "Ctrl F", olhar para essas linhas de código:&nbsp;


&nbsp; &nbsp; &nbsp; &lt;b:loop values='data:labels' var='label'&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&lt; b: if 'dados: blog.url == dados: label.url' cond =&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;span expr:dir='data:blog.languageDirection'&gt; &lt;data:label.name/&gt; &lt;/ span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;b: else /&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a expr:dir='data:blog.languageDirection' expr:href='data:label.url'&gt; &lt;data:label.name/&gt; &lt;/ a&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ b: if&gt;&nbsp;
Dica&nbsp;: Procuramos "O nome que demos o Widget" e saia um pouco para encontrar essa parte.

&nbsp;Passo 2&nbsp;: Em seguida, mudar a parte marcada em vermelho, assim:













&lt;&nbsp;um&nbsp;class = '&nbsp;selecionados&nbsp;'expr:' data: blog.languageDirection 'dir = expr: href =' data: label.url '&gt; &lt;data:label.name/&gt; &lt;/&nbsp;uma&nbsp;&gt;

Nota:&nbsp;É aquele que vem logo após&nbsp;&lt;li&gt;&nbsp;.




&nbsp;Com o código acima, estamos virando o nome do link tag selecionados, além de você está adicionando uma&nbsp;&nbsp;classe&nbsp;, para dar estilos diferentes a serem saber que "estamos em que o rótulo."




&nbsp;Passo 3&nbsp;: Agora vamos declarar os estilos da "&nbsp;etiqueta selecionada&nbsp;"e adicionar em&nbsp;Adicionar CSS, &nbsp;&nbsp;que é&nbsp;, do nosso ambiente de trabalho, iremos projetar Designer template ► ► ► Adicione CSS Avançado colá-lo lá no campo:




















A. Etiqueta 1 #&nbsp;selecionados&nbsp;{
background-color: # f9a6f4 Cor de fundo / * do link * /&nbsp;
}
"Nota&nbsp;: ..." coloquei a mesma cor de fundo, o hover."




&nbsp;"Agora,&nbsp;quando você clica em um link no rótulo,&nbsp;sei que etiqueta é selecionado&nbsp;porque ele terá uma aparência diferente,&nbsp;mas com o preenchimento mesma (mesma distância) bloco"










e o que vai acontecer no caso de&nbsp;os botões nos links nos rótulos&nbsp;?

Se você quiser fazer o mesmo, que é converter o texto do link tag selecionada, e colocar um estilo diferente para o link selecionado, fará o mesmo , e também&nbsp;removido&nbsp;essa parte do CSS:

&nbsp;# Label1 span [dir = ltr] {&nbsp;display: none;&nbsp;}









E o DEMO?

"A demonstração dos botões que você pode ver aqui no meu blog, selecione uma tag e ver o que acontece no vínculo ou tag selecionada, e se a caixa ou bloquear os links que você pode ver o mesmo&nbsp;Blog teste&nbsp;.&nbsp;Ele funciona em todos os navegadores, incluindo o primeiro e único IE6 (Internet Explorer 6)&nbsp;"















fonte e créditos deste presente post: &nbsp; &nbsp; &nbsp; &nbsp;compartidisimo&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;



"Cambiando la etiqueta seleccionada del widget de las etiquetas, y darle un "estilo diferente", para que se "identifique como enlace seleccionado











Anteriormente les decía, como&nbsp;crear una caja o bloques en los enlaces del widget de las etiquetas.

Hay una&nbsp;limitación, que no tomé en cuenta, y que Blogger define en el HTML de ese widget, que es, convertir el enlace de la etiqueta seleccionada, en simple texto, es decir, ya no es un enlace, y al no ser enlace, no se aplican los estilos o CSS, que declaramos para cada enlace de la etiqueta:&nbsp;




Luego, cuando les mostraba&nbsp;Como crear botones en los enlaces de las etiquetas, decidí desaparecer el&nbsp;enlace seleccionado, al fin que cuando se estuviera en la página de ese enlace, no se&nbsp;querría&nbsp;volver a ingresar a la misma&nbsp;etiqueta, y de todos modos no sería posible, pues ya no es enlace, es texto, y además, se perdían los estilos declarados y no se&nbsp;veía&nbsp;el botón.

#Label1 span[dir=ltr]{
display: none;
}

Con el código anterior, evitamos cambiar el estilo o mejor dicho, no mostramos &nbsp;la etiqueta seleccionada,&nbsp;solamente&nbsp;cuando&nbsp;está seleccionada.

Pensando en esos casos, y en una&nbsp;solución&nbsp;más&nbsp;estética,&nbsp;podemos convertir la etiqueta seleccionada, en un enlace, y luego,&nbsp;crear una clase, para el enlace de la etiqueta seleccionada, y crear un estilo "diferente", para que nuestros usuarios sepan, que está seleccionada cierta etiqueta, como pasa con el enlace seleccionado, del widget de las páginas&nbsp;estáticas, en las plantillas de Blogger.

¿Suena mejor verdad?, es más sencillo de lo que parece, y habiendo usado los estilos o CSS de cada tutorial que les mencionaba, solo necesitaremos, cambiar un poco el HTML del widget de las etiquetas, y declarar algunos estilos (CSS) para el enlace seleccionado, y se pueda verdiferente.

Como hacerlo paso a paso

Paso 1. Vamos a&nbsp;Diseño ► Edición de HTML, expandimos plantilla de artilugios, y con la ayuda de "Ctrl F", buscamos estas lineas de código:


&nbsp; &nbsp; &nbsp; &lt;b:loop values='data:labels' var='label'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt; &nbsp; &nbsp; &nbsp; &nbsp;
&lt;b:if cond='data:blog.url == data:label.url'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;span expr:dir='data:blog.languageDirection'&gt;&lt;data:label.name/&gt;&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;b:else/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a expr:dir='data:blog.languageDirection' expr:href='data:label.url'&gt;&lt;data:label.name/&gt;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/b:if&gt;

Tip: Podemos buscar el "nombre que le pusimos a el Widget", y bajarnos un poco, hasta encontrar esa parte.

Paso 2: Luego, cambiamos la parte marcada de rojo, por esto:&nbsp;

&lt;a&nbsp;class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'&gt;&lt;data:label.name/&gt;&lt;/a&gt;

Nota:&nbsp;Es el que viene al principio&nbsp;después&nbsp;de&nbsp;&lt;li&gt;.

Con el código anterior, estamos convirtiendo el nombre de la etiqueta seleccionada en enlace, y además le estamos agregando una&nbsp;clase, con el fin de darle estilos diferentes, para que, se sepa que "estamos en esa etiqueta".

Paso 3: Ahora declaramos los estilos de la "etiqueta seleccionada", y los agregamos en&nbsp;Añadir&nbsp;CSS, &nbsp;es decir, &nbsp;desde nuestro escritorio, vamos a&nbsp;Diseño&nbsp;►&nbsp;Diseñador&nbsp;de plantilla► Avanzado►&nbsp;Añadir&nbsp;CSS y lo pegamos ahí en el campo:


#Label1 a.seleccionado{
background-color: #f9a6f4; /*Color del fondo del enlace*/
}
Nota: Puse el mismo color de fondo, del hover.

Ahora cuando se haga click en un enlace de la etiqueta, sabremos que está seleccionada esa etiqueta, &nbsp;ya que lucirá diferente, pero con el mismo padding (la misma separación) &nbsp;del bloque:




y ¿que pasará, en el caso de&nbsp;los botones en los enlaces de las etiquetas?

Si se quiere lograr lo mismo, que es: convertir el texto de la etiqueta seleccionada en enlace, y poner un estilo diferente al enlace seleccionado, haremos lo mismo, y&nbsp;también,&nbsp;eliminados&nbsp;esta parte del CSS:

#Label1 span[dir=ltr]{
display: none;
}

¿Y el DEMO?

El demo de los botones lo puedes ver aquí en mi blog, selecciona una etiqueta y observa lo que pasa, en el enlace o etiqueta seleccionada, y en el caso de la cajita o bloques en los enlaces puedes ver el mismo&nbsp;blog de prueba.

Funciona en todos los navegadores, incluyendo el único e inigualable IE6 (Internet explorer 6)