0

Crear páginas estáticas

Cuando digo "páginas estáticas" me refiero a la posibilidad de hacer que algunas entradas tengan el aspecto de "página distinta" a las otras del blog.

Habréis notado que cuando se accede desde mi menú a las secciones "Contacto" "Sobre mi" "Archivos" e "Imprescindibles", las entradas en las que están incluidas no mantienen el mismo diseño que las demás, algunos datos como "autor" "fecha" etc... no se ven, lo que les da un aspecto de "página independiente".

Os explico como lo he hecho:

[1] Pinchamos en "Nueva Entrada" y editamos lo que vamos a incluir en su interior.

[2] Una vez tengamos la entrada lista para su publicación, pinchamos en el enlace que está debajo del editor donde dice "Opciones de entrada" y en "Comentarios del lector" marcamos la opción "No permitir".

[3] Desde ahí mismo, a la derecha, veremos "Fecha y hora de la entrada".
Marcamos "Programado para" y escogemos una fecha anterior a la primera entrada que hayamos publicado en nuestro blog ya que así evitaremos que esta aparezca en el lector de feed de nuestros suscriptores y, al mismo tiempo, hacemos que no aparezca en la página principal del blog.
A la entrada no le colocamos ninguna etiqueta.

Opciones de entrada


[4] Publicamos la entrada.


Hasta aquí ya hemos conseguido que la entrada no muestre los comentarios y que no aparezca en la página principal de nuestro blog, sino en la última.
Vamos a ocultar el resto de elementos de la entrada, usando para ello una de las condicionales que Blogger usa en su plantilla:

<b:if cond='data:post.allowComments'>

Lo que indica esta línea de código es que, cualquier código incluido entre ella y su cierre (</b:if>) no se mostrará si en la entrada no está marcada la opción de comentar.

[1] En primer lugar vamos a ocultar la fecha en esa entrada, por supuesto que si no estamos mostrando la fecha de entradas en el blog, este paso no será necesario.

Localizamos el código que corresponde a la fecha:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y le añadimos la condicional (destacado en color rojo):
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if></b:if>

[2] Ocultaremos ahora el código que corresponde al autor (el "publicado por" y su nick).
Localizamos el código correspondiente:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Y le añadimos la condicional (destacado en color rojo):
<b:if cond='data:post.allowComments'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span></b:if>


Nota:
Para ocultar cualquier otro elemento que tengamos añadido a las entradas, como marcadores sociales, Twitthis, etc. seguiremos el mismo sistema.

0

Traducciones con Client for Google Translate


Client for Google Translate es un software gratuito que nos permite traducir textos desde casi cualquier aplicación, ya sea un navegador, Office, el cliente de correos, las ayudas de los diferentes programas que usemos o el mismo block de notas.

Al instalarlo seleccionamos el idioma por defecto pero bastan un par de clicks para cambiar las opciones que son muchas.

Se agregará a la barra de Windows y nos mostrará un ícono azul que se volverá naranja cuando estemos en alguna aplicación donde pueda usarse.


Bastará entonces seleccionar un texto y hacer click o establecer algún tipo de atajo de teclado (por defecto CTRL + CTRL) para ver la traducción o abrir el editor:


0

Usar una entrada como formulario de contacto

The Real Blogger Status muestra una forma sencilla de "simular" un formulario de contactos.

¿Para qué? Simplemente porque a muchos, les resulta complicado encontrar un servicio gratuito que lo provea y Blogger, aunque es parte de Google y allí existe GMail, no nos brinda este servicio elemental ... otro más.

¿Cómo hacerlo? Fácil. Crear un post sin contenido y usarlo como "almacenamiento" de comentarios generales. En realidad, es una solución bastante parcial pero ... paciencia.

Hecho eso, basta tomar la URL de ese post y colocarla en un menú, en la sidebar o donde se nos ocurra. eventualmente, podríamos suscribirnos a esos comentarios para recibir norificaciones en nuestro correo y personalizar ese post para disimularlo un poco.

A decir verdad, pensé que podría crearse un blog vacio, sin más contenido que ese post e incrustarlo en nuestro sitio mediante un IFRAME o usando LightWindow o cualquier otra ventana modal para abrirlo pero, si bien esto es posible y funciona perfectamente, como, una vez que el comentario se envía, Blogger cierra la ventana y nos redirige a ese post, el resultado es malo ya que nos saca del blog desde el que lo llamamos.

Si alguien tiene una idea para evitar eso, soy todo oidos. Mientras tanto, sólo puedo seguir gritando lo mismo: ¡¡¡El formulario de comentarios apesta !!!!!!!!!!!

0

BTemplates estrena diseño


Hace un año BTemplates se iniciaba con una única idea, proporcionar un espacio donde ofrecer plantillas para Blogger . Era uno de esos sitios a los que todos recurríamos cuando necesitábamos una nueva plantilla o recomendábamos a amigos y conocidos en caso de estar buscando.
A lo largo de este año BTemplates ha ido creciendo a pasos agigantados, en la actualidad cuenta con algo más de 1.000 plantillas y recientemente ha cambiado de diseño adoptando un aire más juvenil y fresco.
Se han añadido algunas mejoras como un apartado para preguntas frecuentes (FAQ’s) y el listado de autores que más plantillas producen.
Un detalle a destacar son las plantillas premium gratuitas, creaciones de alta calidad y perfecto funcionamiento. Con todos estos detalles BTemplates se ha convertido en un sitio de visita obligada para todos los usuarios de Blogger.
El autor de BTemplates es Francisco que a la vez gestiona y administra Blog and Web y Foros del Blog, una persona que se ha ganado a pulso el reconocimiento de todos por la calidad de sus artículos y proporcionarnos algo que Bloggger estaba necesitando un portal con el mayor número de plantillas y en constante evolución.



0

Futurebox: Un experimento con CSS

Futurebox es un experimento para crear algo así como una ventana modal al estilo que lo hace LightWindow, iBox, FloatBox o cualquier otro script pero .. sin JavaScript, usando sólo CSS3. Esto, quiere decir que no funcionará en Internet Explorer pero si lo hará en Firefox, Opera, Safari y Chrome ya que se basa en la posibilidad que da una pseudo clase llamada :target.



El código HTML para las miniaturas sería algo así:
<a href="#contenedor1">
<img src="URL_imagenMiniatura" width="ancho" height="alto" id="imagenM1" />
</a>
En cada una colocaremos un atributo href con el nombre del contenedor (siempre diferentes) y cada miniatura también tendrá un nombre único.

Ahora el modelo del contenedor que permanecerá oculto y que es donde está la imagen original:
<div class="overlay" id="contenedor1">
<div class="overlay_container">
<a href="#close">
<img src="URL_imagenOriginal" width="ancho" height="alto" />
</a>
</div>
</div>
Lo que faltarías, sería el estilo CSS:
<style>
.overlay{
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 999;
}
.overlay .overlay_container{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.overlay_container img{
background-color: #678;
padding: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay:target {
display: table;
}
</style>

REFERENCIAS:anieto2k

0

Super-iconos para Twitter de BanakaBanaka!!

En BanakaBanaka!! todo lo hacen a lo grande y no me refiero al tamaño de los iconos sino a la ilusión que ponen en todo lo que hacen.
Iván nos sorprende esta vez con una pack de iconos para Twitter o como el mismo los define al estilo @TwittBoy Los iconos son gratuitos y sin restricciones. El conjunto no puede ser redistribuido.



Autor:BanakaBanaka!!
Formato: .Png
Pack: 5 iconos
Tamaño: 256px - 125px - 60px.
Peso del Zip: 1,33Mb / 781Kb.
Descarga: Banakabanaka!!

Si deseas publicar sobre estos iconos visita BanakaBanaka!!
Y si dejas un comentario con tu entrada, BanakaBanaka te enlazará también.





0

Modificando las plantillas (Tutorial 7: Fondos)

Hace ya un par de meses, El escaparate de Rosa publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro) verguenza.

El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.

El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.


La forma de hacerlo es sencilla, en realidad, no se trata de ampliar el blog o el HEADER sino de agregar una imagen extra en el BODY, una imagen que se repita y que, por ejemplo, como ha hecho Rosa, tenga colores iguales a los del HEADER mismo.

La imagen repetida la ponemos en el BODY de esta manera:
body {
background: #color url(URL_imagen) repeat-x left top;
.......
}
El body es un rectángulo que equivale a la pantalla del monitor y encima de este rectángulo está nuestro blog formado por una serie de rectángulos más. Si asimilamos esto a una serie de hojas de papel transparente, diríamos que en una hoja (BODY) dibujamos algo y en otra más chica que ponemos encima (HEADER), dibujamos otra cosa con lo cual, veremos ambas. El resultado de eso, será algo así como lo que se ve en este DEMO

La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:
body {
background: #color url(URL_imagen) repeat-x fixed left top;
.......
}
Pero, siempre hay alguien que pide un poco más, por ejemplo ¿y si quiero hacer lo mismo con el FOOTER?

Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.

En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
El orden en que pongo las imágenes es indiferente siempre y cuando la posición de la que va abajo sea bottom y la posición de la que va arriba sea top. Lo que no es indiferente es el color de fondo porque estamos hablando de imágenes que no son muy grandes, gradientes o patterns que se repiten pero que terminan; en estos ejemplos sólo son de 5x200 pixeles así que el resto del fondo, eso que la imagen no alcanza a cubir, se llena con el color que repite el último color de la imagen (#DDDDFF).

Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.

El resultado es el que se ve en este otro DEMO.

¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?

No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla. Este es el DEMO online.

También lo podemos colocar fijo, de tal manera que no se mueva cunado hacemos scroll, para eso usamos la palabra fixed:
body {
background: transparent url(URL_imagenFIJA) no-repeat fixed left top;
.......
}
Este es el DEMO.

¿Y si queremos usar tres imágenes o cuatro o cinco? Parece un poco abusivo pero hay de todo diablo2

Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:
<body>
<div id='otroBODY'>
y por supuesto, debemos cerrarla. Para eso, buscamos </body> y, justo antes, colocamos el cierre:
</div>
</body>
De este modo, podemos agregar cuantas se nos ocurra y luego, agregar el CSS correspondiente:
html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
#otroBODY {background: transparent url(URL_imagenCENTRAL) no-repeat fixed left top;
}
Lo que se vería como en este DEMO.

Y ya que estamos, colocamos fixed en las tres imágenes para que se vea como en este otro DEMO.