Cómo poner iconos en las pestañas del menú de Páginas

19 de mayo de 2014 106 comentarios ,
Muchas veces sentimos la necesidad de añadir iconos a los enlaces para identificar de una mejor manera el tipo de contenido al que dirige dicho enlace. En la mayoría de los menús esto no es problema pues basta con añadir el código de la imagen antes del nombre de la pestaña, pero con el gadget de Páginas se dificulta un poco ya que el código del gadget no es el tradicional de un menú HTML sino que contiene una serie de códigos propios de Blogger, así que añadir imágenes -diferentes- directamente en el HTML es imposible.
Pero eso no significa que no podamos buscar formas alternas de hacerlo, y es justo lo que haremos en esta entrada, vamos a ver cómo poner un ícono diferente en cada pestaña del menú de Páginas, y para ello usaremos CSS, específicamente los selectores :nth-child() y ::before
De esta manera conseguiremos que cada una de las pestañas de nuestro gadget de Páginas tenga un ícono diferente antes del nombre de la pestaña.


Conseguir lo anterior es mucho más fácil de lo que se piensa. Sólo tienes que entrar a Plantilla | Edición de HTML y añadir antes de ]]></b:skin> lo siguiente:
#PageList1 li:nth-child(1):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(2):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(3):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(4):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
En estos estilos CSS verás unos números, cada número representa cada pestaña de tu menú, siendo que el 1 es la primera pestaña, el 2 la segunda, etc. Toma en cuenta que la primera pestaña habitualmente es la Página Principal, así que la segunda pestaña pertenece a la primera página de tu menú.

En el código deberás cambiar la URL de la imagen donde se indica en color rojo.
La distancia entre el ícono y el texto se modifica en padding-right.
Con top podrás controlar la distancia desde arriba, esto es para que puedas alinear la imagen verticalmente. Yo he puesto que el ícono se desplace 3px desde arriba, pero puede variar según el tamaño del ícono que pongas, ahí deberás jugar con el valor de top incluso pudiendo usar un valor negativo para subir la imagen, por ejemplo -3px

El código es para las primeras cuatro pestañas de tu menú, si tuvieras más pestañas entonces sólo añade un trozo de código como este por cada pestaña a la que le quieras agregar un icono.

#PageList1 li:nth-child(5):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
Por cada código que agregues deberás cambiar el número 5 por el correspondiente: 6, 7, 8, etc.

Así de fácil y sencillo podrás personalizar más el gadget de Páginas usando iconos que ayuden al reconocimiento visual de las pestañas.


106 comentarios en:

" Cómo poner iconos en las pestañas del menú de Páginas "

  1. ¡Gracias Potro!

    Si algún día tienes tiempo.. Ojalá me puedas decir como aplicar el truco en este blog: http://zacatlan.wevoluciona.com/. Para mi menú principal (Donde están las secciones de Directorio local, Turismo, Noticias, Eventos, Bolsa de Trabajo y Tips).

    Saludos :)
    Valentin Becerra

    ResponderEliminar
    Respuestas
    1. Hola Valentín. Con los menús de subpestañas se complica este método, en esos casos conviene mejor poner el código de la imagen directo en el menú, antes del texto de la pestaña.
      ¡Saludos!

      Eliminar
  2. Simplemente espectacular idea! gracias como siempre Potro, la pondré en practica ya mismo!

    ResponderEliminar
    Respuestas
    1. Gracias Joan, que todo salga de maravilla.

      Eliminar
  3. Gracias Potro por haber respondido a mi publicación en tu facebook! Ahora me queda aplicarlo. Muchisimas gracias

    ResponderEliminar
    Respuestas
    1. De nada Naric, espero no haber tardado mucho en publicarlo :3

      Eliminar
    2. Para nada y encima lo hiciste sencillisimo de realizar!
      La duda es, hay forma de que estas imágenes pasen a formar parte del link de las pestañas?
      Aun así ha quedado genial! Muchisimas gracias de nuevo!

      Eliminar
    3. Nop, con CSS sólo controlamos el diseño y los estilos, no el comportamiento del contenido.

      Eliminar
  4. jeje... impresionante lo tuyo ;)
    Supongo que si pongo la imagen sin cambiar el tamaño de letra, las páginas (que ocupan ya todo el ancho) se verán desplazadas a una segunda línea, cosa que no me gustaría... entonces la pregunta es la siguiente: ¿se podría modificar el texto para poder poner una imagen al lado del texto y que ocupen el mismo sitio?.
    Gracias Potro, me gusta mucho lo que nos propones... y bonito cambio de loock ;)

    ResponderEliminar
    Respuestas
    1. Gracias Tapestry Workerman. Puedes reducir el tamaño de la fuente si a eso te refieres. Reduciendo el tamaño tendrías más espacio a lo ancho del gadget, eso te permitiría agregar los iconos sin que se bajen las pestañas:

      #PageList1 {
      font-size: 13px;
      }

      Eliminar
    2. Ok. Gracias ;)
      A ver si encuentro un hueco grande para las probatinas, jeje...
      Un saludo.

      Eliminar
  5. Hey Potro amigo te sigo desde el 2009 con este blog inicie mi carrera con el desarrollo web, Ciudad Blogger ya sido como una universidad para mi, tengo que agradecer por que aquí aprendí y aún aprendo mucho, ahora estoy un poco alejado de Blogger ya que me te dedicado a otras cosas, estoy tramando algo grande y pronto lo compartire, ahora solo les digo a los que les apasiona esto del internet y del diseño, si quieren lograr algo grande, empiezen por Ciudad Blogger, Saludos desde Colombia Hermano Mexicano!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Mauricio. Te aseguro que yo aprendo más de ustedes que ustedes de mí.
      Un fuerte abrazo, y mucha suerte con ese nuevo proyecto.

      Eliminar
  6. no me aparece nada, no se si funcione en el menú que trae por defecto blogger.
    mis iconos son de 20X20 e hice todo el procedimiento.
    esta aqui: http://mi-personal-branding.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. De hecho es precisamente para el menú de Blogger. En tu caso como el ID del gadget de Páginas es distinto, cambia todos los #PageList1 por #PageList2

      Eliminar
  7. Gracias potro esto le va venir bien a mi blog...

    ResponderEliminar
  8. Hola Potro, gracias por todos los tutoriales que publicas, nos ayudaste mucho a mi hermano y a mi que tenemos un sitio de noticias. Debido a este post sobre páginas estáticas quería consultarte sobre un problemita.
    Nosotros ponemos en paginas estáticas noticias diferentes. Por ejemplo en miblog.blogspot.com/p/pagina-1.hml ponemos noticias internacionales, y queremos saber si podemos crear un RSS feed de cada pagina estática y poder reproducir ese feed en un modulo html definiendo cantidad de caracteres a aparecer y foto con dimensión especifica. Así para que cada vez que se publique una noticia en la pagina estática especifica (EJ: .com/pagina-1.html) se muestre en la página principal un modulo con un resumen de la pagina estática especifica (vía rss). Obviamente cada tanto se cambia el contenido de la pagina estática, pero no se borra la pagina estática (mantiene la misma url) por eso lo del rss para que muestre automáticamente el resumen nuevo. No se si me explique bien, vi en los gadget de Blogger que hay una especie de resúmenes de paginas estáticas, eso no seria lo que estoy buscando debido a que es muy pequeño y agrupa todas las paginas estáticas en un solo modulo. Perdón por el mensaje largo, no se si pude explicarme. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Listen, te has explicado muy bien, pero hay dos problemas con lo que deseas. Uno es que las páginas no entran en el feed del blog, si tú publicas una nueva página esta no aparecerá en las actualizaciones de tu feed, así que no hay manera de leer con un feed el contenido que hay en ellas.
      El otro problema es que -hasta donde sé- en Blogger no se puede obtener el feed de una entrada en específico, únicamente el feed de todas las entradas, o el feed de una etiqueta en particular. Quizá te convenga más publicar entradas, etiquetarlas y obtener el feed de esa etiqueta en particular, eso sí se puede hacer:
      http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

      Saludos.

      Eliminar
  9. Muchas gracias Potro, puede quedar muy bonito pero tengo un pequeño problemilla no se donde se abra metido esta parte del codigo ]]> he encontrado uno de parecido pero si pongo el condigo que me das me sale directamente en la plantilla.

    Gracias de nuevo saludos.

    ResponderEliminar
    Respuestas
    1. Hola Josep, da click en la flechita ► que está junto a <b:skin>...</b:skin>
      Una vez que se expanda presiona las teclas CTRL + F y localiza la etiqueta que buscas.
      Saludos.

      Eliminar
  10. Saludos Potro, tengo problemas para compartir las entradas de mi blog en Facebook. Pues al hacerlo no me aparece ninguna imagen asociada al post en cuestión, siempre me sale una imagen que tengo ubicada en la sidebar, tampoco me aparece la descripción de los posts. No sé por qué sucede, hace tiempo funcionaba perfectamente. Ojalá me puedas ayudar. Mi blog es: sociedadhogwarts.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Víctor, justamente en Oloblogger han publicado algo al respecto:
      http://www.oloblogger.com/2014/05/problema-imagen-compartir-enlace-facebook.html

      Eliminar
    2. Saludos Potro, hice lo que explica Oloblogger pero no funciona, mis entradas a la hora de compartirlas en Facebook son un desastre. Ayuda por favor.

      Eliminar
    3. No sé qué más pueda hacerse Víctor, lo que Oloman explica en su entrada es lo que siempre sugiero a quien tiene el mismo problema, no sé si haya algo más que pueda servirte.

      Eliminar
    4. Saludos de nuevo Potro, ya pude solucionar lo de las imágenes a la hora de compartir las entradas en Facebook. Ahora lo que sucede es que no logro que aparezca el resumen de la entrada. Qué puedo hacer?

      Eliminar
    5. Con los microdatos Schema también debe resolverse, sólo no olvides habilitar la descripción personalizada en la configuración de tu blog, y que agregues a cada entrada una descripción en las opciones avanzadas de la entrada.

      Eliminar
  11. Hola amigo tengo un problema como puedo hacer para traducir algunas partes de una plantilla por ejemplo la paginacion aparece pag 1 of 3 busco en el codigo y no la encuentro pero si le doy inspeccionar elemento ahi si aparece

    ResponderEliminar
    Respuestas
    1. Hola Adrian, busca este código en tu plantilla:

      <script type='text/javascript'>
      var home_page="/";
      var urlactivepage=location.href;
      var postperpage=4;
      var numshowpage=3;
      var upPageWord ='Previous';
      var downPageWord ='Next';
      </script>

      Ahí puedes cambiar las palabras "Previous" y "Next".
      Justo debajo de ese código verás otro script, al final de ese script encuentra esta parte:

      hild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))

      Con mucho cuidado cambia ese Page que está en negrita por el texto que quieras, por ejemplo Página y en seguida dice of ese cámbialo por de

      Eliminar
  12. Por el momento no funciona. Debe de haber algo interfiriendo por ahí. Intuyo que poner imágenes .png no tiene ninguna diferencia respecto a las .jpg ¿no?

    ResponderEliminar
    Respuestas
    1. Hola Rusty, al parecer es por un comentario mal cerrado en tus estilos.
      Busca esta parte que está un poco más arriba:

      #galeria a:hover span{left:0;bottom:0; opacity:.8;filter:alpha(opacity=80)}
      #galeria a span:hover{color:#5658BB} /*color fuente al poner el puntero encima*
      .zoom{

      A este comentario le falta una diagonal de cierre:
      /*color fuente al poner el puntero encima*

      Ya sea que quites ese comentario, o lo corrijas:
      /*color fuente al poner el puntero encima*/

      Mira si eso resuelve el problema.
      Saludos

      Eliminar
  13. Muchísimas gracias Potro ya pude resolver mediante tu ayuda, ya estaba pensando en cambiar la plantilla porque se veía poco profesional que en algunas partes sea en ingles busque mucho la palabra page ya que no estaba no negrita en esta plantilla pero es justo como dijiste la cambie y funciono de maravillas.

    ResponderEliminar
    Respuestas
    1. Me alegro que hayas podido resolverlo fácilmente, ¡saludos!

      Eliminar
  14. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Ve Dvdcba.
      Vamos a probar con esto, busca este script de tu plantilla:

      (function($) { $(document).ready(function(){
      $("#carousel .container").jCarouselLite({
      auto:0,
      scroll: 1,
      speed: 400,
      visible: 5,
      start: 0,
      circular: false,
      btnPrev: "#previous_button",
      btnNext: "#next_button"
      });
      })})(jQuery)


      Y cámbialo por esto:

      (function($) { $(document).ready(function(){
      $("#carousel .container").jCarouselLite({
      auto:4000,
      scroll: 1,
      speed: 800,
      visible: 4,
      start: 0,
      circular: true,
      btnPrev: "#previous_button",
      btnNext: "#next_button"
      });
      })})(jQuery)

      Esperemos que con eso se haga automático el scroll.
      Saludos.

      Pd. He tenido que eliminar el comentario por el aviso que está arriba de este formulario.

      Eliminar
  15. Hola amigo. Quiero hacerte una consulta si no es mucha molestia:

    Tenemos esta página: www.kaikiatdigital.com
    Quiero reducir el espacio que existe en la parte de abajo que a nuestro juicio se ve antiestético: justo entre el menú de fondo gris y un banner que dice "Por qué elegir Kaikiatdigital.com?" Podrías guiarnos sobre cómo se puede reducir ese espacio?

    Mcuhas gracias de antemano El Potro

    ResponderEliminar
    Respuestas
    1. No es ninguna molestia ;)
      En los estilos de tu plantilla agrega lo siguiente:

      .main .widget {
      margin:0!important;
      padding:0!important;
      }
      #footer-wrapper {
      margin-top:-40px;
      }

      Y luego elimina el padding-top que está dentro de #footer
      Saludos.

      Eliminar
  16. Hola, mi consulta no tiene nada que ver con esta entrada, el hecho es que mi blog carga rapido, pero en una de las pestañas del menu si se tarda, (que es la que aloja las entradas) solo alli. Me gustaria saber y si me puedes ayudar como hago para que cargue igual que las demas pestañas incluyendo el home. :/

    te dejo el link de la pestaña en cuestion, para que veas a que me refiero: 'http://teamhvenezuela.blogspot.com/search/label/Team%20H'

    ResponderEliminar
    Respuestas
    1. Hola NANA Sukkie, las entradas suelen tardar en cargar cuando: son muchas entradas las que se cargan, y cuando las entradas son extensas o contienen muchos elementos como imágenes y videos.
      Una opción sería que en lugar de que uses ese tipo de sumarios automatizados, uses el "leer más" nativo de Blogger, con él la entrada se "corta" donde pongas el marcador y el resto de la entrada no se carga, por lo que la velocidad de carga de la página se ve mejorada.
      Con el tipo de sumarios que tienes la entrada se carga completa, aunque solo se muestre una parte.

      Saludos.

      Eliminar
    2. Muchas gracias por tu respuesta^^ hice eso, deje las entradas enteras, pero esteticamente no me agrada xD asi que volvi a colocarlas como estaban y ps debi siento que ya no se carga tan lento como antes, (aunque talvez trate de creer eso jeje, como sea, lo dejare asi por un tiempo mas ^^ ) de nuevo muchas gracias!!!!

      Tu blog me ha servido mucho!

      Eliminar
  17. Pero que alegria Potro, regresaste!!!!! te envio un abrazo muy grande, me tendras por aqui seguido leyendo tus excelentes consejos.
    Saludos .

    ResponderEliminar
    Respuestas
    1. Muchas gracias Elizabeth, eso espero, que te quedes por aquí mucho tiempo :)

      Eliminar
  18. Hola Potro soy yo de nuevo quisiera saber saber como puedo quitar de ls paginas estaticas el gadget o script que esta en el lado derecho d mi blog si puedes mirarlo http://minijuegosenlinea.blogspot.com/ es ese donde dice videos y archivos y tambien compartir muchas gracias de antemano

    ResponderEliminar
  19. Siiiii !!!!! Muchísimas gracias Potro ! Me sirvio y ahora se mueve, solo que en vez de ponerle Visible: 4 le puse 5 así queda mejor. Gracias gracias gracias y mas gracias ! Espero que sigas con este proyecto muchos años mas.

    Te sigo leyendo y muy pronto estaremos en contacto nuevamente, un abrazo gigante. Ezequiel

    ResponderEliminar
  20. Gracias Potro espero que no te aburras de mi porque estaré pidiéndote ayuda muy seguido jejeje xD

    ResponderEliminar
  21. Hola potro!
    Necesito ayuda, no hay otra entrada para lo que te preguntaré por eso, lo escribo aquí.
    Lo que pasa es que tengo algo parecido a lo que tu tienes (gadget tabs de seguidores) y me funciona bien, pero lo agregue a la versión móvil y ahí solo se ven las tabs, pero no las cajas de Seguidores, Círculos y Facebook, ya busque todo lo que pude pero no encontré nada, por eso vine, aquí te dejo dos capturas:

    En computadora http://www.filz.us/files/a447e672/c1d/Captura.png

    En celular http://www.filz.us/files/4ff9e9d7/c93/Screenshot_2014-05-22-21-28-32.png
    .
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Camilo, quizá debas usar la declaración mobile='yes' en los gadgets que tienes en tus pestañas para que éstos también sean visibles en móviles:
      http://ciudadblogger.com/2011/11/habilitar-las-plantillas-personalizadas.html

      Eliminar
  22. ¡Hola!

    Acabo de descubrir tu blog de Respondones, está muy interesante (ya decía yo que esa xcelente ortografía tuya provenía de algún lugar =D). Ya leí casi todas las entradas. Y la verdad es que no tenía planeado poner íconos, pero ahora que pones este tutorial, creo que sí lo haré.

    Una pregunta, espero no te moleste, parece algo muy simple, pero no lo encuentro en ninguna parte... ¿Cómo puedo quitarle los dos puntos a "no hay comentarios:" o " x comentarios:"? Veo que tú no tienes los dos puntos... No sé, no me gusta cómo se ven, pero no logro quitarlos.

    Un saludo y gracias.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Karina. Hace muchísimo tiempo que no publico en Respondones pero no es por falta de ganas si no de tiempo. Me da gusto que te haya parecido interesante :)
      No sé cuál plantilla uses, pero si usas una original de Blogger entonces busca esta línea:
      <data:post.commentLabelFull/>:

      Ahí al final verás los dos puntos, quítaselos y asunto arreglado. Es posible que esa línea la tengas 3 veces, la que nos interesa es la primera.

      Saludos.

      Eliminar
    2. Ojalá algún día tengas un poco de tiempo para publicar más cosas interesantes en Respondones. En cuanto a la plantilla, muchas gracias, problema solucionado con los dos puntos. :)

      Saludos.

      Eliminar
  23. hola si uso el ID analytics en mi blog para adultos correria el risgo que lo cierren?

    ResponderEliminar
    Respuestas
    1. Hola, Analytics lo puedes usar sin problema en cualquier blog, AdSense no.

      Eliminar
  24. Hola, tengo un problema con las páginas de mi blog, no se que les puede pasar, he intentado ponerme en contacto con el diseñador de la plantilla pero no doy con él.

    En esta página (http://braxproba.blogspot.com.es/p/lorem.html) el texto "se come" la sección de comentarios.

    Y en esta (http://braxproba.blogspot.com.es/p/labuat_23.html) me sale la barra lateral, pero no los widgets.

    ¿Dónde puede estar el problema?

    ResponderEliminar
    Respuestas
    1. Hola Virginia. Lo primero es porque a las entradas le añadiste una altura máxima para los contenedores:

      .post{
      float: left;
      width: 100%;
      position: relative;
      margin: 0 0 40px;
      padding: 0 0 25px;
      min-height: 530px;

      }

      Si eliminas lo que está en negrita deberá resolverse.
      Lo segundo, si quieres que salga la sidebar también en las páginas, busca y elimina este estilo:
      .sidebar-wrapper{display:none}

      Saludos.

      Eliminar
    2. Muchas gracias por responder tan pronto, problemas solucionado.
      Mil gracias!

      Eliminar
    3. Ahora que veo olvidé poner la parte en negrita :P

      Eliminar
  25. Hola amigo, este vez te pido sinceramente ayuda, pero no es nada de Blogger sino mas bien de Adsense. Hoy me llego una notificacion a mi cuenta de Adsense diciendome que los anuncios en mi Blog se desactivaron por Derechos de Autor (http://goo.gl/a4QQwb) y quisiera decirte a ver si me puedes ayudar a solucionarlo para volver a activarlo. Y que me ayudes en una duda:
    1-) mi blog no aloja ningun video, todos los tomo de otras paginas que los publican y yo copio el FRAME del video y lo pego en una entrada mia, sera que haciendo eso mi blog infringe los derechos de autor.

    Yo pensaba que mientras que los videos no estuvieran en si alojados en los servidores de Blogger no iva a ver ningun problema, por eso te pregunto a ti que debes saber mas del tema.
    Mi blog en si consiste en puros capitulos de Animes y Mangas, que publico cada cierto tiempo. Por eso si me pudieras ayudar a solucionarlo seria sinceramente de gran ayuda, ya que no quiero perder el Adsense ya cuando mi Blog esta subiendo de visitas, y si para solucionarlo tendria que quitar todos los videos de mi Blog? esa seria otra duda.

    Bueno disculpa que me salga de este tema pero es que estoy asustado, Porfa ayuda Potro!! :(

    ResponderEliminar
    Respuestas
    1. Hola Laudy, para poder participar en el programa de AdSense no debes incluir ningún tipo de material que esté protegido por derechos de autor, ya sea para su descarga o reproducción en línea. Tampoco insertar en iframes dicho contenido: https://support.google.com/adsense/answer/1348688?hl=es#Copyrighted_material

      Eliminar
    2. Hola de nuevo yo, bueno por lo visto y por lo que lei en si estoy --->FRITO<--. Mi blog aparentemente no funcionara para trabajar con Adsense, como te dije en si mi blog consiste en los videos pero por las politicas no funcionaran, Dios! ya cuando iva creciendo poco a poco. Sinceramente me gustaria eliminar todo el contenido de videos de mi blog pero no seria igual, en eso consiste en blog, en puros capitulos en videos. Que otra empresa de publicidad me recomendarias?
      Gracias de antemano!

      Eliminar
    3. Hay muchas alternativas a AdSense, pero parece que AdSense es la que mejor paga, no está de más que hagas una búsqueda en Google para que te informes más de todas las opciones que hay, y sobre todo de sus políticas. Léelas antes de inscribirte, así evitarás que te pase lo mismo.
      Suerte.

      Eliminar
    4. Gracias wey, como siempre gracias a ti he soluciono mis dudas, igual seguire utilizando Adsense en otro blog que tengo sobre noticias de animes xD asi cumplire con todas sus reglas y politicas y evitare que me pase de nuevo.

      Saludos, como siempre gracias por todo !El Mejor Bloguero del Mundo¡

      Ps: ya veo porque el aviso antes de comentar sobre no dejar el link del blog si contiene derechos de autor es por eso mismo supongo, por lo de Adsense y sus politicas jajajajaja :)

      !NOS VEMOS ONLINE¡ jajajaja xDD

      Eliminar
    5. Sí, sí, es justamente por eso. Es ridículo porque los enlaces no son míos y no están dentro del post y la mayoría no son enlaces como tal sino que son texto nada más, pero ya una vez me inhabilitaron los anuncios por ello, así que mejor decidí tomar esas precauciones con el tema de los derechos de autor y me evito cualquier problema relacionado con AdSense.
      Nos seguimos leyendo.

      Eliminar
    6. Hola yo de nuevo por aqui. Como siempre dudas y mas dudas, como siempre de Adsense. Decide crearme otro blog (Zonarutoppuden News) y decide que no habra nada de derechos de autor para ponerle adsense, le puse el code html de los anuncios de Adsense, me meti en mi blog y genial aparecieron, hasta aqui llego mi felicidad, veras me meti en la pestaña ingresos de ese mismo blogger para enlazarlo kn mi cuenta de adsense y me salio (En su estado actual, tu blog no cumple los requisitos para utilizar AdSense) lei un poco mas y me salio que tiene que tener minimo 6 MESES FUNCIONANDO, me meti en mi cuenta de adsense y no registra los clicks impresiones ni nada. Sera esa la razon, tendre que tener mas tiempo con el blog para poderle poner adsense?
      Saludos!

      Eliminar
    7. Es correcto, para poner AdSense debes tener al menos 6 meses de antigüedad con tu blog.

      Eliminar
    8. Que me recomendarias tu, quitarle los anuncios mientras que pasan los seis meses o dejarselos, tendra algo que ver que se los deje?, aqui te dejo mi blog Zonarutoppuden News

      Gracias de antemano!

      Eliminar
    9. No tiene ningún sentido que los dejes si no te van a generar ninguna ganancia.

      Eliminar
  26. Hola Potro! Quisiera hacerte una pregunta fuera de este tema, pero tiene que ver con los iconos. Como tendria que hacer para sacar los puntos que se encuentran en mis Etiquetas (en mi caso, el gadget de etiquetas se llama CATEGORIAS - SECCIONES), osea estos " ● ", que se encuentran antes de cada una de ellas (etiquetas) y reemplazarlos por unos iconos a mi gusto?. Espero tu respuesta muy antentamente!. FasteN

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

    ResponderEliminar
    Respuestas
    1. Hola FasteN, mira esta entrada sobre la personalización de las viñetas:
      http://ciudadblogger.com/2009/11/personalizar-las-vinetas-del-blog.html

      En tu caso cambiarías los .post por #Label1

      Eliminar
    2. Mil gracias Potro, funciono a la perfeccion!

      Eliminar
  28. Excelente baby muchas gracias por tan acertada sugerencia, ahora mi menú se ve divino

    ResponderEliminar
  29. Hola potro otra vez molestándote, y se que este comentario esta fuera del tema de la entrada pero "siendo tu fan y te leo como 2 horas todos los días" te pregunto: Como poner la fecha justo como la tienes tu, que aparezca abajo del titulo del post. Ya busque en todo tu sitio y eso no lo e visto como hacerlo... te agradecería mil si me solucionaras.

    ResponderEliminar
    Respuestas
    1. Gracias Emanuel, no sabía que alguien me leyera tanto (:
      El código de la fecha es este:
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>

      Localízalo en tu plantilla y córtalo. Luego busca esta etiqueta:
      <div class='post-header'>
      Pega el código de la fecha arriba de ella.

      Considera que tanto el código de la fecha como de la línea donde lo has de pegar puede estar dos veces, si no ves resultados entonces aplica el cambio en los códigos repetidos.

      También, la fecha por defecto tiene una etiqueta h2, yo siempre se la cambio por span así no es grande, ni negrita, ni distractor SEO. Saludos.

      Eliminar
    2. mil gracias y te leo mucho por que estoy diseñando un blog con tus tutoriales, que por cierto soy buenisimos.

      PD: ya lei la ultima entrada de "como mapear una imagen" gracias

      Eliminar
    3. oyee, mira no se si me puedas ayudar también con esto. ya que no e podido personalizar por completo una plantilla yo solo, encontré una que me gusta mucho pero el problema es que tiene la columna de la derecha muy pequeña y no se ven bien los widgets. y como es una plantilla externa no la puedo modificar con el editor de plantillas. ojala me puedas dar el tip para cambiarlo este el el link de la plantilla: http://newbloggerthemes.com/superhero-blogger-template/demo/

      Eliminar
    4. Hola Emanuel, sólo localiza el width que está dentro de #nbt-primary y redúcele alguna cantidad, por ejemplo quítale 100px
      Luego, localiza el width que está dentro de #nbt-secondary y súmale los 100px que le quitaste al otro.

      Eliminar
  30. Hola!! Sigo tu blog ya desde hace algun tiempo y queria pedirte un favor, necesito correr un video con este codigo script

    Pero no logro encontrar como ponerlo.... me puedes ayudar?

    ResponderEliminar
    Respuestas
    1. Hola Martha, no sé si he comprendido bien, ¿con cuál script quieres poner un video? ¿en cuál blog?

      Eliminar
  31. Hola, necesito ayuda, tengo un Blog y la pagina principal tiene un buscador, pero solo funciona con las entradas de ese mismo Blog, yo quiero saber si se puede vincular con mas Blogs para que en el Blog principal, el buscador funcione y muestre resultados de otros Blogs!!
    Espero su respuesta, gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Hector, tendrías que usar el Motor de búsqueda personalizada de Google, y en su configuración, dentro de "Aspectos básicos > Sitios en los que buscar" añadir todas las URLs donde quieras que busque.

      Eliminar
    2. Hola soy Hector..muchas gracias, logre hacerlo :D espero que algún día hagas una nota sobre este tema mas explicado, de como cambiar el diseño, ya intente pero esta muy grande el buscador, pero lo bueno que me funciono, en serio muchas gracias, te agradecería que paces por mi canal, he tratado de configurar el responder a los comentarios pero no me aparece :c

      Eliminar
    3. Qué gusto que hayas conseguido hacerlo Hector :)
      Deja la pregunta en la entrada donde tienes el problema junto con el nombre de tu blog para que pueda darle una revisada.

      Eliminar
    4. Como tengo diferentes Bogs en uno, para poder cambiar el diseño de la visualizacion, en este es el que no puedo responder comentarios..en la ultima entrada hay comentarios, puedes ver el detalle :/
      Espero que no te afecte si te dejo el link: seriehechicerastemporada8.blogspot

      Eliminar
    5. No he visto comentarios en ninguna de las entradas que revisé, pero si tu problema es que en tu plantilla no aparece la opción de "Responder" entonces tienes que hacer algunas modificaciones. Mira el comentario #5.1 de esta entrada:
      http://ciudadblogger.com/2014/06/personalizar-los-enlaces-de-los-comentarios-de-blogger.html

      Eliminar
    6. Ya cambie el código y aun sigue sin aparecer la opción para Responder :(

      Eliminar
    7. Revisa de nuevo, quizá los códigos que hay que cambiar los tengas repetidos, si así fuera habrá que aplicar el cambio en los demás.

      Eliminar
  32. Enhorabuena por tu trabajo Potro me estás ayudando mucho a actualizar mi página. Me gustaría saber si existe alguna manera de aplicar esta disposición al menú Meny sin perder la parte escrita (que se vea la imagen acompañando al enlace y que, si se puede, también funcione como enlace).

    ResponderEliminar
    Respuestas
    1. Hola DMP, en el caso de cualquier otro menú distinto al de Páginas, sólo tienes que añadir el código de la imagen después de cada <li>
      El código de la imagen es así:
      <img src="URL de la imagen" style="vertical-align:middle;" />

      Con CSS no, porque entonces la imagen no podría funcionar como enlace.

      Eliminar
    2. Perfecto, ya me funcionó. Muchas gracias!

      Eliminar
  33. Hola Potro! de vuelta por aquí...quería consultarte como puedo poner el listado de post por orden alfabetico, en un menú superior.
    Yo lo tengo en un HTML al costado con un menú desplegable, pero quería poner menú horizontal y quería ponerlo ahí, pero si agrego una pagina que se llame listado de bandas ( por ej ) no se como continuar, o que poner...también vi un blog hace un tiempo, que tiene una opción INDICE y cuando entras se ven todas las entradas tipo magazine. Te cuento que yo las entradas las separo con el nombre de la banda en Etiquetas, de esa forma armo el listado por orden alfabetico, no se si esta mal o hay otra manera...te dejo el blog como siempre.

    discografiasmega.blog

    Gracias por tu tiempo

    ResponderEliminar
    Respuestas
    1. Hola BaTo LoCo, sólo conozco la manera como tú lo has hecho. Hay dos entradas aquí sobre sitemaps, o índice de entradas, una es por etiquetas y otra por fecha, pero ninguna por orden alfabético :(

      Eliminar
    2. bueno, Ok, gracias por la respuesta, ahora, supongamos que decido hacer el meno horizontal arriba del blog, y el listado de bandas lo armo con las etiquetas como me decis vos, al agregar una nueva pagina ( por ej ) INICIO, ACERCA DE MI, LISTADO DE BANDAS....como armaria un listado de etiquetas ahí...?? tengo la pagina en blanco y no se que poner ( mas que texto plano o un link de video )
      Nose si me explico bien...ojala que si...

      Eliminar
    3. Si quieres un sitemap basado en las etiquetas entonces mira esta entrada:
      http://ciudadblogger.com/2009/09/crear-sitemap-o-tabla-de-contenido-para.html

      Lo del otro blog no sé, tendrías que preguntar en ese blog cómo lo han hecho.

      Eliminar
  34. Hola Potro, por favor podrias indicarme el codigo para que estos iconos del menu de paginas tengan un efecto hover al pasar el raton, estoy provando varios formatos con efecto hover pero no doy con la tecla.. :(

    Muchas Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola Liz, usa esta estructura para los estilos al pasar el cursor:

      #PageList1 li:nth-child(1):hover:before {
      ....
      ....
      ....
      }


      Recuerda que por cada uno que agregues deberás cambiar el número que está en negrita por el que corresponda al número de la pestaña.
      Donde están los puntos irán los estilos que quieras aplicar al pasar el cursor.

      Eliminar
  35. Hola, Potro
    El truco me parece bueno, pero ¿se pueden agregar las propiedades "width" y "height" a los códigos para ajustar el tamaño de la imagen?

    ResponderEliminar
    Respuestas
    1. Hola Danny, no, en este caso no, pero siempre podrás poner una imagen del tamaño que gustes.

      Eliminar
  36. Hola :D soy la chica que te envió tweets. Mira, traté de poner los códigos pero me marcaba error y no me dejaba guardar :( aqui te pongo unas imagenes que saqué para que veas los errores y ejemplos de códigos
    http://i62.tinypic.com/2eqcjtf.jpg

    http://i58.tinypic.com/2niuxcn.jpg

    ResponderEliminar
    Respuestas
    1. Hola, mismo te dice cuál ha sido tu error. Primero te menciona que has olvidado ponerle el cierre </li> a la etiqueta LI. Luego en el otro error te dice que en donde dice href has puesto dobles comillas siendo que debe ser una comilla simple. Guíate por los códigos que ya tienes puestos para que no cometas errores.

      Eliminar
  37. Hola potro, y en lugar de hover para cuando pasar el cursor, hay algo para cuando bajas aparezca el logo.

    Gracias!

    Saludos

    Pedro

    ResponderEliminar
  38. si quiero cambiarle solo a uno como hago?

    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