Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
En este tutorial veremos como agrégales CSS a nuestras Etiquetas para Blogger. Muchas veces nuestras etiquetas se ven demasiadas apagadas y no son llamativas. En este tutorial veremos como agregarles un aspecto mas profesional con CSS



La demostración se encuentra en nuestro Blogg

Comencemos:

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML 
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>  

  • Paso 3: Justo por encima de ]]></b:skin>   pegamos el código CSS 
/*-----Etiquetas Tutorialesblogger.blogspot.com*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}
  • Paso 4: Guardamos los cambios efectuados en nuestra plantilla
Agregaremos el Gadget Etiquetas  para ello seguimos los siguiente pasos 
  • Paso 5: Vamos a Blogger>>Diseño>>Añadir nuevo Gadget>>Etiquetas
Ver imagen 
  • Paso 6: Guardamos el Gadget y listo ya tendremos nuestras etiquetas con CSS 



- - 5 Comentarios
Tag

Comentarios (5)

  1. Hola...
    Solo quería felicitarlos por el gran trabajo que han hecho en esta página, en realidad es muy valioso todo el contenido que en ella han puesto. Espero que sigan haciendo más tutorías y por supuesto les deseo muchos éxitos.

    ResponderEliminar
  2. @Jorge luis Te agradezco por tu comentario. Esperemos continuar aportando un poco de nuestro conocimiento. Nuevamente gracias a ti por este comentario

    ResponderEliminar
  3. Mira y los que no tengan el codigo porque cambiaron la plantilla del blog,donde se puede poner ese codigo para la que la etiquetas se vean asi como tu post

    ResponderEliminar
  4. @Abel Martinez Te comento que este post lo creamos cuando teníamos una vieja plantilla, si quieres podemos crear un tutorial con las etiquetas que posee esta plantilla. Gracias por tu comentario

    ResponderEliminar
  5. Te consulto ya que mi plantilla no tiene el codigo ]]> entonces?

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar