add

Como personalizar la nube de etiquetas de blogger


Es tan interesante jugar con el código HTML de nuestro blog de blogger, para darle nuevas perspectivas a nuestro blog. Hoy voy a compartir un widget tan novedoso e interesante, lo que vamos hacer es cambiar la caja de nuestra etiqueta y convertirla en un widget agradable para todos nuestros lectores. Tener una buena apariencia en nuestro blog hace que sus lectores se interesen más en sus publicaciones. A continuación les voy a explicar paso a paso a como tener un lindo y maravilloso widget de etiquetas totalmente modificado.

Como personalizar la nube de etiquetas de blogger

Pueden ver su demostración en la siguiente página de demos, el widget de etiquetas esta ubicado al final del sidebar.


1 Diríjase a "Diseño" 

2 Abrir un gadget 

3 Buscar “Etiquetas” tal como se muestra en la imagen
 
Como personalizar la nube de etiquetas de blogger

4 Configure su etiqueta tal como se muestra en la imagen a continuación 

Como personalizar la nube de etiquetas de blogger


5 Dele un clic en “Guardar” y luego realice lo siguiente

6 Un clic en “Plantilla

Blogger

Un clic en “Editar HTML

Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

 Blogger

7 Busque este código ]]></b:skin>  y encima de él, inserte el siguiente código.

/*-----Nuevo estilo de etiquetas widget by www.ayudadeblogger.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #0000FF;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #0000FF;
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;
}

8 Luego de haber insertado el código, dele un clic en “Guardar plantila” y listo ya tiene su nuevo estilo de etiquetas completamente renovado para su blog de blogger.

9 Diríjase a su blog y mire sus cambios

¿Necesitas ayuda?

Cualquier pregunta no dude en hacérmelo saber, paz y bendiciones para todos.

Saludos.
emailEnviar por correo

11 comentarios:

  1. Qué fácil lo explicas!! Gracias!! Me quedó genial!!
    Estoy encantada. Hacía tiempo que quería cambiar el aspecto de la nube :))) Cuánto se aprende contigo!!
    (Te he conocido a través de Olobloguer, que siempre te menciona en su Facebook)
    Soy Sara del blog:
    http://decosturasyotrascosas.blogspot.com.es/

    Un saludo muy cordial

    ResponderEliminar
    Respuestas
    1. Hola Luis, otra pregunta: Dentro de cada etiqueta me quedaron las letras en azul y los números en gris. ¿Se podrían poner las letras también en gris igual que los números?
      Gracias de nuevo.

      Eliminar
    2. Hola, en este punto todo depende de que color tenga en la configuracion de su plantilla, por ejemplo en mi configuracion yo lo tengo activado en azul, y tu plantilla puede tener otra, el codigo que implementastes no sirve para hacer eso, si quieres que apresca de otro color tendras que entrar en tu codigo HTML y buscar los codigos de colores del sidebar, con eso cambiara pero tambian cambiara los colores de todos tus widgets.
      Saludos.

      Eliminar
  2. Hola,

    es muy interesante tu Blog. Me puedes ayudar? Trato de insertar el código pero no se exactamente donde. Que quiere decir "encima de b:skin" justo antes?

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a tu pregunta, cuando yo digo busca este codigo ]]> lo debes poner en el buscador integrado del editor HTML de tu plantilla y luego le das un enter en el buscador, una vez que se encuentre el codigo osea este ]]> va aparecer marcado de color amarillo, y cuando digo inserta el siguiente codigo enzima de o arriba de, es que tu tienes que copiar todo mi codigo y pegarlo arriba del codigo que encontrastes osea de este ]]>, como ejemplo te lo pongo aqui:

      AQUI DEBE IR EL CODIGO QUE COPIASTES DE MI POST "Enzima"
      ]]>

      Y asi sucesibamente.
      Espero haberte ayudado, enviame un mensaje si pudiste hacerlo
      Saludos.

      Eliminar
  3. Hola, Gracias por tus aportes.
    tengo una pregunta, que hacer cuando uno pisa las teclas control f escribe el código y no lo muestra la palabra, no he podido pegar los códigos en edición html por eso, no se donde hacerlo

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola, realiza con tranquilidad el tutorial, presiona la tecla Control seguido de la tecla F, con eso se habilitara el buscador del Editor HTML, y copia el codigo que esta marcado de color amarillo y veras que lo encuentras..
      Saludos.

      Eliminar
  4. Luis, muy buena información en tu blog. Tengo una consulta, sabes si se pueden colocar las etiquetas en una pagina estática, no me refiero a crear un indice, sino en colocar el gadget de etiquetas???

    Saludos.

    ResponderEliminar
  5. HOla muchas gracias ya las coloque.
    www.marketingmediablog.com

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios