jueves, 18 de abril de 2013

Super Truco De Diseno De Etiquetas En Tu Blog

By andante77 8:50 a.m. , , , , , , , 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.
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario