Tutorial: Cómo hacer una plantilla de Blogger de aspecto profesional

  • Autor Autor RabadanOscar
  • Fecha de inicio Fecha de inicio
RabadanOscar

RabadanOscar

Gamma
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Header.webp


Aquí les traigo este tutorial que trata sobre como crear una plantilla de Blogger con un aspecto mas profesional y adaptado a los tiempos que corren. No es un tutorial sobre como crear una plantilla desde cero, si no un tutorial básico sobre que cosas deben cambiar en la plantilla que viene por defecto, cuáles deben eliminar y cuáles deben añadir. Sin mas, vamos a ello:


Imagen1.webp


favicon.webp


Hace tiempo en blogger era mas complicado colocar un favicon, pero ahora es tan fácil como subir una imagen cuadrada que no pese mas de 100kb. Sube aquí el logo de tu blog para que sea vea en las pestañas del navegador y darle un toque mas profesional, de lo contrario aparecerá el logo de Blogger.


ocultarbarra.webp


Esto también era mas complicado antes y había que tocar el código de la plantilla, ahora ocultar la barra de navegación de Blogger es tan fácil como indicar que no queremos que se vea.


imagen2.webp


cabecera.webp


Aquí insertamos una imagen rectangular que será la cabecera del blog, es importante tener un diseño bueno y personalizado. Mi consejo: ahora se llevan las cabeceras (header) que no ocupan mucho espacio de alto, de esta manera el visitante ve el contenido al instante sin tener que bajar la barra de desplazamiento. Usa tu logotipo junto al título del blog con una buena fuente y estará mas que listo.


paginas.webp


Aquí agregan el widget de páginas para mostrar una barra de navegación. Si queréis personalizar el diseño de esta barra, no es necesario tocar el código, en la personalización del diseño tenemos la posibilidad de cambiar los colores y la fuente.


imagen3.webp


Ahora se lleva mucho hacer que esta barra se desplace hacia abajo a medida que nosotros bajamos por la pagina, es decir, que siempre se mantenga visible (como sucede en Facebook). Para conseguir esto hay que tocar el código HTML de la plantilla. Introducimos el siguiente código después de ]=]=></b: skin> (ojo, no antes como si hacemos al personalizar widgets):

<script>
//<=!=[=C=D=A=T=A=[
$(function() {
var $flotarMenu =$(".tabs-outer"),
$window =$(window),
offset =$flotarMenu.offset();
$window.scroll(function(){
if($window.scrollTop() > offset.top) {
$flotarMenu.css({'position': 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position': 'relative', 'top' : 'auto'});
}
});
});
//]=]=>
</script>


entradas.webp


Ahora vamos a personalizar las entradas, sin duda el elemento mas importante, me sirvo de la siguiente imagen:


imagen4.webp


imagen5.webp


imagen6.webp


Debajo de los botones sociales muestra el widget de las entradas relacionadas. Con esto nuestras entradas estarán mas que optimizadas.


barralateral.webp


En los widgets de la barra lateral puedes mostrar tus datos para dar confianza al lector pero no es imprescindible. El widget de archivos del blog tampoco se ve mucho en estos tiempos. Puedes eliminarlos si quieres.

Los widgets que si debes mostrar son los siguientes: Suscripción mediante e-mail (con alguna imagen que invite a ello) Botones con enlaces a tus redes sociales. Widget de temas destacados + últimos comentarios, widget de páginas y/o tags del blog. Los demás son opcionales (como la caja de seguidores en Facebook o el widget de Twitter) y dependen del blog. Por ejemplo puedes colocar banners a tus mejores secciones. No hace falta que mencione el widget para la publicidad, que debe ir bien arriba, el primero de todos e incluso puedes colocar un segundo por en medio. Esto ya va en función de estudiar los resultados quedan.


footer.webp


En el footer no nos complicaremos mucho pero también hay que tratar que tenga un diseño plano, aquí podemos poner la caja de seguidores de Facebook o el widget de twitter, los últimos comentarios... también las páginas o temas mas destacados. Bien abajo en el footer colocaremos un enlace a nuestra página, y los típicos enlaces de About, Aviso Legal, Mapa Web...


reconocimiento.webp


Para quitar el widget de reconocimiento de Blogger vamos al código html, allí buscamos el valor Attribution (que se encuentra abajo del todo) y donde dice locked=”True” lo cambiamos por locked “False” y desde diseño ya podremos eliminar este widget.

Con todos estos cambios y añadidos, tu plantilla de blogger habrá pasado de la predefinida y anticuada plantilla a una que luce mucho mas profesional. Después ya se trata de personalizar las fuentes, colores de fondo y todo eso al gusto y dependiendo de la temática.


faq.webp


Reservo este espacio para responder las preguntas que tengan así como las dudas respecto a este tutorial o para profundizar en cualquier tema que me pidan en los comentarios. Eso fue todo, no olviden darle me agrada si les sirvió!, que espero que si...
 
Última edición:
Hola, Muchas gracias 🙂 Saludos
 
Esta bastante bien explicado, el único pero son las barras de enumeración que pusiste verde y rojo se suelen comer esos colores ellos mismos no queda muy bien por lo demás perfecto.
 
Gracias por la aportación :encouragement:
 
Un detalle [MENTION=111971]RabadanOscar[/MENTION] que me acabo de fijar el tema debería ir aquí Enlace eliminado y no en tutoriales generalizado.
 
excelente aporte, esto demuestra que blogger es muy editable
 
te curraste bastante el tutorial, esta muy bueno 😀
 
Ok. Pido disculpas 😕 Pero al menos te gustó el tutorial? :sorrow:

Ya te dije arriba segundo comentario que esta muy bien detallado, el único pero fue a barra que juntaste verde y rojo y se come un poco el color. Pero por lo demás esta bien relatado y sin son pilares fundamentales en blogger 😛8:
 
Muy buen tutorial, muy detallado :encouragement: tienes algun ejemplo de web que este hecha de esta manera?
 
Ya te dije arriba segundo comentario que esta muy bien detallado, el único pero fue a barra que juntaste verde y rojo y se come un poco el color. Pero por lo demás esta bien relatado y sin son pilares fundamentales en blogger 😛8:

Si, cuando tenga tiempo lo cambiaré por encabezados normales. Gracias por la recomendación! 😛8:
 
Gracias amigo :encouragement:
 
Más vale que me sirvió! :witless: muy practico y bien explicado :encouragement: Gracias por compartir 😛8:
 
Muy buen trabajo! Te habrá costado un buen rato preparar todo eso, no es así? Muchas gracias por compartir! Saludos.
 
[MENTION=111971]RabadanOscar[/MENTION] A favoritos, muchísimas gracias! :welcoming:😛7:
 
Bien currado e interesante!! 🙄
 
Muy buen trabajo! Te habrá costado un buen rato preparar todo eso, no es así? Muchas gracias por compartir! Saludos.

La verdad es que si, pero lo hice disfrutando 😛8:
 
Buen tutorial para los que recien empiezan en blogger 😛8:
 
Atrás
Arriba