Manual Para Personalizar Plantillas Blogger.

8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com

1/22


2/22

Plantillas Blogger 2

1. Códigos de plantilla definidos

Los códigos de Blogger se parecen mucho a los de HTML.

Una diferencia es que distinguen entre mayúsculas y mi-

núsculas.

Códigos de Blogger definidos:

: coloca la URL del feed del sitio

dentro de un código :

: inserta la configuración de codificación

de la pestaña Opciones | Formato en una declaración de

tipo de contenido. Concretamente:

:

permite que el feed RSS de su blog se descubra automáti-

camente mediante la compatibilidad con agregadores.Ejemplo:

: inserta todos los metadatos del blog

vía un código. Ejemplo:


3/22


(este último código aparecerá si su blog está configurado

como no incluido en la lista)

: asigna títulos inteligentes a las pági-

nas del blog que ha publicado ("Nombre del blog" a la pági-

na del índice, "Nombre del blog: información de fecha" a las

páginas de archivado y "Nombre del blog: título de la entra-da" a las páginas de entrada). Este código sólo debe utili-

zarse en un código de la plantilla, entre y

.

: título del blog.

: descripción del blog. & : principales "códigos de conte-

nedor" del contenido de su blog; la mayoría de los códigos

siguientes deben colocarse dentro de éstos para funcionar

correctamente.

: colocan cabeceras de fecha en cadaentrada, según la configuración definida en la pestaña Op-

ciones | Formato.

: colocan un título en cada entrada, enla-

zado a sus respectivas URL externas. Elimine las líneas se-

gunda, tercera y cuarta para desenlazar los títulos.: contenido de una entrada.

: autor de una entrada (con nombre y

apellido).

: nombre visible del autor

de una entrada.: dirección de correo electrónico

del autor de una entrada.

: URL de la página principal del

autor de una entrada.

: fecha u hora de una entrada.: número de identificación exclusivo

de una entrada.


4/22


: nombre de archivo deuna entrada.

: vínculo perm. de una entra-

da.

: vínculo Edición rápida de una en-

trada.

: colocan pies de

página de fecha en cada entrada, según la configuración

definida en la pestaña Opciones | Formato.

Códigos de la lista de archivos de la columna lateral,

(Explicados en el artículo sobre vínculos de archivo):

Códigos condicionales

(Explicados en el artículo sobre códigos condicionales):

Código de la entrada anterior(Explicado en el artículo sobre entradas anteriores):

Código de comentario

(Explicado en el artículo sobre códigos de comentario):


5/22


Código de perfil, explicado en el artículo sobre códigosde perfil:


6/22


2. Descr ipción detallada de las planti llas

En muchos de nuestros artículos se describen de forma de-

tallada los distintos códigos de plantilla de Blogger, pero en

éste le ofrecemos una demostración de cómo interactúan

para crear una plantilla completa. A medida que avance-

mos, le explicaremos qué sucede en cada paso. Excep-tuando los códigos HTML y CSS normales, todos los demás

códigos de Blogger aparecen resaltados para que puedan

identificarse fácilmente. Aquí tiene un ejemplo.

Esto es el principio de nuestra plantilla. Normalmente, em-

pleará el código para el título, a fin de

garantizar que se utilice automáticamente el nombre ade-

cuado en todas las páginas.

/ * st yl e modi f i ed f r om gl i sh:

ht t p: / / www. gl i sh. com/ css/ */body{mar gi n: 0px 0px 0px 0px; f ont -f ami l y: t r ebuchetms, ver dana, sans- ser i f ; backgr ound-col or : whi t e; }#Ti t l e{f ont - si ze: 63px; paddi ng- l ef t : 15px;paddi ng- t op: 10px; t ext -

t r ansf or m: upper case;

f ont - f ami l y: t r ebuchet ms, ver dana, sans-ser i f ; }#Ti t l e a {t ext - decor at i on: none;col or : i nher i t ; }#Descr i pt i on{paddi ng: 0px; paddi ng-t op: 10px;f ont - si ze: 12px; f ont - wei ght : nor mal }

. DateHeader {border - bot t om: none; f ont -si ze: 15px;t ext - al i gn: l ef t ;margi n- t op: 20px; margi n- bot t om: 14px;paddi ng: 1px;paddi ng- l ef t : 17px; col or : gr ay;

f ont - f ami l y: t r ebuchet ms, ver dana, sans-ser i f ; }. Post Ti t l e{f ont - si ze: 18px; f ont -wei ght : bol d}. Post {paddi ng- l ef t : 20px; mar gi n-bot t om: 20px;t ext - i ndent : 10px;paddi ng- r i ght : 20px; l i ne- hei ght : 22px}. Post Footer {margi n- bot t om: 15px; margi n-l ef t : 0px;col or : bl ack; f ont - si ze: 10px}#l ef t cont ent {backgr ound- col or : whi t esmoke;border - r i ght : 2px dashed #000;

bor der - bot t om: 0px dashed #000; f l oat : l ef t ;paddi ng- bot t om: 20px;


7/22


mar gi n- r i ght : 15px; paddi ng: 0px; wi dt h: 67%;bor der - t op: 0px dashed #000}. Si deBar Ti t l e{f ont - wei ght : bol d; f ont -si ze: 18px}h1{f ont - si ze: 14px; paddi ng- t op: 10px}a{t ext - decor at i on: none}a: hover{border - bot t om: dashed 1px r ed}

#r i ght cont ent {f ont - si ze: 12px; hei ght : 100%;mar gi n- l ef t : 0px; t ext - t r ansf or m: none;paddi ng- r i ght : 10px; backgr ound-col or : whi t e; }. bl ogComment s{f ont - si ze: 15px; t ext -al i gn: l ef t ;

margi n- t op: 20px; margi n- bot t om: 14px;paddi ng: 1px;paddi ng- l ef t : 17px; col or : gr ay; f ont -f ami l y: t r ebuchetms, ver dana, sans- ser i f ; }. bl ogComment {mar gi n- t op: 10px; mar gi n-bot t om: 10px;col or : bl ack; t ext - i ndent : 10px; paddi ng-r i ght : 20px;l i ne- hei ght : 22px}. del et ed- comment {f ont - st yl e: i t al i c;col or : gr ay; }. byl i ne{margi n- bot t om: 20px; margi n-

l ef t : 0px;mar gi n- r i ght : 10px; col or : bl ack;

f ont - si ze: 10px; di spl ay: i nl i ne}#pr of i l e- cont ai ner { }. pr of i l e- dat abl ock { }. pr of i l e- i mg {di spl ay: i nl i ne; }. pr of i l e- i mg i mg {f l oat : l ef t ; mar gi n: 010px 0px 0;border : 4px sol i d #ccc; }

#pr of i l e- cont ai ner p { }#pr of i l e- cont ai ner . pr of i l e- t ext bl ock { }. pr of i l e- dat a st r ong {di spl ay: bl ock; }

Esta sección es la hoja de estilos, que describe los colores,las fuentes, los bordes y otras propiedades de la página. Si

desea obtener más información, consulte ¿Cómo puedo

cambiar los colores o las fuentes de mi plantilla? y ¿Qué

más puedo hacer con CSS?

Al final de esta primera sección aparece el código , que es extremadamente útil, ya que inserta

automáticamente y en un solo paso todos los metacódigos

que necesita para el blog.

Veamos ahora el cuerpo de la plantilla. Se trata de la parte

que vemos en la ventana del navegador al visualizar el blog.


8/22


El código es la parte que muestra el título de

nuestro blog. Le hemos añadido otro código alrededor para

crear un vínculo que permita volver a la página principal. El

código es el que proporciona la dirección.

Sin embargo, puesto que no deseamos tener que volver a la

página principal si ya estamos en ella, hemos incluido el

vínculo dentro de los códigos para que sólo

aparezca en las páginas de elementos.

Veamos ahora las entradas:

¶

comment s

Observe el código situado al principio de esta

sección. No tardaremos en encontrar el código

correspondiente. La información comprendida entre estos

dos códigos se repetirá en todas las entradas de su página.

Todos los códigos que incluyen el símbolo del dólar ($) enesta sección hacen referencia a información que será dife-

rente en cada entrada. Por ejemplo, im-

prime el título y imprime todo el texto

de la entrada.

Los códigos sin el símbolo dólar indican si una informaciónconcreta debe o no imprimirse. Por ejemplo,

y incluyen código y tex-


9/22


to que sólo aparecerán si el elemento presenta un título.

Igualmente, el texto comprendido entre

y sólo

aparecerá en la página principal o en páginas de archivo.

Utilizamos este código para delimitar los vínculos de co-

mentarios, dado que no es necesario mostrarlos en las pá-

ginas de elementos.

Hablando de comentarios, necesitamos un código que nos

permita mostrar los comentarios de las entradas que con-

tienen algunos. Lo veremos a continuación. Recuerde que

todavía estamos analizando los códigos , porque

los comentarios hacen referencia a entradas individuales.

Coment ar i os:

#

ent r ada de :


10/22


permite añadir un nuevo comentario. Para obtener más de-

talles sobre todos los códigos de comentario, consulte este

artículo.

Ésta es toda la información referente a la sección principal

de la plantilla. Veamos ahora la columna lateral.

El código es parecido al código

que hemos visto anteriormente. Su función

es mostrar la descripción del blog.

I NFORMACI ÓNPERSONAL

Nombr e:

Ubi caci ón:

Ver mi per -f i l

Esta sección contiene datos de su perfil, incluido un vínculo

a la página que contiene toda la información de perfil. Todos

estos códigos tienen nombres bastante descriptivos, como

, lo que permite adivinar la in-

formación que mostrarán.

Otra utilidad que puede incluir en la columna lateral es una

lista de todos los vínculos de archivo.

ARCHI VOS

Los códigos también están asociados

con la repetición. Imprimen la línea de código que delimitanen cada archivo.


11/22


Si desea incluir algún elemento más en su columna lateral

(otros vínculos, más texto, etc.), puede añadir el código

aquí. Puede copiar el formato del título ARCHIVOS, si des-

ea crear más cabeceras.

Obviamente, al final de la plantilla dispone del ubicuo botón

Asistido por Blogger:

Y aquí termina nuestra plantilla. Si desea utilizarla o modifi-

carla, la encontrará en la lista correspondiente con el nom-bre "Tekka".


12/22


3. Lista de códigos de plantilla

A continuación ofrecemos una lista de todos los códigos de

plantilla de Blogger que puede copiar y pegar al piratear

plantillas. Dichos códigos se describen con mayor detalle en

Códigos de plantilla de Blogger, definidos.

:

códigos :


13/22



14/22


4. ¿Cuál es la función de los códigos de planti-lla de Blogger?

Blogger simplifica las actualizaciones en la web. Lo único

que deberá hacer es redactar la entrada y hacer clic en "pu-

blicar" para que la página se actualice. Cuando envía una

entrada a Blogger, la guardamos en nuestra base de datos.En este punto es donde actúan los códigos de Blogger indi-

cando a nuestro programa de publicación de blogs la infor-

mación que debe obtener de la base de datos para colocar-

la en la página. "Por favor, coloque el título aquí, la entrada

justo debajo y la fecha y la hora aquí y allí. Gracias". Todo

con una educación exquisita.El aspecto de los códigos de Blogger es como el de los có-

digos HTML, lo que facilita el trabajo a los usuarios más

avanzados que deseen personalizar una plantilla. Hay va-

rios tipos de códigos de Blogger, pero podemos diferenciar-

los en dos grandes grupos: los códigos de nivel de elemen-

to y los códigos de nivel de página. Los primeros hacen todo el trabajo sucio porque son los que

extraen la información de la base de datos de Blogger para

colocarla en la web. Se trata de la tarea más ardua, pero no

se preocupen: les hemos entrenado para trabajar duro. Re-

conocer un código de nivel de elemento es muy sencillo

porque son los que llevan el símbolo de dinero, como

(este código hará que se muestre el

nombre del autor del blog).

Los códigos de nivel de página se creen más atractivos que

los demás (aunque no lo son) porque están más relaciona-

dos con el diseño y la estructura de la página. Estos códi-

gos indican a los códigos de nivel de elemento cuándo y

dónde intervenir, por lo que preceden y siguen a estos últi-mos.

¿Ha visto cómo el código Blogger Archives autoriza la inter-vención de los dos que presentan el símbolo de dinero?

¡Qué mandón! De todos modos, ambos códigos se llevan

muy bien. No podemos quejarnos.

Además, también se entienden bien con los códigos HTML.

Los diseñadores de páginas web que deseen crear sus pro-pias plantillas de Blogger (o modificar nuestras plantillas

gratuitas) saben que pueden colocar códigos HTML alrede-

dor de nuestros códigos para darles el formato deseado.


15/22


En el ejemplo anterior, las cabeceras de fecha de cada en-

trada de blog se mostrarán en negrita y en un tamaño ma-

yor que el resto del texto de la página web porque el usuario

ha colocado los códigos (este código en len-

guaje HTML significa "mayor y más oscuro") alrededor del

código .

Ésta es sólo una pequeña muestra de los experimentos quepueden hacerse con los códigos HTML y los de Blogger.

Recuerde que no tiene por qué utilizar el código de su plan-

tilla. Por algo le ofrecemos un sinfín de diseños gratuitos.

Sin embargo, dispone de otras guías de aprendizaje por si

desea intentar crear su propia plantilla. Aquí tiene una suge-

rencia para cuando se ponga manos a la obra: antes deempezar, copie el código que se encuentra en la sección de

su plantilla y guárdelo como archivo de texto para que, en

caso de echarlo todo a perder, pueda recuperar lo que tenía

al principio. ¡Diviértase!


16/22


5. Códigos de comentario

Una plantilla contiene dos tipos de códigos de comentario.

Uno sólo crea los vínculos que los lectores ven junto a sus

entradas y en los que pueden hacer clic para hacerle un

comentario. El otro muestra los propios comentarios. Anali-

cemos estas dos partes por separado.En estos ejemplos se muestra la cantidad mínima de código

para los comentarios. Obviamente, puede añadirles el for-

mato que desee para que su aspecto esté en consonancia

con el resto de su blog.

Vínculos:El código siguiente imprimirá un vínculo titulado "X comen-

tarios", donde "X" indica el número de comentarios que ha

recibido su entrada hasta la fecha. Este vínculo debe colo-

carse entre los códigos y de sus en-

tradas y suele aparecer en la línea donde se hace constar el

nombre del autor.

coment ar i os

En primer lugar, observe los códigos que rodean a los demás.

Su misión es hacer que el resto del código sólo se muestre

en las entradas que tienen la opción de comentarios habili-

tada. El vínculo a permitirá

acceder a la página en la que podrá leer los comentarios

existentes y crear uno nuevo.

incluye el código

que abre el vínculo en una ventana emergente, si ha selec-

cionado la opción que así lo permita. Tenga en cuenta que

debe colocarse dentro del código de abertura . Final-

mente, simplemente mues-

tra el número de comentarios de dicha entrada. Puede in-

troducir el texto que desee en el lugar de "comentarios".

Comentarios:

Esta parte del código también se colocará entre los códigos

y , pero probablemente desee in-

cluirlos dentro de los códigos y ,

de modo que los comentarios sólo aparezcan en las pági-

nas de las entradas y no irrumpan desordenadamente en la

página principal de su blog.

Coment ar i os:


17/22


By , at

Publ i car un coment ar i o en l a ent r a-

da

Estos códigos están relacionados con el fragmento de códi-

go anterior. Una vez más, hemos incluido todos los códigos

dentro de para que las en-

tradas que no permiten hacer comentarios no impriman na-

da. También disponemos de como antes, para mostrar el número de comenta-

rios.

Los códigos delimitan la sección de

código que crea ciclos para mostrar cada comentario. Los

códigos , y muestran la infor-

mación que espera de ellos, con la ventaja añadida de que

el código de autor incluye un vínculo para acceder al perfil

de éste o a su página web, si existe. El código muestra el número de identificación

de cada comentario, lo que resulta útil para crear vínculos

perm., como los números de identificación de las entradas

normales.

Por último, hay dos pequeños códigos más que comple-mentan la funcionalidad.

inserta un botón de supresión en cada comentario, aunque

sólo si la persona que lo lee es el autor del comentario o un

administrador del blog, es decir, los únicos que pueden su-

primir comentarios. añade el vínculo

que permite realizar nuevos comentarios.


18/22


6. Códigos de perfil

Existen varios códigos que permiten mostrar información de

su perfil en su blog. Éstos son algunos:

: código "inteligente" que incorpo-

ra las funcionalidades de todos los códigos siguientes, lo

que significa que evitará la visualización de información queno figura en su perfil (o que no desea compartir). Si lo utiliza

en un blog de equipo, ofrecerá una lista de vínculos a los

perfiles de los miembros.

: su alias.

: su nombre de pila.: su apellido.

: su nombre y apellido.

: su dirección de correo electrónico.

: su ciudad, provincia o país.

: el texto que incluye información

sobre usted.

: la URL de la foto de su perfil.

: la URL de todo su perfil.

Ejemplo:

Éste es un sencillo ejemplo de cómo utilizar algunos de es-

tos códigos en su plantilla:

Nombr e:
Di r ecci ón:
I nf ormaci ón per sonal :

Ver t odomi per f i l

Éste es el aspecto que tendrá el blog una vez publicado:

Nombre: Joe Blogger

Dirección: Mountain View: California: Estados Unidos

Información personal: tengo mucha imaginación, soy

el ejemplo ideal de perfil de artículo de la Ayuda de

Blogger. A veces me siento solo e insignificante, pero

no tardo en acostumbrarme.


19/22


7. ¿Qué son los códigos condicionales?

Los códigos condicionales son códigos de plantilla de Blog-

ger que ofrecen mayor flexibilidad. Reciben el nombre de

códigos condicionales, porque permiten especificar cambios

en la plantilla que sólo se producen en determinadas cir-

cunstancias. Su funcionamiento es el siguiente: usted siguemanteniendo el código de plantilla de su blog en una ubica-

ción, pero coloca estos códigos condicionales alrededor del

texto que desea mostrar u ocultar en función de la página.

Los códigos condic ionales en acción

Supongamos que desea modificar su página de entrada e

incluir en ella un vínculo que permita regresar a su páginaprincipal para que, si un usuario accede a esta página de

entrada a partir de una búsqueda o un vínculo externo, pue-

da volver rápida y fácilmente a su página principal, que con-

tiene sus blogs más recientes.

¡ Vi si t emi úl t i mo bl og!

Dado que ha incluido este fragmento de código HTML de-

ntro del código condicional, la única circunstancia que pro-

vocará la aparición de este vínculo será la visita de una de

sus páginas de entrada individuales por parte de un usuario.

El vínculo no se mostrará en su página principal. Asimismo,

no dude en utilizar los mismos códigos varias veces en la

plantilla, allí donde sea necesario. Increíble, ¿verdad?


20/22


8. Códigos de retroceso

Una plantilla contiene dos tipos de códigos que hacen refe-

rencia a vínculos de retroceso. Uno solo crea los vínculos

que los lectores ven junto a sus entradas. El otro muestra

los propios vínculos. Analicemos estas dos partes por sepa-

rado.Indicador de vínculo de retroceso:

El código siguiente imprimirá un vínculo titulado "Vínculos a

esta entrada". Este vínculo debe colocarse entre los códi-

gos y de sus entradas y le reco-

mendamos que lo sitúe en la línea donde se hace constar el

nombre del autor y los vínculos de los comentarios.

Ví ncul os a est a ent r ada

En primer lugar, observe los códigos

que rodean a los demás. Su

misión es hacer que el resto del código sólo se muestre en

las entradas que tienen la opción de vínculos de retroceso

habilitada. A continuación, el código del vínculo indica la

página de la entrada donde se recogen de forma detalladalos vínculos de retroceso. Puede introducir el texto que des-

ee en el lugar de "vínculos a esta entrada".

Visualización de los v ínculos de retroceso:

Esta parte del código también se colocará entre los códigos

y , pero probablemente desee in-

cluirlos dentro de los códigos y ,

de modo que los vínculos de retroceso sólo aparezcan en

las páginas de sus entradas y no irrumpan desordenada-

mente en la página principal de su blog.

Ví ncul os a est a ent r ada:

post ed by @


21/22


Una vez más, hemos incluido todos los códigos dentro de

para que las entradas que

no permiten los vínculos de retroceso no impriman nada.

Los códigos delimitan la sección de

código que crea ciclos para mostrar cada vínculo de retro-

ceso. Los códigos y muestran la información que espera

de ellos y el código muestra un

pequeño fragmento de texto de la página en cuestión.Por último, hay dos pequeños códigos más que comple-

mentan la funcionalidad. in-

serta un botón de supresión en cada vínculo de retroceso,

aunque sólo si la persona que lo lee es un administrador del

blog, es decir, el único que puede suprimir vínculos de re-

troceso. El botón Suprimir funciona de la misma maneraque éste para los comentarios. crea un vínculo que conduce a BlogThis!, que los lec-

tores pueden utilizar para redactar sus propias entradas de

blog vinculadas a la suya.


22/22


1. Códigos de plantilla definidos .......................................2

Códigos de Blogger definidos: .........................................2

Códigos de la lista de archivos de la columna lateral,......4

Códigos condicionales ..................................................... 4

Código de la entrada anterior...........................................4

Código de comentario ...................................................... 4

Código de perfil, explicado en el artículo sobre códigos de

perfil: ................................................................................5

2. Descripción detallada de las plantillas..........................6

3.

Lista de códigos de plantilla........................................12

:.............................................................12

códigos :.............................................................12

4. ¿Cuál es la función de los códigos de plantilla de

Blogger? ............................................................................14

5. Códigos de comentario...............................................16

Vínculos: ........................................................................16

Comentarios:..................................................................16

6. Códigos de perfil.........................................................18

7.

¿Qué son los códigos condicionales? ........................19

Los códigos condicionales en acción ............................. 19

8. Códigos de retroceso ................................................. 20

Indicador de vínculo de retroceso: ................................. 20

Visualización de los vínculos de retroceso: ................... 20

Manual Para Personalizar Plantillas Blogger.

Documents

Transcript of Manual Para Personalizar Plantillas Blogger.