Búsqueda de Temas

viernes, 26 de octubre de 2007

Crear una página inicial (fija) para blog de Blogger

Hoy día se me planteó una pregunta sobre cómo puede darse a un blog un esquema similar al de una página web, donde sólo se muestre una portada y por más que se escriban nuevos artículos, éstos no desplacen al texto que hacía de portada principal. La solución se me ocurrió después de unos minutos y expongo aquí.

Lo que se desea es dejar un texto como si fuera una entrada fija de manera que simule ser una página web estática fija, para ésto no se deben mostrar los artículos recientes sino hasta que se acceda a Vinculos en un menú o en alguna sección del texto de bienvenida, todo esto para los blogs de Blogger.

DESBLOQUEANDO RESTRICCIONES DE BLOGGER

Blogger por defecto solo permite añadir algunos elementos de página que aparecen en ciertas secciones de la estructura principal del Blog, es decir, cuando accedemos a la sección de Plantilla> Elemtentos de Página nos encontramos con algo como ésto:


Lo que haremos será desbloquear algunas opciones ocultas que nos permitirán añadir más elementos en distintas nuevas zonas de la estructura, para ello iremos a Plantilla> Edición de HTML (antes que nada, descargémonos la plantilla original como copia de seguridad), alli clic en la opción "Expandir plantillas de artilugios" y luego (usando CTRL+F) buscaremos todos los textos donde haya esto:

showaddelement='no'

Y los reemplazaremos por:

showaddelement='yes'

Luego de eso, guardamos los cambios (Guarda Plantilla) y vamos a la sección Plantilla> Elementos de Página y veremos que ahora hay nuevas opciones de adición de elementos quedando algo así:


Con eso el desbloqueo está hecho y podremos añadir nuevos elementos que podremos usar para personalizar nuestra página de inicio (fija) en nuestro blog de Blogger.

OCULTANDO LAS ENTRADAS DEL BLOG

Para que solo se muestre el texto de inicio ve al panel de Blogger donde dice Configuración> Formato y lo dejamos como se muestra:

Mostrar

Da clic donde sobre "Añadir nuevo elemento de página" al cuadro que se muestra en la imagen.


Luego seleccionamos el nuevo elemento, elige la opción "HTML/Javascript".

Alli tenemos dos campos: Título y Contenido. En título podemos poner algo representativo como Bienvenidos, Editorial, Inicio, etc. En contenido deben usar un texto de inicio (será lo que se mostrará como página de inicio), pueden usar todos los códigos HTML que deseen, pronto estaré posteando una referencia simple de HTML. Guardan los cambios y listo.

Debemos recordar que la página fija se mantendrá siempre por encima de todos los posts por lo que lo ideal sería crear una entra fija no muy grande, de manera tal que siempre aparezca en la parte superior pero no desvíe la atención de las entradas inferiores.

Saludos.

10 comentarios:

xo dijo...

muy buena tu ayuda compatriota al igual que tu tambien me he preguntado como hacer eso Y.Y yo recien he comenzado con esto del blog y he estado sufriendo un poco por querer hacerlo mejor si tienes un poquito de tiempo te agradeceria bastante que te acercaras a ver el mio en http//:wwwbraulitox.blogspot.com/ espero no molestar

KnxDT dijo...

Va mejorando, cualquier duda que tengas puedes llenar el formulario de contacto (que se encuentra en el menu superior) y me envias un mensaje, o sino lo posteas como comentario.

Saludos.

Jaén dijo...

Gracias, como no sucede muchas veces las indicaciones son realizables, mas aun son faciles de aplicar. Mi consulta es como se podria hacer para sacar ese recuadrito horizontal que dice: Ninguna entrada coincide con la consulta" q se ubica debajo de la entrada fija (q en mi caso dice BIENVENIDOS). Te puedo dejar mi blog para q lo veas, por favor? www.blogcitodepruebas.blogspot.com

KnxDT dijo...

Solo una recomendación, cuando postees un enlace a tu blog no es necesario que pongas la dirección completa porque parece spam, conviene usar el tag a href, de esta manera:

<a href="url_blog">clic aqui</a>

que nos dará un resultado como este:

clic aqui

En cuanto a la duda que me planteas es un caso bastante particular, ya que si alteras eso cada vez que hagas una búsqueda y no encuentre los resultados no sabrá que texto mostrar, si te da igual y no tienes buscador y solo quieres evitar que salga ese texto "Ninguna entrada coincide con la consulta" lo que debes hacer es ir a la plantilla en la edición de HTML y buscar este código:


<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Dado que no conviene eliminarlo, es mejor dejar el código mostrado como comentado, para eso añadiremos los símbolos <!-- y --> al inicio y al final de ese código, quedando así:

<!--<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>-->

Guardas la plantilla y listo. Yo ya lo he probado y va bien, recuerda guardar una copia de la plantilla en caso edites mal. Espero me cuentes luego como te fue.

Jaén dijo...

Gracias por responder. Ya están seguidas las indicaciones. Entendido también eso de poner adecuadamente el enlace al blog, lo q pasa es q cuando uno es muy novato no sabe ni q cosa es un tag, ni menos a href, mucho menos usarlo adecuadamente.
Otras consultitas: el título de mi blog ("BLOG DE PRUEBA") está en el color q viene en la plantilla frozenage (gris), he tratado de cambiarla de color (a verde), mediante Diseño>Fuentes y colores, pero sigue apareciendo gris; aparece en color verde pero solamente cuando hago click en el menu desplegable de ARCHIVO, es decir cuando aparecen todas las 'entradas' publicadas (ENTRADA4, ENTRADA3, etc).
Sobre eso que me dices que "cada vez que haga una búsqueda y no encuentre el resultado..." te refieres a busquedas hechas con el buscador que viene con la plantilla (el que esta ubicado en la esquina superior derecha), es un buscador interno, no?. Gracias anticipadas por la respuesta.

KnxDT dijo...

Tienes un campo así en el código fuente de tu blog (no en la plantilla):

<h1 class='title'>
BLOG DE PRUEBAS
</h1>

Entonces si quieres que el título sea verde ve a la Plantilla> Edicion de HTML y antes del tag <head> añade éste código:

<style type='text/css'>
h1 .title{
color: green;
}
</style>

// Ahora en cuanto al buscador, la respuesta es sí, se trata de un buscador interno, en la parte superior de mi sidebar hay un buscador y es a éso a lo que me refiero. ;)

Jaén dijo...

Ubiqué ese trozo en el código fuente (signo menor que h1...), lo debo modificar, para qué sirve?
Añadí el código indicado (signo menor que style...) en el lugar indicado, inmediatamente antes de signo menor que head> pero no resultó, los cambios se guardan, no sale error pero sigue con el mismo color gris (salvo, como te decía, cuando hago click en el menu desplegable de Archivo). He probado tambien a añadirlo inmediatamente antes de signo menor que /head>
Deseo tambien cambiar el color de los vinculos del menu (en mi caso: INICIO, BRACAMOROSJAEN, etc), del titulo de las entradas fijas: BIENVENIDOS Y VIDEOS TIENS; asi como el título de los elementos del sidebar: ARCHIVO, COMENTARIOS RECIENTES.
El buscador interno como que no me funciona, porque por ejemplo si pongo buscar una frase: "larvas de mosca" (una entrada que he agregado) no sale nada. Sale que esta cargandose algo pero no me muestra nada de lo buscado.
Tienes alguna entrada donde enseñes como agregar menus desplegables, tambien te sugeriría nos enseñes acerca de como alojar archivos, es un verdadero infierno hacer eso. Algunos menus desplegables piden q antes de implementar el menu alojes un archivo css, a eso le llaman archivos .js no? Por ejemplo: aquí
Muchas gracias por todo, de todas maneras estoy aprendiendo mucho.

Jaén dijo...

Puse "signo menor que" porque me salía que mi codigo html no es aceptado, o sea no me permitían poner el signo '<'. Me equivoqué en el vinculo: donde decía: Por ejemplo clic aquiaquí. Esta sí está correcta

KnxDT dijo...

En un post siguiente enseñaré como insertar símbolos de html sin que éstos se 'ejecuten' en la plantilla o se bloqueen en los comentarios.

Lo del </head> fue error mío, ya luego lo revisaré (además que no era head).

De ese buscador, no puedo dar ningún aval. Yo creé un artículo de como añadir un buscador a un blog de Blogger y que está aquí, y sobre él si te puedo comentar.

El problema de alojar archivos también ya lo he explicado en este otro artículo. Y lo que me mencionas de ese blog que me has dado de ejemplo es un claro uso de un script de dynamic drive (aunque no he visto que haya pegado el código de permiso de uso). El script es un chrome (así se llama el estilo, muy conocido) y puedes acceder a él desde este enlace.

No he enseñado en sí con ninguna entrada lo de añadir un menú desplegable, sin embargo lo tendré en cuenta ya que tus dudas me dan ideas de artículos. Un saludo.

Jaén dijo...

Sobre el head. Sino era head que tag era? es decir junto a qué tag debería colocar el codigo que me habías dado:(< style...)
Algunos vinculos que pones no llevan a donde prometen; el que dice: 'está aquí' ()(enlaza a esta misma pagina, y el que dice: 'en este otro..' lleva a tu post sobre como agregar un buscador.
A proposito del buscador, sería ideal que puedas hacer una modificacion a ese buscador que ya viene en la frozenage, o en todo caso aprovechar su ubicación por q está muy bien ubicado ahí en una esquinita del recuadrito ese debajo del titulo (y no como un elemento de la sidebar).
Siguiendo con la frozenage, supongo que habrá quienes prefieran reducir el tamaño del espacio que queda encima del título, a mí me parece muy grande, un espacio q se desaprovecha (porq he leido por ahí que lo ideal de una pagina/blog es tener como máximo pantalla y media de largo).
Y como te decía en el anterior a ver si nos das una manito con algunos detalles más, como modificar los colores de los elementos del menú (en mi caso: INICIO, BRACAMOROS JAEN, etc) y de los títulos de los elementos del sidebar (en mi caso: ARCHIVO y COMENTARIOS RECIENTES).
La última: por qué será que en ese elemento ARCHIVO, el vinculo que viene para acceder a las entradas de tal semana (porq lo he configurado para q se muestren por semanas) esta oculto, y sólo aparece cuando se le pasa el mouse?

Contáctame