{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Insertar un diseño HTML a Blogger



Muchas veces queremos usar un diseño hecho por nosotros mismo desde HTML, pero para nuestra mala suerte Blogger no permite del todo hacer esto y nos la pone un tanto complicado, ya que debemos adaptar nuestro diseño a blogger. Hace un tiempo empece a analizar este caso y les tengo una solución donde podemos insertar fácilmente un DISEÑO HTML EN BLOGGER!, pero no todo es perfecto, hay un pequeño detalle con este método que al hacer este cambio perderemos la publicación de entradas y solo tendremos un diseño sin contenido que se pueda renovar con el uso de entradas (post) como lo hacemos normalmente en blogger. Así que este pequeño truco es para los que quieren simplemente insertar su diseño fijo bajo el dominio Blogspot.

Yo hice el mio y aquí les dejo el demo.


¿Te gusta? Bien manos a la obra!


1.- Primero que nada hacemos un respaldo de nuestra plantilla.Para esto nos vamos a la sección de Plantilla  entramos a Crear copia de seguridad/Restablecer en la parte superior derecha y luego damos clic a descargar plantilla. Podemos leer mas sobre esto en esta entrada.

Ahora viene la preparación de la plantilla para que blogger acepte nuestro diseño. 

2.- Nos vamos ahí mismo a Editar HTML y borramos todo dando Ctrl + E nos ahorra trabajo de selección.

3.- Ahora que ya borramos todo el diseño agregamos esta plantilla en blanco con los requerimientos mínimos para que funcione blogger:

<!DOCTYPE html>
<html>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
      -----------------------------------------------
       Plantilla en blanco
       http://csssoldier.blogspot.mx/
      ----------------------------------------------- */
      body {margin: 0;} /* Deja el documento sin márgenes */
      #navbar {display: none;} /* Oculta la navbar */    
    ]]></b:skin>
  </head>
  <body>
    <b:section id='main' showaddelement='yes' />
  </body>
</html>

 y para finalizar damos clic a guardar plantilla.

Aquí es donde vamos a insertar nuestro diseño HTML 

1.- Entramos en Diseño y damos clic a Agregar un gadget y elegimos HTML/JavaScript ahora dentro de este agregaremos todo nuestro diseño HTML y damos guardar.

Y listo ahora solo queda modificar su diseño a su gusto y si necesitan alojar sus archivos pueden hacerlos en Dropbox un alojador gratuito muy bueno y facil de usar.

1 comentario:

  1. Como se hace si tengo mas de 1 HTML y lo quiero poner en el mismo blog ? ejemplo: html1= plantilla1 y html2=plantilla2 , ambos vinculados con el mismo dominio

    ResponderBorrar