Читать книгу: «Aprender a crear su primera página web con 100 ejercicios prácticos», страница 4
| 018 | Modificar las plantillas dinámicas |
AUNQUE AL PRINCIPIO LAS PLANTULAS DINÁMICAS no admitían ni gadgets ni personalización, durante el año 2011 Google incorporó estas prestaciones e hizo posible, entre otras cosas, modificar el fondo, los colores y las fuentes del blog.
1 En el Diseñador de plantillas de Blogger, haga clic en la pestaña Fondo.
Las plantillas de Blogger, tanto las dinámicas como las estáticas, permiten escoger una imagen de una amplia galería, así como subir cualquier imagen para utilizarla como fondo, siempre que pese menos de 300 k.
2 Puede cambiar la combinación de colores de la plantilla. Pruebe uno de los temas sugeridos que le agrade.
3 Pulse en el botón de punta de flecha que está en la miniatura Imagen de fondo.
4 Puede escoger alguna opción de la extensa galería de imágenes que ofrece Blogger clasificadas en categorías o cargar una fotografía de su equipo. Pulse la pestaña Subir imagen.
5 Ubique en su ordenador una imagen que pese menos de 300 K o, si lo prefiere, descargue de nuestra web la imagen Girasol fondo.jpg y úsela para tal fin. Una vez se halla cargado, pulse el botón Finalizar.
6 La imagen se aplica al fondo. Despliegue el menú que muestra seleccionada la opción Mosaico. Puede escoger si la imagen se debe repetir para llenar el fondo o no, y de qué manera. También si debe desplazarse con la página o no y cómo debe alinearse.
Pulse ahora la pestaña Avanzado del Diseñador.
7 Mantenga seleccionada en el segundo panel la categoría Página y escoja alguna fuente para el texto de las entradas.
8 La categoría Header se refiere a la barra de fondo del título, pero como estamos usando una fotografía, no podemos modificarla. La categoría Header Bar modifica la barra de menús del blog y le permite cambiar su color de fondo, la fuente y el color de los textos. Cambie lo que le parezca conveniente.
9 En el apartado Enlaces puede establecer que el color de los vínculos cambie al colocar el cursor encima y después de que han sido visitados por el usuario. Active esta ficha y modifique los colores establecidos.
10 Puede cambiar el color y la tipografía del título. Escoja esta opción y haga una elección que contraste contra el fondo.
11 Despliegue la ficha Título de entrada, realice los cambios que prefiera
y al terminar, pulse los botones Aplicar al blog y ver blog.Si pulsa sobre la muestra de color de alguno de los selectores, se despliega un panel en el que puede crear su propio color o establecer transparencias.
IMPORTANTE
En la categoría Avanzado del Diseñador de plantillas, el apartado Date Ribbon permite modificar la cinta que indica la fecha de cada entrada. Si desea eliminarlas de todo el blog, utilice el siguiente código en el apartado Añadir CSS: .ribbon {display:none !important;}
| 019 | Modificar código CSS de plantilla dinámica |
BLOGGER TAMBIÉN PERMITE REALIZAR personalizaciones sobre las plantillas dinámicas utilizando código CSS, desde el Diseñador de plantillas de Blogger. En este ejercicio usaremos esta prestación para crear una cabecera personalizada para nuestro blog.
IMPORTANTE
Las siglas CSS vienen del inglés Cascading Style Sheets (Hojas de estilo en cascada) e identifican un lenguaje utilizado para definir el estilo de un documento, independientemente de su estructura.
1 Para este ejercicio puede descargar de nuestra web el archivo cabecera.jpg o crear su propia cabecera. Nuestra imagen mide 110 por 182 píxeles y tiene una resolución de 72.
2 En el Editor de plantillas, dentro de la categoría Fondo, pulse el vínculo Eliminar imagen, del apartado Imagen de fondo.
Una vez ha insertado una imagen como fondo, puede eliminarla en cualquier momento.El valor !important hace que el estilo sobrescriba a la plantilla.La imagen cargada se encuentra en la carpeta Álbumes del apartado Fotos.
3 En la categoría Avanzado, escoja la opción Añadir CSS.
4 En este panel puede añadir códigos personalizados. Lo que haremos será añadir un código para insertar una cabecera personalizada. Escriba el siguiente código, o descárguelo y cópielo del archivo Código cabecera que encontrará en nuestra web:.header-bar {background-color:#536fa8 !important; /* Color fondo */background-image:url(URL IMAGEN DE CABECERA) !important;background-repeat:no-repeat;height:148px !important; /* Altura de cabecera */border-bottom:20px solid #f07300; /* Cinta inferior */}#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}#header a:hover {text-decoration:none !important;}#main {margin-top:125px !important;} /* Distancia entre la cabecera y el contenido */
5 En una nueva ventana, acceda a su perfil Google, pulse en la pestaña Fotos
6 Cargue la imagen de la cabecera con el método que prefiera y pulse el botón Create álbum.
7 Una vez cargada, pulse el botón Cancel del cuadro Share.
8 En la barra lateral escoja la opción Photos
y en la cabecera de esta pantalla pulse la opción Albums,
acceda a la foto, pulse con el botón secundario del ratón sobre ella y escoja la opción Copiar ruta de la imagen.
Una vez aloja una fotografía en un álbum, dispone de una URL que puede usar para otros fines.Hemos usado como color de fondo de la cabecera el azul del cielo de la imagen (#536fa8).
9 Regrese al Diseñador de plantillas y, en el código creado, sustituya el texto URL IMAGEN CABECERA por la ruta de la imagen que ha cargado para tal fin.
10 Al terminar, ya debe ver el cambio en la parte la pantalla de previsualización. Pulse el botón Aplicar al blog y luego el vínculo Ver blog, para comprobar el resultado.
IMPORTANTE
El código que presentamos en este ejercicio permite modificar las medidas de la altura de cabecera, cinta inferior y distancia entre la cabecera y el contenido, indicadas en píxeles, así como los colores de fondo y de la cinta inferior, cuyos códigos vienen precedidos por un signo numeral (#).
| 020 | Recuperar plantilla y editar plantilla estática |
SI ESCOGE UNA DE LAS PLANTILLAS estáticas de Blogger, perderá en dinamismo pero ganará en control y personalidad. Para comenzar, las opciones Avanzadas se amplían de forma considerable así como las opciones de diseños disponibles.
1 Desde el Escritorio de su blog, acceda al apartado Plantillas.
2 Lo primero que haremos será recuperar la plantilla original. Pulse el botón Crear copia de seguridad / Restablecer.
3 Pulse el botó Examinar del cuadro de diálogo del mismo nombre, ubique el archivo de seguridad que creó ejercicios atrás y pulse el botón Abrir.
4 Pulse el botón Subir del cuadro de diálogo
5 Coloque el cursor sobre alguna de las plantillas distintas a las dinámicas y pulse el vínculo Personalizar.
6 Igual que con las vistas dinámicas, le lleva al Diseñador de plantillas. Haga los cambios de fondo que desee.
Para este ejemplo hemos usado uno de los fondos de Blogger. Las plantillas estáticas de Blogger no cuentan con los espectaculares efectos de las vistas dinámicas pero en cambio le brindan más control y libertad al usuario. Además, permiten más gadgets.
7 Acceda al apartado Diseño.
8 Dispone de varios diseños, tanto para el blog como para las páginas, que puede aplicar pulsando sobre sus esquemas. En el área de previsualización puede ver el diseño aplicado al blog y modificarlo. Pulse en el enlace Editar de la cabecera.
9 Este cuadro de diálogo le permite cambiar el texto del blog y la descripción, así como cargar una imagen para su cabecera desde su ordenador o desde una URL. Además puede indicar si sustituirá estos textos o cuál será su ubicación respecto a estos. Añada una descripción,
10 Escoja alguna plantilla que le agrade y active el apartado Avanzado.
11 Dispone de más apartados que en el caso de las plantillas dinámicas con la ventaja de que al seleccionar cualquiera de ellos, el elemento al que se refiere se muestra rodeado por una línea punteada. Algunos, sin embargo, se refieren a elementos que no tiene en el blog aún. Realice los cambios de color y fuente que desee y, al terminar, pulse el botón Aplicar a blog.
12 Pulse en botón de punta de flecha de la barra que separa el Diseñador del área de previsualización.
13 Se oculta el diseñador, proporcionando así una vista completa del blog.
IMPORTANTE
Al modificar la plantilla del blog, se modifica también la plantilla para móviles de forma automática. Si desea modificar la plantilla de los móviles de forma independiente, pulse en el icono que está bajo la miniatura. Podrá escoger una plantilla distinta para el móvil.
| 021 | Configurar comentarios |
BLOGGER LE PERMITE GESTIONAR SUS COMENTARIOS: Puede decidir si su blog admite comentarios de cualquiera o sólo de ciertos usuarios registrados, de qué forma se deben mostrar y si requieren moderación, entre otros aspectos.
IMPORTANTE
OpenID es un servicio de identificación que le proporciona una URL que le identifica y le facilita una forma de acceso, sin necesidad de registrarse, a los sitios asociados al servicio. Puede crear su cuenta desde el sitio openid.es o desde openid.net.
1 Para este ejercicio lo ideal será que consiga, si no los tiene, algunos comentarios en su blog. Compártalo con amigas y amigos y pídales que le dejen su opinión. Por defecto, Blogger sólo deja publicar comentarios a usuarios de cuentas Google, LiveJournal, TypePad, AIM o OpenID
2 Acceda al escritorio de su blog, muestre el apartado Configuración y escoja la categoría Entradas y comentarios.
3 Aquí puede establecer ciertos criterios para estos dos elementos. Si pulsa en el vínculo Añadir del campo Plantilla de entrada, se abre una cada que le permite introducir un código que se aplicará cada vez que escriba una entrada. La opción Mostrar imágenes en el Lightbox, por su parte, deshabilita la función que expande una imagen en una ventana emergente. Finalmente, para terminar con las opciones de entradas, puede hacer que el cuadro Share no se abra cada vez que publica un post. Nosotros lo haremos.
4 En cuanto a los comentarios, puede establecer que se muestren bajo cada entrada y en la misma página, opción seleccionada por defecto, que se muestren en una ventana emergente o a página entera, o que se oculten. Escoja la opción que prefiera.
5 También puede determinar de qué tipo de usuarios admitirá comentarios su blog. Aunque sea de forma provisional, escoja la opción Cualquiera.
6 En el campo Moderación de comentarios, escoja la opción Siempre, para que cada mensaje pueda revisar todo mensaje antes de su publicación.
Mantenga seleccionada la opción Sí en el campo Verificación de comentarios y la opción Ocultar, del campo Mostrar enlaces de retroceso.
7 También puede añadir un mensaje para el campo de comentarios. Hágalo ahora
8 Pulse en enlace a comentarios de alguna de las entradas,
introduzca un comentario
9 Automáticamente aparece su firma.
10 De momento no es más el autor del blog. Pase al ejercicio siguiente sin volver a iniciar sesión en Blogger.
| 022 | Administrar comentarios |
UNA VEZ SE HAN HECHO COMENTARIOS en su blog, tiene toda la libertad de administrarlos. Puede eliminar su contenido conservando la firma del autor más una notificación de la acción, puede borrarlo por completo o marcarlo como spam, entre otras cosas.
IMPORTANTE
Tan importante como escribir entradas es responder los comentarios de su blog (y comentar los blogs de terceros). Sin embargo, muchos usuarios comentan entradas buscando sólo vender, insultar o provocar. Borre inmediatamente cualquier comentario con insultos o contenido violento, así como los llamados comentarios spam que sólo buscan generar visitas a otro sitio o ventas, ignore los comentarios provocadores y vacíos y, sobre todo, nunca pierda el juicio en su blog.
1 Aún sin volver a iniciar sesión con su usuario de Google, introduzca un nuevo comentario en alguna entrada de su blog, pero esta vez despliegue el menú Publicar como y escoja la opción Anónimo.
2 Gracias a la opción Mostrar verificación de palabras, se le pide que escriba la palabra de verificación. Hágalo ahora.
3 Como activó la verificación de comentarios, se le informa que la publicación no será inmediata.
4 Introduzca algún comentario anónimo que incluya la URL de otra página web pero escoja la opción Nombre/URL del menú Publica como, introduzca alguna firma
5 Haga algún último comentario y firme como Saboteador en este caso.
6 Finalmente, acceda de nuevo a su cuenta Blogger, luego al escritorio de su blog y, en este, a la ficha Comentarios.
7 Se muestran el apartado Publicados que, en este caso, son aquellos que haya sido publicados antes de modificar la configuración del blog y el que escribió usted mismo hace un momento. Puede ver en el extremo derecho los nombres de los autores.
8 ¿Verdad que no desea publicar los comentarios de un usuario que firma como Saboteador? Coloque el puntero del ratón sobre éste y pulse sobre la opción Spam que así aparece.
9 Muestre las opciones de los dos comentarios restantes, pero escoja la llamada Publicar.
10 Pulse en la pestaña Spam y compruebe las opciones de la entrada que aquí se encuentra.
11 La opción No es spam la publica directamente. Selecciónela con un clic.
12 Abra la carpeta Publicadas, coloque el cursor sobre el comentario de Saboteador y pulse la opción Eliminar contenido.
13 Puede seleccionar varias entradas a la vez y aplicar a todas las siguientes acciones: Eliminar contenido, Suprimir y Spam, pues están disponibles también en la cabecera.
y compruebe también que los otros comentarios ya pueden visualizarse correctamente.Al eliminar sólo el contenido del comentario, se conserva su caja, fecha y la identidad del autor. Incluso se permite responder al comentario, ya inexistente.
IMPORTANTE
Si está seleccionada la opción de configuración Ocultar del comando Mostrar enlace de retroceso, como es nuestro caso, no se creará un vínculo a ninguna URL que se incluya en un comentario.
| 023 | Añadir páginas a tu blog de Blogger |
LAS PÁGINAS DE BLOGGER SON ACCESIBLES desde cualquier parte del blog con un clic. Conviene incluir páginas con información sobre el o los autores, contacto, políticas del sitio o condiciones aunque puede crear páginas con cualquier contenido.
IMPORTANTE
Las páginas no tienen fecha de publicación, ubicación, ni admiten etiquetas.
1 Pulse la pestaña Páginas del Escritorio de su blog.
2 Ahora sólo tiene la página principal.
3 Se abre el Editor de páginas donde puede crear cualquier tipo de contenido. Crearemos en este caso una página sobre el autor. Cree un título, un pequeño párrafo biográfico y agregue una fotografía, tal como lo haría en una entrada.
4 Compartiremos un pequeño truco: Acceda a la web http://es.foxyform.com y complete el sencillo formulario que se presenta.
5 Al pulsar el botón Crear formulario se le presenta un código HTML que define un formulario de contacto. Cuando termine el proceso, copie el código generado
6 Pulse en la pestaña HTML, lo que le mostrará el código de su página, pulse la tecla Retorno al final de la última línea del código y pegue en este punto el código copiado.
7 Vuelva a la vista Redactar y compruebe el resultado.
8 Gracias a este formulario no tendrá que publicar su dirección de correo electrónico, lo que le haría presa fácil del spam. Además, generalmente aumenta el tráfico de mensajes pues el proceso es más simple para los usuarios. Despliegue el apartado Configuración de la página y elimine los comentarios.
9 Asegúrese de haber colocado un título y haga clic en el botón Publicar.
10 En la ficha de Páginas de Blogger puede ver la página que ha creado. Cree una tercera página de prueba, con cualquier información.
11 Despliegue el menú Mostrar páginas como, seleccione la opción Pestañas principales y pulse el botón Guardar disposición.
12 Puede ver una nueva banda que contiene las tres pestañas. Pulse en cada una de ellas para ver su aspecto.
13 Regrese a Blogger y cambie la opción Mostrar páginas como por Enlaces laterales. Guarde los cambios y visualice de nuevo.
IMPORTANTE
Si pulsa el vínculo Editar, que se encuentra bajo el nombre de la página principal en la ficha Páginas, se abre una ventana emergente en la que puede cambiar el nombre de ésta por cualquier otro.
| 024 | Controlar los feeds de tu blog |
LOS FEEDS HACEN QUE TUS LECTORES reciban las actualizaciones de tu blog en otro sitio, llamado agregador de feeds, en el que concentran los contenidos de todos los blogs que siguen. Facilitan, por tanto, el seguimiento de tu blog.
IMPORTANTE
Los feeds pueden permitir que sus entradas sean publicadas en otros sitios como Facebook o que sus imágenes de Flickr sean publicadas en su blog.
1 Pulse el botón Ver blog, de Blogger y vaya al final de su blog.
2 Encontrará el vínculo Suscribirse a: Entradas (Atom).
y pulse el botón Suscribirse ahora a modo de demostración. Existen dos estándar habitualmente utilizados para los feeds, son los llamados RSS y Atom.
3 La opción Google permite a sus usuarios escoger entre recibir los feeds en la página principal de Google o en Google Reader. En la imagen
4 Ahora veremos cómo añadir a su plantilla un icono de feed junto al vínculo, para que destaque más. Acceda al Editor de plantillas de su blog.
5 Pulse en la pestaña Avanzado, pulse la opción Añadir CSS
6 Las líneas dos y tres indican la ubicación del vínculo y la dirección URL debe indicar dónde ha alojado el icono. Puede descargar de nuestra web el que hemos usado para este ejemplo (icono feeds 25). Compruebe el efecto,
7 Pulse la pestaña Configuración y despliegue la categoría Otros.
8 El primer apartado controla precisamente los feeds del sitio. En el menú Permitir feed del sitio, la opción Completo distribuye todo el contenido de las entradas. También puede hacer que se distribuyan sólo hasta el salto de línea o los primeros caracteres (aproximadamente 400) con la opción Corto. Escoja la opción que prefiera.
9 Puede añadir también un pie que aparezca al final de cada feed de entradas. Pulse en el vínculo Añadir y, en el cuadro de texto que se abre, añada un texto, si le parece que puede tener alguna utilidad.
10 Finalmente pulse el vínculo Guardar configuración.
IMPORTANTE
Sus lectores también podrán suscribirse a su blog directamente desde sus agregadores de feeds, introduciendo la URL de su sitio, claro que al poner un vínculo para ello, les hace más fácil el proceso.
Бесплатный фрагмент закончился.
Начислим
+22
Покупайте книги и получайте бонусы в Литрес, Читай-городе и Буквоеде.
Участвовать в бонусной программе
