Cambiar los iconos de los gadgets en las Vistas Dinámicas

16 de septiembre de 2014 21 comentarios ,
Pese a que las plantillas de Vistas Dinámicas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que sí podemos modificar, en este caso veremos cómo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quizá muchos quieran añadir unos iconos mas acorde a la temática del blog, o al gusto del autor. Así que vamos a ver cómo cambiarlos.


¿Recuerdas la entrada para poner iconos en el gadget de Páginas? Pues el método es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo único que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | Añadir CSS, ahí agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya sólo deberás poner la URL de las imágenes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y así sucesivamente.

El código está preparado para los cuatro primero gadgets de tu sidebar, si tuvieras más sólo añade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese será para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.


TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este código:
#gadget-dock {
right: 0!important;
}


Como puedes ver no es nada difícil cambiar los iconos de las Vistas Dinámicas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo únicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog más personalizado y único, ¿no crees?


21 comentarios en:

" Cambiar los iconos de los gadgets en las Vistas Dinámicas "

  1. Al fin mas trucos para las vistas dinamicas!!!!

    ResponderEliminar
  2. Una consulta, donde puedo encontrar las mismas iconos que has utilizado en tu ejemplo, gracias

    ResponderEliminar
    Respuestas
    1. En Iconfinder, es una colección de Liam McKay:
      https://www.iconfinder.com/iconsets/woothemesiconset

      Eliminar
  3. Potro, ¿cómo podría cambiar las imágenes de fondo de los botones de red social de www.sharethis.com?

    En el sitio web se dan algunas especificaciones (http://support.sharethis.com/customer/portal/articles/464527-customize-appearance#sthash.men9cEkc.w7DbYXB4.dpbs), pero no me queda muy claro.

    Disculpa que haga esta pregunta en un post que no habla específicamente de sharethis.

    ResponderEliminar
    Respuestas
    1. Hola Rodrigo, nunca lo he intentado, pero aquí mismo puedes ver cómo debe ser el código de tus botones:
      http://support.sharethis.com/customer/portal/articles/446596-chicklets

      Mira donde dice "Custom Chicklet Images". Ahí verás dónde poner las URLs de tus imágenes de tus propios botones.

      Eliminar
  4. Hola Potro: Hace tiempo que sigo tus estupendos consejos, pero no encuentro como puedo poner la numeración de los comentarios anidados como tú los tienes. Muchísimas gracias

    ResponderEliminar
    Respuestas
    1. Hola ANGELO ST, busca en Oloblogger, ahí hay una entrada sobre ese tema. Saludos.

      Eliminar
    2. Muchísimas gracias. Lo he conseguido.

      Eliminar
  5. Hola esto no tiene nada que ver con la información de la entrada, pero igual creo que es algo muy importante, y de lo cual si pudieran el administrador o administradores de este blog hacer una entrada seria de mucha utilidad, vengo aquí porque solo en este blog he visto eso.

    ¿COMO HICIERON, PARA QUE SU PAGINA DE DONACIONES USARA TODO EL ANCHO DEL BLOG SIN QUE APARECIERAN LOS GADGEDTS?

    Yo en mis paginas de mi blog oculte los gadgets, pero eso no ayudo a que el contenido de esas paginas usara el espacio en el que sitúan los gadgets, sino que solo en donde están los gadgets, en esas paginas aparece en blanco, en verdad si me pudieran ayudar con esto estaría inmensamente agradecido de verdad.

    ResponderEliminar
    Respuestas
    1. Hola, sólo es cuestión de ocultar la sidebar en las páginas estáticas. No sé qué plantilla uses, aquí se ha publicado tanto para las plantillas antiguas de Blogger:
      http://ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

      Como para las más "nuevecitas":
      http://ciudadblogger.com/2010/10/ocultar-sidebar-en-las-paginas.html

      Aclaro, que cualquiera de esos dos métodos son exclusivamente para plantillas originales de Blogger.

      Eliminar
  6. Que tal potro me podrias dar el nombre de la plantilla que usas o mela podrias en viar por correo esta super guay te lo agradeseria mucho porfavor. mi correo es (eduardord21@hotmail.com)

    ResponderEliminar
    Respuestas
    1. Gracias Eduardo, aunque no es descargada de ningún sitio, la he hecho yo mismo.

      Eliminar
  7. ¡Hola, Potro! Muchísimas gracias por esta entrada, en cuanto encuentre iconos que me gusten cambiaré los que vienen predeterminados (que son muy sosos, para que lo vamos a negar...). Solo un detalle. El truco extra a mí no me ha funcionado tal cual aparece escrito en el post, y al mirarlo me he dado cuenta de que probablemente sea correcto así:

    #gadget-dock {
    right: 0! important;
    }

    Es decir, con un espacio entre el 0 y el ! para que funcione. Lo aviso por si alguien más se encuentra con el problema o por si resulta ser un verdadero error a la hora de escribirlo. ¡Un saludo y gracias de nuevo!

    ResponderEliminar
    Respuestas
    1. Hola Miriam, a mí me ha funcionado tal como lo puse. Me extraña que de la otra forma te haya funcionado ya que es necesario que el signo de admiración ! esté junto con la palabra important, sin separación. Aunque lo importante es que te haya funcionado :)

      Eliminar
  8. Hola, tengo una plantilla dinámica y he probado esto, me salen los nuevos pero los antiguos se sobreponen...
    que puedo hacer??
    gracias
    Marga
    miversiondelamoda.blogspot

    ResponderEliminar
    Respuestas
    1. Hola, he entrado a esa dirección pero al parecer ya has cambiado de plantilla.

      Eliminar
  9. Potro querido:

    ¡Gracias por esta entrada!, me gusta mucho. Sabes te quiero hacer una sugerencia; ya que las plantillas de vista dinámicas no son 100% modificables, sería bueno para quienes las usamos que en tu gadgets de "Categorías", añadas una solo de vistas dinámicas, así cuando alguien de "clic" irá al contenido preciso de las vistas dinámicas; porque siempre que veo una entrada nueva en tu blog, me pregunto ¿Me servirá para con mi plantilla de vistas dinámicas?

    Si lo llegas hacer me avisas para checar todo el contenido porfis.

    Saludos Cordiales y ¡Feliz Año Nuevo!

    ResponderEliminar
    Respuestas
    1. Gracias por la sugerencia Se Fam, de momento como son pocas entradas que hay sobre las Vistas Dinámicas, y como no hay muchas cosas que se le puedan modificar no creo que sea necesario añadir una etiqueta de ese tema, pero si encontrara más trucos para estas plantillas ten por seguro que tomaré tu recomendación ;)

      ¡Feliz año!

      Eliminar
  10. El Potro siempre miro tu blog para ver algún truco para blogger y hace un tiempo me hice un blog con vistas dinámicas y le modifique los iconos de los gadgets todo bien hace una semana pues estos siguen modificados pero el icono original siguen estando en su lugar cosa que antes no pasaba me puedes ayudar otra cosa gran sitio para ayudar a los que tenemos blogs de blogger . Mi blog botsbp64.blogspot.com Gracias :D

    ResponderEliminar
    Respuestas
    1. Hola, veo que tienes los estilos pero no has añadido ninguna imagen en ellos:

      #gadget-dock > div:nth-of-type(3) .gadget-selected .gadget-icons {
      background: url() no-repeat center !important;
      }
      #gadget-dock > div:nth-of-type(4) .gadget-icons {
      background: url(URL de la imagen) no-repeat center !important;
      }

      Veo otros dos con imágenes en base64, no sé si ahí esté el problema, prueba poner una URL normal.

      Eliminar
  11. Una consulta como puedo hacer para mover al otro lado la barra, xfa ayuda

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger