Mostrando las entradas con la etiqueta etiquetas de diseno. Mostrar todas las entradas
Mostrando las entradas con la etiqueta etiquetas de diseno. Mostrar todas las entradas

jueves, 18 de abril de 2013

Super Truco De Diseno De Etiquetas En Tu Blog

Leave a Comment
Tal vez hayas pensado muchas veces como cambiar el simple texto de las etiquetas , y anadir un toque unico y profesional para el disfrute de tus lectores o visitantes de tu blog , es una forma de mostrar las etiquetascon un diseño mas perfecto y detallado.

Te mostrare una manera sencilla o super truco de cambiar el diseno de estas y hacerlas llamativas a los lectores.
etiquetas con diseno
Dentro de tu plantilla en Editor de Html el codigo de las etiquetas es el siguiente:buca este codigo en tu plantilla :
<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if>
</span>

Luego eliminaremos esta linea en este código:
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>


Luego buscamos el siguiente codigo en tu html </b:skin>

Colocamos el siguiente codigo de abajo antes de </b:skin>

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9M-dKIkw2BvSBWDIaetcUtPKEJA6uFYNoD_kPzPF4xDvEIkns1pA0J__yKlkQMkY7ihbs1-fN9vFOKER4f-dzvQiVNRP5CYl3PMXflFRk9HDNPmjhacrdP7QE5V7tCE4bEZPSormZvH4/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9M-dKIkw2BvSBWDIaetcUtPKEJA6uFYNoD_kPzPF4xDvEIkns1pA0J__yKlkQMkY7ihbs1-fN9vFOKER4f-dzvQiVNRP5CYl3PMXflFRk9HDNPmjhacrdP7QE5V7tCE4bEZPSormZvH4/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Damos guardar y ya se implementara los cambios al estilo de tus etiquetas.
Read More