Portada en página Inicio – Seguro – Abogado ~ CosasParaMiBlogs

Hay diversas formas de conseguir que nuestra página deInicio, se convierta en una especie de portada que se vea de manera similar a la página principal de una web convencional (una que no sea un blog). De entre ellos, aquí vamos a explicar uno sencillito y que requiere pocas modificaciones en la plantilla. Aquí unejemplo simplón de lo que se puede conseguir.

Vamos a utilizar para ello, un par de condicionales ubicados en sitios estratégicos, de manera que cuando estemos en la páginaInicio se vean ciertas cosas, pero no se muestren las entradas y cuando estemos en cualquier otro tipo de página, no se vea lo que coloquemos en la susodicha páginaInicio y sí las entradas.

En primer lugar, vamos a quitar las entradas de nuestroHome. Para ello, conExpandir plantillas de artilugios seleccionado, insertamos una condición y su cierre correspondiente, para que el loop principal que crea las entradas no se ejecute cuando estemos allí:

b:includable id='main' var='top'
b:if cond='data:blog.url != data:blog.homepageUrl'
!-- posts --
div class='blog-posts hfeed'
b:include data='top' name='status-message'/
data:defaultAdStart/
b:loop values='data:posts' var='post'
...
google.load("annotations", "1", {"locale": "data:top.languageCode/"});
function initialize() { google.annotations.setApplicationId(data:top.blogspotReviews/);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
/script
/b:if
/b:if
/b:includable

Las dos líneas en verde son las nuevas. El resto son sólo una referencia para saber dónde hay que ponerlas. ConVista Previa ya podeis ver el resultado.

Ahora, el contenido que queramos mostrar en Inicio, lo pondremos dentro de un gadget tipoHTML/JavaScript. Esto nos permitirá poner todo el código que queramos para incluir texto, imágenes, tablas, efectos rollover, un flash... o lo que sea. Aquí es dónde ya le teneis que echar imaginación, porque con este sistema, podeis poner prácticamente todo lo que querais. En elejemplo sólo hemos puesto cuatro imágenes con enlace a las distintas categorías y un pequeñoefecto rollover. Debajo un menú hecho con el gadget deetiquetas convertido en botones. Todo ello está redactado en HTML dentro de un widget como se ha dicho al principio este párrafo.

Según lo que queramos, el gadget lo podemos poner debajo de la cabecera o en el footer, para que ocupe todo el ancho del blog. Si lo ponemos debajo o encima del cuerpo de las entradas, ocupará sólo el hueco que ocupan las entradas normales (todo el ancho menos el que ocupa la/s barra/s lateral/es)

En la primera opción, si visualmente os estorba la barra lateral, habrá que utilizar un truquillo para que no se vea. Suponiendo que tuvierais una plantilla estándar Blogger, tendríais que colocar justo detrás de body las siguientes líneas:

b:if cond='data:blog.url == data:blog.homepageUrl'
style type='text/css'#sidebar-wrapper {display:none !important;}/style
/b:if

Si elID delDIV que forma la barra lateral tuvieraotro nombre, ese es el que tendríamos que poner en las nuevas líneas. Entre esos dos condicionales, podeis meter con la misma técnica (haciendo referencia al nombre del selector), todo aquello que no querais que se vea en la página de Inicio. Por ejemplo, se podría añadir un#header {display:none !important;}; Incluso se pueden alterar algunas propiedades (sólo para la páginaInicio) que nos interese. Vg:#outer-wrapper {margin-top:20px !important; background: url("http://imagen.jpg") !important;}

De todas formas, si haceis esto, desdeElementos de Página no tendreis la opción de añadir gadgets, simplemente porque la barra lateral no se verá. Se conoce que para Blogger, estar enDiseño es como estar enHome. Siendo así las cosas, se recomienda dejar la barra lateral como esté y añadir todo el contenido de la portada en un gadget encima del cuerpo de las entradas, usando el truquillo sólo para lo imprescindible.

Ahora nos vamos a preocupar de que este gadget que forma la portada desaparezca cuando estamos en otro tipo de páginas distintas de la principal. Para ello, lo buscamos en nuestra plantila conPlantillas de Artilugios Expandidas. Lo más rápido y cómodo, es darle un título cuando lo creemos. Este título no se verá cuando terminemos porque vamos a eliminar su visualización desde la plantilla. Supongamos que le hemos llamadoPORTADA; tendremos que buscar un widget contitle='portada' y una vez localizado, insertamos/borramos las siguientes líneas:

b:widget id='HTML1' locked='false' title='portada' type='HTML'
b:includable id='main'
!-- only display title if it's non-empty --
b:if cond='data:title != ""'
h2 class='title'data:title//h2
/b:if
b:if cond='data:blog.url == data:blog.homepageUrl'
div class='widget-content'
data:content/
/div
/b:if
b:include name='quickedit'/
/b:includable
/b:widget

En verde las líneas a insertar y tachadas las que hay que borrar.

Un pequeño detalle. Podeis eliminar el rótulo "Mostrando entradas con la etiqueta..." si borrais de vuestra plantilla la líneab:include data='top' name='status-message'/. El mismo resultado se consigue si en lugar de borrarla la encerrais entre símbolos de comentarios:!-- CODIGO --

Lo mejor de este sistema es que si alguna vez, más adelante, quereis deshacer todo esto, con quitar los dos condicionales y eliminar el gadgetPORTADA, será suficiente.

Actualización: Otro ejemplo de un blog con portada...Poemaciones. Aunque no he mirado el sistema con el que se construyó, sirve para hacerse una idea de lo que se puede conseguir.

CosasParaMiBlogs

domingo, 14 de febrero de 2010

Portada en página Inicio – Seguro – Abogado

Popular Posts

Blogger news

Labels

Blog Archive