Download - Manual Para Personalizar Plantillas Blogger
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
1/22
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
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:
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
3/22
Plantillas Blogger 3
(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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
4/22
Plantillas Blogger 4
: 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):
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
5/22
Plantillas Blogger 5
Código de perfil, explicado en el artículo sobre códigosde perfil:
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
6/22
Plantillas Blogger 6
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;
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
7/22
Plantillas Blogger 7
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/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
8/22
Plantillas Blogger 8
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-
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
9/22
Plantillas Blogger 9
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 :
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
10/22
Plantillas Blogger 10
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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
11/22
Plantillas Blogger 11
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".
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
12/22
Plantillas Blogger 12
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 :
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
13/22
Plantillas Blogger 13
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
14/22
Plantillas Blogger 14
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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
15/22
Plantillas Blogger 15
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!
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
16/22
Plantillas Blogger 16
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:
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
17/22
Plantillas Blogger 17
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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
18/22
Plantillas Blogger 18
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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
19/22
Plantillas Blogger 19
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?
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
20/22
Plantillas Blogger 20
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 @
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
21/22
Plantillas Blogger 21
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.
-
8/16/2019 Manual Para Personalizar Plantillas Blogger.www.FREELIBROS.com
22/22
Plantillas Blogger 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