Cómo editar una plantilla Blogspot en Dreamweaver

Escrito por Vail Joy | Traducido por Xochitl Gutierrez Cervantes

Las plantillas Blogspot y Blogger usan el lenguaje CSS y HTML como etiquetas de estilo Blogger para mostrar información.

Las plantillas para Blogspot, también conocidas como modelos Blogger, son archivos individuales que contienen una estructura,estilo y funcionalidad para controlar la apariencia de tu blogGoogle. Son similares a los archivos tradicionales HTML debido a que utilizan las etiquetas de este lenguaje y hojas de estilo, y apoyan el uso limitado de JavaScript. En lo que difieren es que una plantilla de Blogspot pone toda esta información en un solo archivo, mientras que la tradicional puede utilizar varios. Las plantillas Blogspot también hacen uso de códigos especiales del modelo Blogger que sirven para tomar bloques de texto, enlaces u otras funciones que se puedan establecer en el área de tu cuenta Blogger. Editar estas plantillas en Dreamweaver requiere de un conocimiento básico de HTML, ya que no serás capaz de utilizar el editor visual para ver el diseño completo.

Instrucciones

1. 1
   Haz clic en "Abrir archivo" desde la pantalla de inicio de Dreamweaver y navega hasta la ubicación del archivo de tu plantilla guardada. Éstas deben ser archivos XML. Si has descargado una plantilla como un archivo ZIP, debes descomprimirlo antes de abrirlo. El archivo se abrirá en el editor de códigos de forma predeterminada.
2. 2
   Familiarízate con la forma en que está estructurada la plantilla. A continuación la declaración de HTML y del texto, "skin" comenzará en la etiqueta de Blogger "<b:skin>". Debajo de éste vienen las definiciones de las variables y de los estilos CSS. Todos los estilos de la fuente y su color se definen generalmente usando variables en lugar de enumerar las clases CSS. Cambia la configuración "preestablecida" y su "valor" donde lo requieras. Asegúrate de que tus nuevos valores terminen con un punto y coma. Recuerda incluir esta puntuación dentro de las comillas. Por ejemplo, la siguiente variable establece el color de fondo a negro: <Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#000000">


3. 3
   Editar o añadir tus estilos CSS. Los estilos siguen la estructura tradicional, pero no están contenidos dentro de las etiquetas <style>. Por ejemplo, para cambiar el ancho de la barra lateral derecha a 120 píxeles, debes editar la declaración de estilo siguiente o escribir algo parecido: #rightsidebar { width: 120px; } Cuando llegues al final del estilo, ten cuidado de no borrar o modificar el cierre "skin" de la etiqueta Blogger, el cual se verá así: </b:skin>
4. 4
   Edita la porción HTML del documento, añadiendo, cambiando o eliminando las etiquetas HTML donde lo desees. Si vas a crear nuevos estilos CSS, añade los valores de clase o ID de las etiquetas HTML aquí. También puedes agregar imágenes mediante el uso de la ruta completa URL donde se almacenarán; sin embargo, puede ser más fácil añadir elementos visuales usando el editor de plantillas en el área de administración de tu Blogger una vez que actives tu plantilla.
5. 5
   Revisa las áreas de contenido del código HTML para las etiquetas de bloques de Blogger. Puedes añadir, cambiar o borrar estas líneas para afectar la estructura y función de tu blog. Si los mueves, asegúrate de copiar y pegar todo el bloque de etiquetas para conservar su funcionalidad. Blogger te ofrece una excelente referencia para lo que cada etiqueta realiza (ve la sección de Recursos).
6. 6
   Guarda el archivo haciendo clic en "Archivo>Guardar" y asegúrate de mantener el tipo de archivo XML. Sube la plantilla que acabas de editar usando tu página de administrador de Blogger y después de activarla, detente a ver los resultados. Utiliza el editor de plantillas para cualquier ajuste o cambio que sea necesario.