Alojamiento externo (Parte 2)

JMiur [E]

Si Google Page Creator no les pareció suficiente o pelear con HTML está más allá de toda consideración, queda una posibilidad que, no es tan flexible pero que está al alcance de todos.

¿Por qué no usar Blogger para alojar nuestras páginas web especiales? La idea surge de haber visto mensajitos, una aplicación desarrollada para añadir una ventana de mensajes utilizando un blog, creado especialmente para ello. Blogger nos permite crear tantos blogs como se nos antoje y no hay nada que nos obligue a utilizar una plantilla con algún esquema específico.

Creamos el blog, le ponemos nombre (preferiblemente corto, una palabra seria lo ideal) y elegimos la plantilla MINIMA BLANCA, la más simple. Ahora, vamos a establecer estas OPCIONES:

En Básico:
¿Desea añadir su blog a nuestras listas? NO
¿Mostrar vínculos de envío de entradas? NO
En Publicación:
¿Notificar Weblogs.com? NO
En Formato:
Mostrar: 1 entrada en la pagina principal
Mostrar campo de título: SI
Mostrar campo de vínculo: NO
En Comentarios:
Comentarios: OCULTAR
Persona que puede realizar los comentarios: Solo miembros de este blog
Vínculos de retroceso: OCULTAR
¿Mostrar imágenes de perfil en los comentarios? NO
En Archivo:
Frecuencia de archivo: SIN ARCHIVO
¿Habilitar páginas de entrada? SI
En Feed del sitio:
Permitir feed del blog: NINGUNO

Ahora, en la parte de Diseño / Elementos de la página eliminamos los elementos DATOS PERSONALES, HEADER y ARCHIVO DEL BLOG. Luego editamos ENTRADAS DEL BLOG, colocamos 1 en Número de entradas en la página principal, desmarcamos todo el resto y guardamos. En la pantalla sólo debe quedar un elemento: ENTRADAS DEL BLOG (si quedaron otros, los eliminamos aunque se resistan).

En Diseño / Edición HTML dejamos desmarcado Expandir plantillas de artilugios y ELIMINAMOS de la plantilla todo lo innecesario. En el HEAD deberá quedar esto:

<head>

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
{background:white; margin:0; color:#333333;
font:x-small Georgia Serif; 
font-size/* */:/**/small; font-size: /**/small;}

a:link, a:visited {color:#5588AA; text-decoration:none;}
a:hover {color:#CC6600; text-decoration:underline;}
a img {border-width:0;}

#outer-wrapper {margin:0 auto; padding:0;}
#main-wrapper {padding:10px;}

.post {margin: 0; padding:0;}
.post h3 {margin:.25em 0 0; padding:0 0 4px;
font-size:140%; font-weight:normal;
line-height:1.4em; color:#CC6600;
text-align:center;}
.post p {margin:0 0 .75em; line-height:1.6em;}
.post-title {display:none;}

.main .Blog {border-bottom-width: 0;}

body#layout #header {margin-left: 0px; margin-right: 0px;}
]]></b:skin>

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

</head>

Posteriormente se podrán cambiar o agregar propiedades de color y fuente a gusto de cada uno. Las únicas instrucciones importantes son #navbar-iframe que va a ocultar la barra de Blogger y post-title que va a ocultar el título de los posts (necesitamos que tenga un título para poder tener un pemanent link, una dirección unica para cada entrada).

En el BODY deberá quedar esto:

<body>

<div id='outer-wrapper'>
<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true'
title='Entradas del blog' type='Blog'/>
</b:section>

</div>
</div>

</body>

La idea es simple, cada post va a verse en forma independiente, cada uno de ellos es una página independiente. A diferencia de las plantillas normales, #outer-wrapper y #main-wrapper no tienen definido ni márgenes ni tamaño, por lo tanto, las páginas podrán adoptar el ancho que querramos, no tendrá un título visible ni footers. Cada entrada será una hoja en blanco, basta llenarla con cualquier contenido, publicarla, copiar el link que nos provee Blogger y utilizarlo donde se nos ocurra.

Por ejemplo, utilizando unas rutinas de ejemplo de dynamicdrive, cree un post con un jueguito, el viejo PHONG en versión JavaScript, lo publiqué y lo inserté aquí con IFRAME.

19 comentarios:

zombie: hola, está re bueno tu blog, ya que no hay mucha ayuda en la web para los blog beta... estuve leyendo tu post sobre las imagenes en el header, en vez del título del blog... hice como dijiste pero no me resultó... :S y ya tengo horas leseando con la planilla... y no sé cómo puedo poner una mascota en la sidebar :( algún consejo?
grax de nuevo =)
JMiur: Antes que nada, gracias. Estoy mirando tu blog y trataré de guiarte. Como no sé cuál de los trucos no te funcionan, voy con el primero que es la base de todo. Si agregás:
background: #000 url(URLdeIMAGEN) no-repeat;
dentro de:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #333333;
AQUI VA LO NUEVO
}
vas a ver tu header "relleno" con la imagen que deberá ser de 660 x 100 (más o menos). Si agregás:
background: #000 url(URLdeIMAGEN) repeat;
y la imagen es un tile de cualquier ancho y de 100 pixeles de alto, se "rellena" horizontalmente. Mirá el código fuente de mi blog y fijate ahí, es el que yo uso. Probá copiando la instrucción background del mio y pegala en tu plantilla. Generalmente, el problema es un error de sintaxis (verificá los paréntesis, las comas, los punto y coma, las comillas).

Como ves, contestar aquí parece complicado. Si el problema es alguno de los otros trucos es mejor que me mandes un email así puedo explicarlo más claramente.

En cualquier caso, sería bueno que "dejaras" la plantilla con el "error" (salvo que el blog colapsara) así puedo ver el código fuente. O podés adjuntarme la plantilla modificada.

Respecto a las mascotas, ¿cuál? En general, el servicio te dá un código fuente que debés copiar y pegar en la sidebar, dentro de un elemento HTML. Por lo que veo, como tu blog todavía no tiene uno, debés ir a "Agregar elementos de la plantilla", elegís HTML, y cuando se abre el editor pegás el código, guardás y listo. Luego, lo arrastrás dentro de la sidebar hasta ubicarlo en la posición que quieras. ¿Eso contesta la pregunta?.

Si algo no quedó claro o yo entendí mal, sentite en la libertad de preguntar tantas veces como quieras .
Anónimo: Un blog muy interesante..
Gracias por compartir tus conocimientos con los demas..lo leere todo mas despacio por que encontre "POR FIN" algunas cosas interesantes que buscaba.

Un saludo
JMiur: Gracias. Ya vi el tuyo (soy demasiado curioso) y me pareció muy original y muy bien armado. Allí me tendrá de vez en cuando.

Eso de "Todo esta montado a partir de recursos gratuitos de la red" es una idea estupenda.
probandoblogescolar: Hola que tal, mira mi pregunta va relacionada con la edicion de las plantillas, veo que tu sabes perfectamente lo que haces con ellas, yo tengo poco tiempo en esto de los blogs.

Yo ocupo la plantilla minima blanca, me gusta por sencilla, ya le modifique cosas sencillas como el ancho de los post y del sidebar o sea que quedo un poco mas amplia nada mas, cosa de risa para ti, pero para mi bastante dificil ya que no conozco el codigo, todo lo hago usando la logica y la comparacion de otras plantillas en su codigo fuente, ahora mi pregunta concreta es esta, quiero poner una imagen debajo o sobre el titulo del blog que ocupe todo el ancho que marque, pero no lo he podido hacer, ya revice otras plantillas, y por ejemplo en las plantilla "Simple II" y "Scribe" permiten poner la imagen del modo que yo quiero, pero los demas elementos de las plantillas no me sirven para el diseño que quiero tener en mi blog, y por mas que modifique estas plantillas para que quedaran semenjantes a la Minima, nada mas no pude :(

Ahorita la plantilla que tengo en mi blog en la minima solo con los cambios de anchura que te menciono, pero la imagen la tuve que dejar abajo que es la unica area que soporta el ancho de la imagen, pero la idea para la cual hice la imagen pues no sirve ahi abajo.

Mi blog es: http://sublimeexistence.blogspot.com/

Y en este blog: http://difusionpublicitaria.blogspot.com/
es donde he practicado mis modificaciones, ahorita ahi tengo de base la plantilla "scribe" con todas las modificaciones que le he hecho, pero la imagen pese a que en los elementos de pagina aparece a parte ya en la vista del blog, aparece encimada al titulo, no se que pasa.

Yo lo unico que quiero es poder poner la imagen de la manera que te describi arriba, si me pudieras ayudar te lo agradecieria muchisimo.

Mi correo es vienoc@gmail.com

Gracias de antemano por la atencion que le prestes a esta peticion.

Hugo Maya Rueda.
JMiur: Tengo algunas dudas sobre lo que quieres hacer así que te contento por email.
probandoblogescolar: Muchisimas gracias por la ayuda prestada a mi peticion, todo quedo como queria que se viera.

Su seguro servidor

Hugo Maya Rueda

VieNoc
JMiur: Acabo de verlo. Quedó muy bien. Suerte.
Anónimo: Hola Jmiur, he seguido los pasos sin embargo no aparece lo de notificar weblogs.com en Publicación, aún así he continuado y el resultado es una página completamente en blanco, con los vínculos mostrar entradas antiguas, recientes y página principal según navegue por las entradas. Ahora si es así como debió quedar estoy en lo correcto, entonces ¿cómo puedo colocar un .js en ésta entrada?.
No he tenido más remedio que recurrir al google pages y pues tengo el mismo problema, no sé cómo colocar un .js en este servicio. A ver que consejo me das.
Salu2
JMiur: Si entiendo bien, tu duda parece ser como colocar un script en un post. Eso, es igual que colococarlo en la plantilla pero con una condición: todo debe estar escrito en una sola línea:

<script src='archivo.js' type='text/javascript'></script>

Por si tienes inconvenientes para utilizar Google Pages, AQUÍ está explicado con más detalle.
Anónimo: Hola, y gracias por el enlace de google pages está muy bueno y responde a lo que yo quería hacer, sin embargo no me queda claro en lo concerniente a colocar un script en un post, lo de archivo.js, es esto el enlace que lo debo tener alojado en un hospedador o el contenido del script, porque cuando abro un script con el Opera, me muestra un código de un lenguaje de prog., cosa que no ocurre con el explorer o Mozilla, ¿es éste el código que debo colocar en una sola línea?. Disculpa mi infinita ignorancia y por favor no te sonrojes con la pregunta,tú entiendes... son cosas de nuevos en lo del Blog.
JMiur: Cuando abres un archivo JS con un navegador, depende de cuál es hará cosas diferentes. Ninguno lo ejecutará, lo tomarán como archivos de texto y lo mostrarán o te darán la opción de descargarlo en tu PC.

Es que un script es un texto, una serie de líneas de código (instrucciones). Para que funcione, para que se ejecute, debemos colocarlas dentro de una etiqueta <script> </script>

También podemos escribir ese código y guardarlo en un archivo al que "enlazamos", es decir, el navegador lo busca, lo abre, lee el contenido y lo incluye en la página. Eso lo hacemos con:

<script src="archivo.js"></script>

En un post, puedes poner el código o ese enlace. Pero, como debemos escribirlo todo en una sola línea, y, normalmente, los códigos son largos, lo mejor es tener ese código en algún archivo y llamarlo. Eso es lo que hace esa última etiqueta.

Resumiendo, el archivo JS contiene las instrucciones y en el post se le dice al navegador que lo busque y lo incluya.
Anónimo: Hola Jmiur! Tengo una pequeña duda. En mi nuevo blog tengo el Ibox, la ventana modal, pero me impide relacionar los archivos de blogspot. Solamente los de googlepages y photobucket! ¿Me podrías ayudar? ¿Donde alojas tú los archivos para Ibox? Muchisimas gracias!
JMiur: Estoy alojando las imágenes mayormente en Blogegr mismo. Ahí, el problema podría ser cuál es el enlace que utilizas para la imagen. Algo de eso podrías ver en este post. Si me muestras un ejemplo podría fijarme.
Bonzu Pipinpadaloxicopolis III: Un blog sin cuerpo y vacio, fantastico
JMiur: Es raro pero útil :D
Unknown: Vagabundia men como agrego el IFRAME gracias excelente post :)
Unknown: Excelente gracias vagabundia esta web es de lo mejor ;)

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Suscribirse a los comentarios

Vagabundia

Alojamiento externo (Parte 2)

19 comentarios:

¿Quiere dejar un comentario?

entradas relacionadas

la puerta abierta

las etiquetas

Páginas