¡Hola, queridos lectores!

Hace ya un tiempo les pregunté si querían ver algo sobre diseños de blogs aquí, y respuesta fue que si, y vaya, me lo han estado pidiendo mucho.

He querido empezar con Blogger ya que es la plataforma que la mayoría de ustedes usa o que pretende usar, obviamente voy a estar sacando tutoriales para WordPress, dado que es la plataforma en a que esta el blog y tengo más conocimiento (y experiencia).

Okay, primero que nada les quiero recomendar una página – que seguramente muchos de ustedes ya han de conocer – en donde podrán encontrar plantillas para blogger totalmente gratis, quizá el único inconveniente es que no puedes personalizar el «foot» como tu quieras, pero es totalmente entendible dado que alguien más lo hizo y no te costó ni un solo centavo a ti.

Antes de empezar de lleno con esto, quiero aclarar que voy a estar utilizando un blog que nunca inicié, Dársena de historias (¡Tampoco se roben el nombre, eh! xD) el cual iba a ser en blogger, por lo que es lo que estarán viendo en las capturas de pantallla. El blog lo tengo en privado, así que no podrán acceder a él, tal ven en un futuro lo use solo para estos tutoriales.

Ahora, si. Comencemos.

Pueden tomar cualquiera que les guste, lo descargan y lo descomprimen, una vez que ya tienen el archivo que descargaron descomprimido en una carpeta, en el lado izquierdo de su escritorio tienen varias opciones, van hacer clic en temas. Tal como se muestra en la imagen.

Asegúrate de ya tener descomprimido el archivo, ya que es importante para el siguiente paso.

Una vez que estemos dentro, en la esquina superior izquierda encontramos un botón que dice crear copia de seguridad/restablecer y hacemos clic ahí.

Una vez que hacemos clic nos aparecerá una ventana como se muestra en la imagen, cargamos la plantilla (que es el archivo .xml de lo que comprimieron) haciendo clic en seleccionar archivo.

Una vez que el archivo ya se haya cargado, nos aparecerá de la siguiente manera: en nombre de la plantilla, tal como les muestro en la imagen, hacemos clic en subir.

Quiero aclarar que para las personas que YA tienen blog, esto no les va a modificar para nada sus entradas en el blog pero SI TODO EL DISEÑO, por lo que se va a mover absolutamente todo y se tendrá que volver acomodar.

Es por ello que siempre les recomiendo que tengan una COPIA DE SEGURIDAD, de esta manera, si no les gusta el resultado de su nueva plantilla pueden volver a cargar la que tenían con su copia.

Para aquellos que quieren empezar su blog, desde luego que no tienen ningún problema, dado que están haciendo esto de cero.

Como habrán observado el blog que estoy utilizando de prueba tenía una plantilla diferente, una vez que hacemos clic en subir, nos va a mostrar la vista previa de nuestro blog en los recuadro, por lo que es indicativo que ha cambiado.

Ahora, algo que a mi nuuuuuunca me ha gustado de estas plantillas es que te recortan automáticamente las entradas y forzosamente te muestra una imagen «destacada» (que es la primera que encuentra) y no muestra tu entrada tal cual.

Como saben, en mi blog les pongo la portada y justo a lado su respectiva información, pero con estas plantillas no se muestra de esa manera, al menos, en la página en donde se encuentran enlistadas todas las entradas, por lo que es necesario editar la plantilla directamente en el código.

Para ello, en esa misma página de temas, hacemos clic en el botón Editar HTML que se muestra abajo de la vista previa en computadora.

Una vez que hayamos hecho clic ahí les aparecerá toooodo el código de la plantilla, por favor, si no tienen experiencia con códigos, no se asunten, no es nada del otro mundo y si saben algo de inglés pueden entender demasiadas cosas.

Pero bueno, centrándonos en eliminar la parte de que la plantilla corte las entradas a su antojo, presionen Control + F estando en cursor dentro del código y busquen post.body probablemente les aparecerá más de un coincidencia, pero fíjense en que les salga un código similar al que les muestro a continuación, por lo general la palabra clave aquí es «summary» ya que indica que resuma la entrada (la corte, pues) y no la muestre completa.

Borren el código, recuerden que, en html, las etiquetas se abren y se cierran, en este caso es <div> que esta abriendo y </div> que cierra, así que, en mi caso, elimino el código que se muestra encerrado junto con el </div> pero OJO, no eliminen el post.body, ya que esto lo que hace es mostrar la entrada.

De esta manera se mostraba la reseña de Lady Midnight en el blog antes de borrar el código que cortaba la entrada al mostrarla en la página de entradas.

Muestra la portada del libro, pero a mi parecer esta demasiado grande y los datos así no se ven estéticamente bien.

Y así es como se muestra con esa parte del código eliminado.

La tipografía y el recuadro no se muestra como lo tengo acostumbrado, pero esto fue que debido a que cambié la plantilla y todos mis códigos se fueron con la plantilla anterior.

Posteriormente hice algunas modificaciones en la plantilla y quedo de la siguiente manera:

Ahora, como eliminamos la opción de que resumiera la entrada, junto con ella quitamos el botón de «Leer más» por lo que también les voy a enseñar como ponerlo.

Para ello es necesario entrar al código de la plantilla, otra vez y bucaremos la palabra clave «article» y por lo general también vamos a encontrar un post.body. Justo después de eso colocaremos un código como les muestro en la imagen encerrado.

Lo que hacen aquí es subir una imagen de «leer más» que fácilmente pueden diseñar ustedes mismos o encontrar en internet, en una entrada «nueva» la insertan y hacen clic derecho para copiar el link de la imagen, en cual insertaran en donde dice scr=»».

Si encuentran otra código en ese lugar bórrenlo y pongan el que les muestro.

Código:

<div class='post-meta'>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<div align='right'><img high='50px' src='INSERTE AQUI EL URL DE LA IMAGEN' widht='200px'/></div>
</a>
</div>
</b:if>

Una vez que ya hayamos hecho eso nos aparecerá la imagen que nos sirve como botón ¡Y eso es todo!

¡Uffff! Obviamente hay muchísimo más de que hablar, un blog se puede personalizar por toooodas partes y me faltaron, pero decidí solo hablar de las plantillas y lo de «leer más» ya que a mi me hubiera gustado que alguien viniera y me dijera que se tenía hacer para eso, pero no, lo tuve que averiguar yo solita y me tomó DÍAS tratando de eliminar esta parte, es por ello que se los comparto, para que no sufran tantos dolores de cabeza como yo jajaja.

Con Blogger es estar constantemente lidiando con códigos, tienes que tener esto muy en claro si quieres usar la plataforma, es por ello que yo prefiero a WordPress, aunque también yo lidio con códigos (porque me gusta) pero puedes ahorrarte perfectamente esta parte.

Espero que les sea de gran utilidad y si lo es ¡No duden compartirme lo que lograron hacer!

¡Hasta la próxima entrada!