HTML

Instalar y Editar Plantillas para Blogger. Tercera Parte

Editando una plantilla en Blogger

logo blogger fondo azul

Terminando con esta serie de entradas sobre cómo editar plantillas en Blogger, vamos a ver un ejemplo práctico de como se edita una plantilla completamente desde la edición HTML.

Primero tenemos que usar las herramientas presentadas en esta entrada, y se recomienda seguir las sugerencias.

P.D Para usuarios sin ninguna experiencia previa recomiendo la Primera Parte, donde se verá lo básico para editar plantillas en blogger.

La plantilla que vamos a usar en este ejemplo solo se le puede editar el texto, el color, y su funcionamiento es programable desde el código HTML, por lo que servirá bastante bien para el objetivo de ser ejemplo. La plantilla original la encontramos en el sitio Spicytricks, y se vería de este modo (con contenido agregado) Bresponsive, y cuando la editamos la podemos dejar de este otro modo: Portal de Prueba (con nuevo contenido).

Todas las letras en inglés son editables, pero solo hay un inconveniente que es en la parte superior donde se colocan cuatro imágenes, porque el comments que vemos debajo de las imágenes para ser editado requiere de un cambio profundo de la plantilla, posiblemente una traducción completa. Luego veremos una alternativa.



Vamos a comenzar:

Paso 1: Abrimos el archivo XML con la plantilla en el editor de Blogger (si lo habíamos subido en un blog de Blogger) o en Notepad++ para editarlo antes de subirlo a Blogger.

Paso 2: Dentro del editor usamos CTRL+F para que nos salga un buscador en el que iremos colocando lo que queremos encontrar dentro del código, y solo con un Enter nos llevará.

Paso 3: Comenzamos por editar los colores, y para eso usamos Colorzilla que nos ayudará a detectar en la plantilla (no en el código de esta por supuesto) los colores que queremos editar. Si los encabezados son negros entonces Colorzilla nos dará #000000; eso nos ayudará a encontrar la ubicación dentro del código de la parte que queremos editar.
Muchas veces los colores se repitan por eso es recomendable hacer pruebas de la plantilla para descartar una equivocación.
Algunas veces los colores dentro de la plantilla no se encuentran en hexadecimales sino que se usa su nombre en inglés, como white para blanco, black para negro, o gray para gris, por lo que podemos usar esos nombres dentro del buscador para encontrar esas partes.

Paso 4: Editamos el texto, que puede ser mas rápido y fácil que los colores. Tenemos que colocar en el buscador la palabra que queremos editar, por ejemplo: si queremos cambiar el título del blog debemos colocar su nombre en el buscador y cuando nos lleve a este lo reemplazamos por el que queremos.
Debemos tener precaución de no borrar lo que este en rojo, verde, o que no se encuentre en letra negra corriente. 
Al editar el texto y los colores gran parte del trabajo ya estará hecho, por lo menos lo mas largo.

Paso 5: La plantilla Bresponsive trabaja con etiquetas o tags, por eso tenemos que hacer que cada entrada se identifique con una etiqueta. Permite colocar un mínimo de 13 etiquetas -aunque se pueden agregar mas, o restar-.
Colocamos en el buscador hom_cat1; veremos que aparece una lista con hom_cat (hom_cat1, hom_cat2, hom_cat3, etc.), los hom_cat son para colocar las etiquetas de las cuatro entradas que van en la parte superior, y donde dice title es para incluir el nombre que queremos darle, por ejemplo: si queremos que la primara entrada sea sobre mascotas colocamos en hom_cat1 la etiqueta mascota o mascotas (dependiendo como lo tenemos en las entradas); después tenemos que buscar START Widget e ir reemplazando los nombres que están junto a "YOU-URL"en el mismo orden en que estaban las etiquetas en hom_cat; veremos que en START Widget el código no se cierra sin incluir una quinta opción donde se puede leer fleex slider slider, esa opción es para colocar el nombre de un par de galerías deslizantes de las que hablaremos ahora.
Para hacer lo mismo en el footer buscamos footer_cat, o hom_cat1 (se encuentra debajo de la lista de hom_cat) y vamos colocando las etiquetas que queremos que salgan en el footer; es importante llenar el campo de title (footer_cat title) con el nombre con el que queremos que se vea en el footer.
side_cat es para los dos widgets del lado derecho que están sobre el de Tweet y publicidad, y debemos seguir el mismo procedimiento que seguimos con footer_cat.
Advertencia: Lo último que debemos reemplazar es el campo que se encuentra en la parte superior de hom_cat featured slider, ese campo es para activar una galería de imágenes deslizantes, pero al activarse puede traer problemas al código que impedirá que ingresemos a la edición desde Blogger o que podamos hacer una copia de seguridad. Cuando hayamos editado este último campo y activado la galería deslizante, podemos seguir ingresando usando la cuarta sugerencia

Paso 6: Para reemplazar los banners como el que se encuentra en la parte superior a la derecha vamos a topbanner, donde se encuentra una url en jpg que es el formato de la imagen, y podemos dejar el campo en blanco o colocar otra imagen.

Paso 7: Para colocar nuestras direcciones de redes sociales solo tenemos que buscar las url que se encuentran en la plantilla y cambiarlas por las nuestras.

Paso 8: El perfil de autor como el que aparece al terminar esta entrada en Sobre : WillyOs lo podemos reemplazar encontrando el nombre del autor que se encuentra por defecto en la plantilla.

Paso 9: Desactivar la vista desde móvil, desde Plantilla y hacemos clic en el engrane y seleccionamos No, mostrar la plantilla desde ordenadores para dispositivos móviles
Las plantillas responsive son visibles desde cualquier dispositivo debido a su código adaptable.

Paso 10: Para solucionar lo de Comments en las cuatro entradas superiores tenemos la alternativa de reemplazar todos los comments de la plantilla por la palabra que queremos que aparezca, como puede ser comentarios. Pero tiene un efecto secundario poco deseable, que es que las entradas no se acortarán en la parte inferior, pero la alternativa que nos queda es cortar las entradas al modo clásico usando el salto de línea en la parte que queremos dividir.

Con estos nueve pasos -o diez- hemos terminado de editar la plantilla Bresponsive, y todo el proceso puede hacerse en menos de una hora, una plantilla que estéticamente supera a la mayoría de alternativas gratuitas y está optimizada para buscadores, como también podemos ver que permite colocar publicidad en la parte superior, media, y casi al final.
Publicar un comentario

Google+

Y tú ¿Eres un webmaster?