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.
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:
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:
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.
Si quieres mantener siempre visible la sidebar agrega este código:
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?
TRUCO EXTRA
#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?
Al fin mas trucos para las vistas dinamicas!!!!
ResponderEliminarUna consulta, donde puedo encontrar las mismas iconos que has utilizado en tu ejemplo, gracias
ResponderEliminarEn Iconfinder, es una colección de Liam McKay:
Eliminarhttps://www.iconfinder.com/iconsets/woothemesiconset
Potro, ¿cómo podría cambiar las imágenes de fondo de los botones de red social de www.sharethis.com?
ResponderEliminarEn 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.
Hola Rodrigo, nunca lo he intentado, pero aquí mismo puedes ver cómo debe ser el código de tus botones:
Eliminarhttp://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.
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
ResponderEliminarHola ANGELO ST, busca en Oloblogger, ahí hay una entrada sobre ese tema. Saludos.
EliminarMuchísimas gracias. Lo he conseguido.
EliminarHola 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.
ResponderEliminar¿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.
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:
Eliminarhttp://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.
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)
ResponderEliminarGracias Eduardo, aunque no es descargada de ningún sitio, la he hecho yo mismo.
EliminarHola 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 :)
ResponderEliminarHola, tengo una plantilla dinámica y he probado esto, me salen los nuevos pero los antiguos se sobreponen...
ResponderEliminarque puedo hacer??
gracias
Marga
miversiondelamoda.blogspot
Hola, he entrado a esa dirección pero al parecer ya has cambiado de plantilla.
EliminarPotro querido:
ResponderEliminar¡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!
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 ;)
Eliminar¡Feliz año!
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
ResponderEliminarHola, veo que tienes los estilos pero no has añadido ninguna imagen en ellos:
Eliminar#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.
Una consulta como puedo hacer para mover al otro lado la barra, xfa ayuda
ResponderEliminar