TIPS/IDEAS - Crea un "Live Preview"

Seguramente en varias publicaciones de tutoriales en este blog, habrán visto algún link que diga "VISTA PREVIA" ó "VER EJEMPLO AQUÍ" los cuales los direcciona a un blog, donde se puede visualizar un ejemplo funcionando del tutorial que estén leyendo en su momento. 

Bien, eso precisamente les explicare como lograr; les explicare como transformar un blog en entradas "preview" de tutoriales, recursos o lo que deseen publicar por separado del blog.

Crea tu blog de previews:

Primero que nada, deben tener un blog que no utilicen, o crear uno nuevo para esta ocasión, ya que cada preview se realizara en las entradas de este mismo blog.

Mi blog de previews es kawai-kawai-kawai.bs.com & como verán, tiene en su ultima publicación, el ultimo tutorial en que realice una vista previa del mismo.

Cuando crees este blog, deberás tener en cuenta, que solo lo utilizaras para este tipo de entradas, no podrás crearle ningún tipo de diseño, & tampoco tendrá comentarios ni títulos ni nada de un blog normal:

¿A que se debe esto?

Esto se debe a que los diseños de cada entrada serán completamente distintos & no habrá un formato general del blog; sino que cada entrada sera completamente distinta, según la edites desde su HTML.

Plantilla de tu blog:

Una vez tienes tu blog ya creado & listo para transformarlo, nos dirigimos a Plantilla / Volver a las plantillas clásicas {cualquier inconveniente en este paso, mirar el tutorial: Como colocar Plantillas Clasicas}.

Al tener nuestro blog con el diseño clasico, se nos facilita al momento de borrar por completo el "formato" general del diseño {columnas, entradas, sidebar, header, etc.} & nos quedara un codigo simple.

Ya en nuestra plantilla clásica, seleccionamos todo el codigo & lo borramos, colocando en su lugar el siguiente:

<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>
<Blogger>
<$BlogItemBody$>
</Blogger>

Nos quedara de esta forma:

Por ultimo, solo guardamos cambios & tenemos nuestro blog preparado para crear cantidad de entradas de "vista previa".

Crear entrada "preview"

Llego la hora de armar cada uno de nuestros previews.
Para esto, armaremos el ejemplo de la vista previa que queramos presentar & lo colocaremos en un entrada de la siguiente forma:
❶er paso: Nos dirigimos a una nueva entrada & la colocamos en modo HTML

❷do paso: En la entrada creada, colocaremos el siguiente codigo antes del que tenemos para el ejemplo del tutorial.

<style type="text/css">
body {baackground: #FFF url(IMAGEN DE FONDO);}
</style>

❸er paso: Ahora simplemente DEBAJO de lo agregado en el paso 2, agregaremos el codigo necesario para poder armar el ejemplo de lo que queramos explicar/enseñar/mostrar.
Recuerda que SIEMPRE que vallas a colocar un codigo CSS, debes hacerlo dentro de las etiquetas <style></style>.

¿Como se cual es el codigo CSS? Sencillo. El codigo CSS es el que nos brinda la posibilidad de editar lo que armamos con el HTML. Para explicar mejor, nos ayuda a "decorar" & siempre se encuentra determinado por llaves "{}" cada elemento que se esta decorando.

❹to paso: Por ultimo, debes publicar tu entrada. Pero aquí no termina; para poder tener nuestra vista previa de ese tutorial específicamente, debemos obtener la dirección de la entrada que acabamos de publicar, para esto, una vez publicado nuestro post, nos encontraremos en la sección de nuestro blog: "entradas", donde buscaremos la que nos interesa & elegimos la opción VER.

Esto nos direccionara a nuestra entrada en particular, donde podremos obtener su URL & colocarla en un link dentro de la explicación del tutorial en nuestro blog principal.

Explicación extra

• Escribiré alguna aclaraciones en general para entender mejor este post:
• Esta entrada, se basa en explicar como podemos crear una "vista previa" de un tutorial de la misma manera que yo lo realizo en mis entradas.
• Puedes editar cada "preview" a tu gusto a partir del formato HTML de la entrada que utilices en el momento que armas el mismo. 
• A la hora de colocar el codigo de tu ejemplo en la entrada, si se trata de algún elemento "no flotante" puede ser que al publicar tu entrada se ubique en la esquina superior del blog & no puedas posicionarlo en otro sitio. Para acomodar esto, coloca junto con el codigo del paso 2, lo siguiente:

<div style="top: 50px; left: 100px;">
AQUI EL CODIGO DE TU PREVIEW
</div>

• Puedes editar cada entrada, como si fuera una plantilla clásica normal, siempre y cuando el codigo de la plantilla del blog, siga de manera "simple" como explica este tutorial.
• Antes de comenzar a colocar previews & demás, intenta colocar un tutorial ya explicado dentro de una entrada, para probar si comprendiste paso por paso; se lee sencillo, pero es lioso a la hora de hacerlo.

Cualquier duda de esta entrada, escribirla por formulario,

sino se complicara explicar por comentarios, muchas gracias.

~