Esto de las secciones o apartados de temática común, se puede simular en Blogger mediante la creación de un menú, cuyos enlaces coinciden con las distintas etiquetas de nuestro blog. Así es como por ejemplo lo tiene construido Elite Voley.
Como podeis ver allí, el menú superior es prácticamente una reproducción de la lista de etiquetas, pero a diferencia de ese gadget, esta lista está construída manualmente. Hay diversas maneras de programar un menú y por citar un ejemplo, List-o-matic puede facilitaros mucho la tarea.
El enlace a cada una de las categorías (o etiquetas) tiene la forma
http://nombre_blog.blogspot.com/search/label/nombre_etiqueta
Pues bien, una vez que tenemos nuestro menú y nuestros enlaces bien configurados, podeis observar cómo al acceder a alguno de estos apartados, lo primero que nos sale es un mensaje del tipo:
Probablemente este mensaje y formato no sea de nuestro agrado, en cuyo caso, ahora comienza el truco que proponemos para cambiar esto.
En primer lugar, editamos la plantilla marcando Expandir plantillas de artilugios y eliminamos la llamada al artilugio Blogger que genera este mensaje. Para ello, simplemente borramos esta línea de nuestro código.
<b:include data='top' name='status-message'/>
Hay un includable que contiene el código completo del artilugio, pero no es necesario tocarlo porque con que suprimamos la llamada (el include), ya lo hemos inutilizado.
Ahora generamos un nuevo gadget cuyo código es el que va a construir una frase con el nombre de la etiqueta (sección para nuestros lectores). Hay que colocarlo inmediatamente antes de <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<b:widget id='Label99' locked='false' title='Titulo secciones' type='Label'>
<b:includable id='main'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
El texto en verde se puede suprimir o cambiar por el que se desee. En cualquier caso, la etiqueta data:label.name, mostrará el nombre de la sección dónde nos encontremos.
Ya lo único que falta es dar estilo a nuestra cabecera. Para eso, simplemente insertamos en la parte CSS de nuestra plantilla (antes de ]]></b:skin> para los que no lo recuerden), una nueva clase llamada secciones, con las propiedades que gustemos. Este sería un ejemplo, pero lo mejor es que lo adapteis a la apariencia de vuestro blog.
.secciones {
text-align:center;
margin:0px auto;
text-transform:uppercase;
font-size:130%;
font-weight:bold;
color: #ffffff;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}
text-align:center;
margin:0px auto;
text-transform:uppercase;
font-size:130%;
font-weight:bold;
color: #ffffff;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Oh, Gran Olomán:
ResponderEliminarLo he probado y funciona!
Aunque... hay tres cosas que no (me) funcionan:
1) el degradado de color que hay en los estilos css
2) en cuanto en una etiqueta pincho en "entradas anteriores" desaparece
3) tengo una etiqueta con el código "max-results=25". Ahí tampoco sale...
¿cómo ves estos 3 puntos?
a mi con mozilla no me funciona, bueno, no me aplica los estilos...
ResponderEliminarMuy buena idea me gusta!!
ResponderEliminarPues lo veo mal Pepeworks :(
ResponderEliminarY es que este truco hace que esta "cabecera" salga en los mismos casos en que lo hace el artilugio status-message (mensaje estándar de Blogger) y en los que mencionas no sale. No se me ocurre otra alternativa. Quizás con condicionales o algún script que detecte la dirección de páginas de etiquetas, pero desde luego, sería más complicado.
Y sobre los estilos (y esto también vale para contestar a Carmen) los que se incluyen aquí son CSS3, lo que implica que no son visibles en todos los navegadores. Sólo en los más modernos. De todas formas, en tu caso he visto que sólo has dejado el border-radius, pero no incluiste las otras dos propiedades para esto mismo que hacen que sea más compatible con más navegadores.
Podeis probar con otros bordes, fondos planos o de imagen, etc. más "antiguos".
Gem@ como no tengo botón para eso (Me gusta) lo has hecho al viejo estilo ¿no? :D
Ok, perfecto, gracias por la respuesta!
ResponderEliminarNo pasa nada, lo sigo utilizando tal cual.
Según pude comprobar después, el degradado no me funcionaba en internet explorer, pero sí en google chrome... De todas formas terminé por quitarlo del código, no me convencía mucho...
probaremos.... :))
ResponderEliminarPepeworks si pusierais todas las cosas que propongo por aquí, vuestros blogs serían insufribles. Cada cual que coloque lo que le cuadre ;)
ResponderEliminarSí Carmen, como el anuncio: prueba, compara, pero si encuentras algo mejor ¡Úsalo!
Hola Oloblogger.
ResponderEliminarTe queria preguntar como se podria hacer para que funcione cuando utilizas un enlace a una etiqueta pero con el condicioenente: max-results=6
Saludos que andes bien...
Ni idea MR. Es cierto que no funciona. He estado haciendo pruebas, pero en cuanto colocas el max-results, el aviso desaparece. Se ve que al ser un gadget Blogger, algo lleva en destino que elimina eso cuando se cambia cualquier cosa.
ResponderEliminarOk muchas gracias oloblogger.
ResponderEliminarSi a mi me funciono sin el max results pero lo que pasa es que lo necesito porque sino la extension de cada pagina seria descomunal.
Repente alguna solucion sera darle ese condicional de max reults pero de otra manera pero no se3 si habra.
De nuevo muchas gracias y que andes bien..
Hola Oloman, lo probe y me va muy bien, pero ahora tengo una duda, cuando configuro el gadget entradas para la pagina principal a un valor mayor de 10 entradas a mostrar solo aparecen 10 post, no mas, como si hubiese alguna condicionante como maximo resultado=10. En otras webs me funciona bien, pero no en esta:
ResponderEliminarhttp://www.fashionrentalsperu.com/
Podrias darme una mano o una pista de q cosa puede ser, gracias anticipadas.
Oloman, ya lo arregle...Tenia 13 post publicados y lo configure para q aparezcan 12. Solo aparecian 10, luego sin hacer casi nada aparecieron 11 y ahora hice la prueba ingresando un post nuevo y ya aparecen los doce programados. No se porq sucede esto pero asi me trabaja la web, curioso no?
ResponderEliminarGracias hombre y disculpa el laberinto =)
Jaime, eso que comentas seguramente es por la autopaginación (segunda parte del post enlazado)
ResponderEliminarholaaa me re sirvio tu truco!!! ^^ ahora una preguntita...esto se va a aplicar a tooodas las etiquetas que tengamos no?
ResponderEliminarA mi me gustaria que el cartelito salga solo en algunas etiquetas...es medio complicado hacer algo asi?
O de ultima hacer que el mensaje sea mas personalizable para cada etiqueta, perdon si te mareo todo u.u
De todas formas te agradezco mucho el truco ^^
Más que complicado, es largo de escribir Curu-Curu.
ResponderEliminarTendrías que cambiar esta parte:
<b:if cond='data:blog.url == data:label.url'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
Ahí habría introducir más condiciones:
<b:if cond='data:blog.url == data:label.url'>
<b:if cond='data:label.name == "ETIQUETA1"'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION ETIQUETA1</div>
</b:if>
<b:if cond='data:label.name == "ETIQUETA2"'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION ETIQUETA2</div>
</b:if>
<b:else/>
En el ejemplo sólo he puesto dos, pero tendrías que poner tantas como usaras y cambiar el texto según quisieras para cada una. Si también quiers cambiar el estilo, pues igualmente hay que cambiar la clase "secciones" por otras nuevas que tendrías que crear.
Hola Olobloger, he estado buscando la línia y no me sale... ¿me podrías decir antes de esta línea qué va? O a ver si la encuentras en mi blog... :S
ResponderEliminarAsegúrate de estar con "Plantillas de artilugios expandidas". Pero de todas formas ¿cuál es la línea que no encuentras?
EliminarGracias por todo Oloman! Ya lo hice y quedo de lujo, eliminé los bordes y cambié el color.
ResponderEliminarSolo hay algo que no sé cómo implementar y es que además de salir la categoría (o etiqueta) en la cual se está, al igual que a ti me salga así: "Home » Blogger" y así se puede volver a home inmediatamente dando click ahí mismo.
Este widget incluye eso, o es otro más que debo implementar?
Gracias anticipadas por tu respuesta y sobre todo por tu gran ayuda.
Por cierto, mi blog es Amandysha.net (por si quieres verificar que hice algo mal y por eso no me funciona bien)
ResponderEliminarNo hace falta que lo mire, es que eso segundo es un código adicional.
EliminarSe llama migas de pan o breadcrumbs y lo tienes explicado en el enlace.
Amigo disculpa, ¿cómo puedo modificar esto para lograr lo que me recomendaste en tu post http://www.oloblogger.com/2008/09/indice-automtico-para-tus-posts.html?showComment=1368581291212#c7263359430602829638?
ResponderEliminarLa verdad no tengo la más mínima idea de cómo hacerlo :$
Dijiste que no querías eliminar el status-message. Aquí se explica cómo modificar el texto para que salga lo que tú quieras. Fíjate en el tercer trozo de código. Ese es el que tienes que modificar tú.
Eliminar¿Entonces solo tengo que incluír el tercer código modificando el texto: "ESTA VIENDO LA SECCION"?
EliminarPor cierto, dices que hay que incluirlo dentrás de
pero a mí me aparece es
En vez de locked='true' tengo locked='false'.
Por cierto, dices que hay que incluirlo dentrás de b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'
Eliminarpero a mí me aparece es b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'
Siguiendo todos los pasos he hecho que aparezca "ESTA VIENDO LA SECCION XXXXXX" cuando selecciono una etiqueta, pero no busco eso, lo único que quiero es cambiar el texto "No hay ninguna entrada" por otro texto, sin que me aparezca ese otro texto en otras páginas aparte del home, ni cuando esté en una entrada ni cuando esté explorando las etiquetas, solo en el home.
EliminarUn poco de imaginación y sobre todo de paciencia. No te puedo dar todo hecho porque son cosas generales y como ves, probando vas avanzando en tu propia idea.
EliminarHay una condición para un caso aquí:
...
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
</b:if>
...
Pues prueba a meter una frase entre el ELSE y el IF que serían el resto de casos.
Hola. No puedo saber desde aquí que es exactamente, pero si el código funciona (tú mismo lo has comprobado) entonces es que algo, por pequeño que sea, estás haciendo de manera errónea. No sé, que copias en lugar distinto, que te comes algún cierre... o algo así.
ResponderEliminarLo único que he podido comprobar es que el gadget no funciona. Lo tienes creo en el lugar adecuado, pero no se ejecuta, no hace nada.
Buenas noches,
ResponderEliminarhice las modificaciones en mi Blog (http://norbafilatelica.blogspot.com.es/search/label/Filatelia) y funcionó, pero de pronto ha desaparecido. ¿cual puede ser el motivo?.
Gracias
Buenos días, Oloman
ResponderEliminarya funciona.
Gracias por todas tus aportaciones.
De nada (literalmente) :)
Eliminarhola Oloman, quiero aplicar esto en mi blog, pero en vez de cambiar el cartelito quiero que aparezca una imagen tipo banner arriba que identifique a la sección, gracias por tu ayuda y saludos
ResponderEliminarPara eso simplemente cambia la parte de texto y lo que genera el nombre de la etiqueta...
EliminarESTA VIENDO LA SECCION <data:label.name/>
...por la imagen que desees.
:O esto era lo que estaba buscando desde hace meses!!! Gracias Oloman!! Sos el dios del blogger..!!!
EliminarYa, como Maradona con el fútbol XD
Eliminar