0

Formulario de comentarios con LightWindow

Esta idea de egoloco que, generosamente permite compartir, es una variante muy interesante de un script que abre los comentarios en una ventana modal; en este caso, usando LightWindow.

El script original ya tiene bastante tiempo y luego, sufrió una modificación cuando Blogger incorporó los comentarios incrustados y era así:.
<script type='text/javascript'>
var viejoEnlace = &quot;http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=<data:post.id/>&quot;;
var nuevoEnlace = viejoEnlace + &quot;&amp;isPopup=true#form&quot;
var enlacePopup = &quot;&lt;a id=\&quot;comPopUp\&quot; class=\&quot;lightwindow\&quot; href=\&quot;&quot; + nuevoEnlace + &quot;\&quot; params=\&quot;lightwindow_width=480,lightwindow_height=600,lightwindow_loading_animation=true\&quot;&gt; TEXTO o IMAGEN &lt;/a&gt;&quot;
document.write(enlacePopup);
</script>
Bastante confuso para leer pero, en realidad, simple, sólo se crea un enlace para abrir una ventana modal de cierto tamano y la dirección URL a utilizar es de la vieja página de comentarios de Blogger:
http://www.blogger.com/comment.g?blogID=XXXXXXX&amp;postID=XXXXXXX
Y todo lo que había que hacer era colocar el ID de nuestro blog.

Usando el mismo criterio, en lugar de abrir toda la página, es decir, los comentarios y debajo el formulario, podría usarse una URL distinta para abrir el formulario y nada más, lo cual puede ser una alternativa interesnte para aplicar en la página principal o en las páginas de navegación. La URL sería esta:
http://www.blogger.com/comment-iframe.g?blogID=XXXXXXX&amp;postID=XXXXXXX
Así que podemos usar el mismo script anterior, modificando sólo ese dato y claro, colocando siempre el ID de nuestro sitio:
<script type='text/javascript'>
var viejoEnlace = &quot;http://www.blogger.com/comment-iframe.g?blogID=XXXXXXX&postID=<data:post.id/>&quot;;
var nuevoEnlace = viejoEnlace + &quot;&amp;isPopup=true#form&quot;
var enlacePopup = &quot;&lt;a id=\&quot;comPopUp\&quot; class=\&quot;lightwindow\&quot; href=\&quot;&quot; + nuevoEnlace + &quot;\&quot; params=\&quot;lightwindow_width=480,lightwindow_height=600,lightwindow_loading_animation=true\&quot;&gt; TEXTO o IMAGEN &lt;/a&gt;&quot;
document.write(enlacePopup);
</script>
Este script, podemos colocarlo en cualquier parte dentro el footer de nuestras entradas y además, si queremos condicionarlo para que no se vea en las paginas individuales, haríamos esto:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  ... y aquí ponemos el script ...
</b:if>
Aqui hay un ejemplo práctico y se lo puede ver en funcionamiento a pleno en el blog de egoloco.

0

Mi perro no tiene cuenta en Twitter ¿y el tuyo?


Algunos recordarán Mattel la reconocida firma de juguetes,  en la Feria del Juguete de Nueva York del próximo mes va a lanzar el Puppy Tweets.
¿Suena lo de "Twetts" ¿verdad? no vamos muy desencaminados, el Puppy Twetts es es una etiqueta de plástico con sonido y sensor de movimiento y está creado para que nuestro perro pueda twittear como una persona, esto se consigue colgando el Puppy Twetts del collar y colocando un receptor de USB en nuestro PC. Como es lógico es imprescindible que tenga una cuenta en Twitter
El Puppy Twetts ya viene con con algunos tweets preseteados que que serán emitidos por las actividades del perro.
Susan Russo, director de marketing de Mattel afirma que intentan crear un espacio en el mercado combinando el gran amor por los perros y la fiebre por las redes sociales.
Jim Silver analista de la empresa juguetera es más realista y llama a las cosas por su nombre, afirma que es algo "curioso" y que el sentido que tiene es la plata, ya saben...  dinero.
Tweets Puppy estará disponible en tiendas minoristas para el otoño, y tendrá un precio de venta sugerido de $ 29.99.

¿Tendrá tan buena acogida como piensa Mattel?
¿En un futuro veremos actualizarse el muro de nuestro perro en Facebook?
Date prisa si quieres encontrar disponible el nombre de tu perro en Twitter no es tan sencillo como piensas. Con lo presumido que es Yako veremos como se toma esto

0

¿Por qué no se pueden reordenar los widgets?

Primero fueron sólo algunas consultas aisladas, ahora ya son generalizadas, aparentemente, hay un problema que impide reodrenar los widgets en la ventana de diseño de Blogger, en especial cuando se utiliza Firefox 3.6.

Por el momento, no hay respuestas e incluso, los reportes son un poco confusos; en los Grupos de Ayuda de Blooger: 1, 2, 3, 4, 5 e incluso en los Foros de Mozilla.

He probado en diferentes plantillas y los resultados varían e incluso, el problema persiste en una Plantilla Mínima así que esto nada tiene que ver con cookies o plantillas demasiado personalizadas.

En algunos casos, sólo es posible mover desde una sección a otra (por ejemplo, de la sidebar al footer) pero no dentro de la misma sección; en otros, al arrastra un gadget, se nos permite ubicarlo aún en lugares donde se supone que no es es posible ya que están bloqueados (por ejemplo las Entradas del blog) y en otros, las podemos reordenar pero el resultado es aleatorio, el gadget queda en cualquier parte y no podemos controlar su posición:




No hay explicaciones y no sé si es un problema generalizado.

Si les pasa lo mismo, repórtenlo. Mientras tanto, pueden mover los distintos elementos desde la ventana de edición HTML. Allí, sin expandir los artilugios, verán que cada gadget se muestra como sólo una línea de código: 
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='MI TITULO 1' type='HTML'/>
  <b:widget id='HTML2' locked='false' title='MI TITULO 2' type='HTML'/>
  <b:widget id='Feed1' locked='false' title='MI TITULO 3' type='Feed'/>
</b:section>
</div>
Y basta copiar esa línea y pegar la en otro lugar dentro de la misma sección para reordenarla:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='MI TITULO 1' type='HTML'/>
  <b:widget id='Feed1' locked='false' title='MI TITULO 3' type='Feed'/>
  <b:widget id='HTML2' locked='false' title='MI TITULO 2' type='HTML'/>
</b:section>
</div>
Esto, puede hacerse dentro de una sección o desde allí a cualquier otra.

Paciencia diablo1

Es importante recordar que no debe confundirse este problema con la imposibilidad de agregar elementos o moverlos a secciones bloqueadas. Una sección está bloqueda cuando en su código vemos cualquiera de estos atributos:

showaddelement='no' impide que agreguemos elementos en esa sección porque en la ventana de diseño no se mostrará la opción; el atributo, puede eliminarse

maxwidgets='1' indica que en esa sección sólo es posible tener un gadget; puede eliminarse o aumentar el valor

Lo mismo ocurre con los widgets:

locked='true' indica que no puede ser movido; se cambia colocando locked='false'

1

Libertad de expresión

Freedom of expression
Beril Ates Ankara
Turquía		No cage for words
Florian Harmand Flavie de Ravel
Francia		Married to silence: till death do us part
Vanessa Sampedro
USA
No freedom, no rights
Nicolò Mainardi
Italia		Freedom of expression
Minglian Li
China		Unveil my pain
Massimo Rinaldi Davide Bacchilega
Italia
Freedom of smile
Gergely Boganyi
Hungría		When freedom is kept quiet
Sophie De Henau
Canadá		(Un)Civilization
Adele Ivona
Italia

REFERENCIAS:poster4tomorrow.org

0

Banderas de traducción en el menú

Me preguntan en un comentario:

Tengo en el blog un menú como el que tienes en la parte superior de tu blog, y querría poner unas banderitas para traducir el blog. ¿Podrías decirme como hacer para incluirlas en el menú?


Banderas de traducción


Cualquier menú tendrá una estructura parecida a esta:
<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Como véis en el ejemplo, en este caso es una lista colocada dentro de un <div> así que, como cualquier lista, comienza con la etiqueta <ul> termina con la etiqueta de cierre </ul> y dentro de estas se incluyen los "item" o enlaces del menú, que comienzan con la etiqueta <li> y terminan con la correspondiente etiqueta de cierre </li>.

Para colocar cualquier otro "item" o pestaña nueva en el menú, tendríamos que hacerlo colocando el código correspondiente entre <ul> y </ul>, en el caso de las banderitas de traducción, lo haremos justo antes del cierre (</ul>):
<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
<li><a href="URL_DEL_BLOG_TRADUCIDO_A_INGLES">
<img alt="Translate to English" src="URL_DE_IMAGEN_BANDERA_INGLESA" title="Translate to English"/></a><a href="URL_DEL_BLOG_TRADUCIDO_A_POTUGUES"><img alt="Traduzir para o Português" src="URL_DE_IMAGEN_BANDERA_PORTUGUESA" title="Traduzir para o Português"/></a></li>
</ul>
</div>

Procuraremos no usar unas imágenes demasiado grandes para las banderitas o el menú podría desconfigurarse...

Para hacer la traducción del blog, usaremos el servicio de traducción de Google, para ello colocamos la url de nuestro blog allí y una vez traducido al idioma que necesitamos, copiamos la url del navegador y la colocamos en el código donde dice URL_DEL_BLOG_TRADUCIDO_A... el idioma que sea.

Como la url resultante en Google es "enorme" podemos hacer uso de una página online para acortar direcciones como notlong o url(x) entre otras.

También puedes hacerlo desde aquí mismo a través de este pequeño formulario que usa el servicio de TinyURL

Ingresa la URL completa a acortar :

0

Wallpapers geeks

0

Cinco packs de íconos muy originales

Animals
Contiene 24 íconos 16x16, 32x32, 48x48 y 128x128 en formato PNG.descargar
Coquette
Contiene 50 íconos de 16x16, 32x32, 48x48, 64x64 y 128x128 en formato PNG.descargar
Origami
Contiene 15 íconos de 16x16, 32x32, 48x48 y 128x128 en formato PNG.descargar
Frankie
Contiene 3 íconos de 16x16, 32x32 y 512x512 en formato PNG.descargar
KungFu Panda
Contiene un ícono de 512×512, en formato PNG.descargar

0

CyberNETicos servicios de alojamiento

CyberNETicos es la empresa líder en el sector de hosting ofreciendo servicios de alojamiento web, servidores dedicados, VPS, registro de dominios y streaming de audio por Internet.
En la actualidad aloja más de 20,000 páginas web entre sus más de 4.000 clientes, 600 distribuidores, 400 emisoras de radio online, 200 servidores privados virtuales (VPS) y más de 200 servidores dedicados de pymes y particualres.
Cuenta con una plantilla compuesta de técnicos especializados en servidores web, virtualización, hosting, streaming, administración de sistemas linux y windows, soporte de cara al cliente, equipo de diseñadores gráficos, programadores y contables altamente cualificados para poder solucionar cualquier tipo de incidencia o duda relacionada con los servicios ofrecidos por internet.


Algunas características de todos sus planes son: FTP, Estadísticas, Webmail, Perl, PHP, MySQL, Protección Anti-SPAM, Extensiones FrontPage, regalan el registro de un domino al contratar cualquier plan de alojamiento web anualmente que se renovará gratis cada año se continúa utilizando Cyberneticos.
La plantilla está compuesta de técnicos especializados en hosting, administración de sistemas linux, soporte de cara al cliente, equipo de diseñadores gráficos, programadores altamente cualificados y certificados y un departamento de contabilidad para poder solucionar cualquier tipo de problema.
En Cyberneticos.org el panel de administración está disponible para que podamos probarlo antes de decidirnos a adquirir algún plan de hosting.

0

Enlaces simples a Seguidores en Blogger

Aunque el tema de los Seguidores en Blogger y el extraño invento de Google Friend Connect ya no parecen tener demasiada prensa, siguen allí en nuestros sitios y acá van un par de alternativas extras.

Primero que nada, convendría revisar el includable llamado comment-form que es el que contiene el formulario de comentarios incrustado. Allí, parece haber algún cambio que puede verse cuando colocamos una plantilla nueva de las que Blogger ofrece por defecto. Ahora dice esto:
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p>data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
En realidad, no sé si esto es algo nuevo o no, en mi caso, esas líneas en color, faltaban; las agregué y no parece haber cambios pero ... por las dudas sonrisa

Conviene hacerlo con cuidado, copiar el includable que tenemos en el block de notas, cambiarlo por el nuevo y guardar la plantilla; no es algo que podamos verificar con Vista Previa así que, ninguna precaución es poca. Una vez que comprobamos que todo es correcto, listo y si surge cualquier problema, simplemente hacemos el proceso inverso y restauramos el código volviendo a pegar el que teníamos antes.

Dado que las ventanas básicas de Seguidores simplemente abren URLs, podríamos usarlas para algunas cosas elementales; por ejemplo, si se usa algún tipo de panel de acceso personal como el que se mostraba en esta entrada, es sencillo agregar una opción más que nos permita acceder a la ventana de administración de los seguidores. Para eso, necesitamos un enlace como este:
<a href='http://www.blogger.com/manage-followers.g?blogID=numeroIDblog'>Administrar Seguidores</a>
donde numeroIDblog es un número identificatorio único que podemos ver en la barra de direcciones del navegador cuando, por ejemplo, editamos las entradas:

http://www.blogger.com/posts.g?blogID=11223344556677

Por último, también es posible agregar alguna clase de enlace para facilitar la suscripción a los seguidores de un sitio, sin necesidad de agregar el gadget que suele ser problemático ya que en algunos casos no funciona y es bastante lento. Para eso, debemos hacer que ese enlace apunte a este tipo de URL:

http://www.blogger.com/follow-blog.g?blogID=numeroIDblog

así que, por ejemplo, podríamos agregar un elemento HTML en la sidebar y allí, colocar un enlace, ya sea con un texto o con alguna clase de imagen:
<a href="http://www.blogger.com/follow-blog.g?blogID=numeroIDblog" rel="nofollow" title="Seguir este blog" target="_blank"> TEXTO o IMAGEN </a>
o bien un pequeño script para que se abra en una ventana tipo pop-up:
<script type="text/javascript">
  function ventanaFollow() {
    window.open("http://www.blogger.com/follow-blog.g?blogID=numeroIDblog", "followblog", "height=600, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no" );
  }
</script>
<a href="javascript:ventanaFollow()" rel="nofollow" title="Seguir este blog"> TEXTO o IMAGEN </a>
o, si se usa alguna clase de ventana modal como LightWindow:
<a class="lightwindow" params="lightwindow_width=535,lightwindow_height=545" href="http://www.blogger.com/follow-blog.g?blogID=numeroIDblog"> TEXTO o IMAGEN  </a>
En este último caso, el resultado sería algo así:

0

Recuperar los enlaces de navegación (II)

En una entrada anterior tuvimos ocasión de ver como recuperar los enlaces de navegación ocultos previamente mediante CSS.

Enlaces de navegación

En algunos casos por defecto de la plantilla o porque quien la diseñó así lo hizo, no están ocultos de esta forma que vimos anteriormente, sino que han sido eliminados directamente borrando el código HTML que hace se muestren en la plantilla.

En este segundo caso, lo que deberíamos hacer es tratar de volver a incluir ese código, así que veremos como hacerlo en esta entrada.

[1] En nuestro panel, vamos a "Edición HTML" de la plantilla y marcamos la casilla de "Expandir las plantillas de artilugios".

[2] Localizamos esta línea de código:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

[3] Debajo de esa línea hemos de pegar este código (si has comprobado antes que no está en la plantilla o si está incompleto):

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>


[4] Ahora hemos de ir bajando por el código de la plantilla desde donde hemos pegado eso y localizar este código (podría ser ligeramente distinto) para añadir la parte que veis resaltada en rojo:
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

[5] Usaremos la vista previa antes de guardar los cambios.

0

Sombras con CSS

La propiedad box-shadow nos permite añadir sombra a una imagen, párrafo o bloque (DIV).

El problema es que esta propiedad no está disponible en todos los navegadores y debemos añadir la propiedad que cada navegador va incorporando.
Estos datos son proporcionados por Vagabundia y es cuestión de recordarlos.

Firefox 3.5 en adelante:
-moz-box-shadow: 5px 5px 5px #C0C0C0;

WebKit, Chrome y Safari:
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

Internet Explorer en general:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

Para versiones de Internet Explorer anteriores a la 8 es necesario añadir width o height.
Podemos añadir los estilos de la sombra directamente donde vamos a añadirla.
Esto sería el contenido del bloque
<div style="-moz-box-shadow: 0px 0px 8px #C0C0C0; border: 1px solid rgb(204, 204, 204); margin-bottom: 1.5em; padding: 1px;"><div style="padding: 0.5em; text-align: center;">Esto sería el contenido del bloque</div></div>

También podemos añadirlos a la hoja de estilos antes de ]]></b:skin>

.sombra-div {
height:30px;
padding: 10px;
width: 450px;
font-size: 18px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#F0C2D1;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

Donde queremos mostrar el DIV añadimos:
<div class="sombra-div">
Esto sería el contenido del bloque
</div>

Si lo que añadimos es una imagen:

.sombra-image {
padding: 0.1em;
width: 200px;
height: 210px;
background-color:#FFF;
border: 1px solid #C0C0C0;
-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<div class="sombra-image"><img src="url-imagen" border="0" /></div>

O un texto cualquiera

Aquí cualquier texto


.sombra-tex {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 48px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);
}

<p class="sombra-tex">Aquí cualquier texto </p>



Suerte Bilosony2™

0

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview es una herramienta muy interesante que vale la pena probar. Se trata de un programa externo que podemos descargar gratuitamente y con el cual es posible intentar hacer algun tipo de debug en Internet Explorer.


Una vez instalado, lo ejecutamos y tendremos la posibilidad de abrir cualquier página web y verla en una ventana dividida tal y como se nos mostraría en distintas versiones de IE. De esa manera, podremos comparar las diferencias y, eventualmente ir probando las modificaciones necesarias para compatibilizarlas.

Las páginas pueden ser mostradas una al lado de la otra o bien una debajo de la otra y hay herramientas de zoom, reglas y guias que podemos agregar para comparar la forma en que se interpretan nuestros códigos las distintas versiones; incluso, una solapa permite leer el DOM o sea, ir viendo el contenido de cada bloque y algunas de sus características.


Hay una versión paga que hace lo mismo pero que también incluye a Firefox. La versión trial de este último puede verse acá.

Para instalarse cualquier a de ellas no se requiere nada especial, salvo Microsoft .NET Framework 3.5 Service Pack 1.

Click para ampliar la imagen.

Si a esta herramienta le agregamos la Internet Explorer Developer Toolbar tendremos algunas alternativas para mejorar la forma en que se ven nuestros sitios en diferentes navegadores.

0

Usando imágenes temporales

Fácil, simple, increíblemente útil para cuando estamos diseñando una página web o modificamos el blog.

¿Cuántas veces necesitamos poner alguna imagen sólo para probar? Y entonces hay que subirla a alguna parte y nuestras se van llenando de porquerías o tenemos que usar un servidor como ImageShack y justo en ese momento no funciona o no encontramos la imagen exacta y hay que redimensionarla ¡Y todo eso sólo para probar!!!

La solución es dummyimage, un servicio que hace eso, genera dinámicamente una imagen con un tamaño que le indiquemos y listo. Como proyecto de código abierto, los scripts PHP están disponibles para ser descargados en formato ZIP si alguien quiere instalarlos en su propio servidor pero, por ahora, podemos usarlo directamente.

La URL para una imagen de 300x150 sería esta:
http://dummyimage.com/300x150
Así que la imagen la usamos así:
<img src="http://dummyimage.com/300x150" alt="300x150" />
Y mostrará esto:

300x150

REFERENCIAS:Utilidades para Webmasters

0

Google Pages cierra definitivamente


Hace bastante tiempo que Googles Pages anunciaba que cerraba sus puertas, los usuarios que teníamos archivos allí los recuperamos y buscamos un nuevo alojamiento.
Google Sites era el sustituto, sin embargo los archivos js. no estaban permitidos cosa que más tarde han solucionado.
Los usuarios de Blogger formaron una piña, todos buscaban alojamiento gratuito que permitiera subir los archivos en cualquier formato, todos compartían impresiones y como no, información.

En aquellos días era un descontrol pero me quito el sombrero ante la respuesta del personal no el de Blogger precisamente sino los usuarios.
El final de la historia ha llegado, Google Pagess dice adiós y para recordarlo nos avisan en nuestro panel.



Para los que no saben que hacer encontrarán en Ayuda Google información.

Las indicaciones dicen que vayamos a la herramienta Template Updater accedí a la página que nos proporcionan.


Blogger Hosting utiliza las cuentas de Google para acceder.


"Google no se hace responsable de los contenidos de Blogger Hosting ni está asociado con sus propietarios. Si accedes, Google compartirá tu dirección de correo electrónico con Blogger Hosting, , pero no compartirá tu contraseña ni ningún otro dato personal.

Blogger Hosting puedes utilizar tu dirección de correo electrónico para personalizar el uso que hagas de su sitio web."


Lo que hice fue probar con otra cuenta distinta a la que suelo usar para no arriesgarme y me mostraba un aviso donde decía que no tenía archivos alojados con esa cuenta, lógico.

No sabía lo que podía repercutir ese paso,  así que ingresé en mi cuenta de Google Pages y descargué todos los archivos a una carpeta, son archivos que en algún momento les di uso para mostrar algún ejemplo o para descarga y que no se encuentran en la plantilla actual.

Hasta ahí es lo que sé y no creo que aclare mucho las dudas que estoy recibiendo, simplemente me dejo llevar por lo práctico y lo seguro.

Recomiendo prudencia antes de tomar una decisión, y sobre todo que tengan sus archivos alojados en otro sitio, al menos los que estén usando.

0

Añadir botones a redes sociales



Han sido varias las preguntas sobre la forma de añadir los iconos de redes sociales en la sidebar y no es ningún misterio todo lo contrario, de forma muy simple los añadiremos paso a paso.
Lo primero que haremos será crear una clase para los botones y añadir los estilos a esa clase, para ello nos situamos antes de ]]></b:skin> y añadimos:

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}

Con eso estamos diciendo que el contenido dentro del bloque llamado redes-sociales se posicionará centrado y tendrá a su alrededor un espacio de separación con el borde 25px. Para saber si está centrado añadimos un borde que luego podemos quitarle.
Ahora vamos a plantilla de diseño y editamos un nuevo gadget de HTML en su interior añadimos:

<div id="redes-sociales">
<a target="_blank" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" title="Suscribirse" type="application/rss+xml"><img alt="rss" style="border:0" src="url-imagen-Feed" /></a>

<a target="_blank" href="http://twitter.com/tu-nombre-twitter" title="Twitter">
<img alt="en Twitter" src="url-imagen-Twitter" />
</a>

<a target="_blank" href="http://www.facebook.com/profile.tu-perfil-facebook" title="Facebook">
<img alt="en Facebook" src="url-imagen-Facebook" />
</a>

<a target="_blank" href="http://www.youtube.com/user/tu-nombre" title="YouTube">
<img alt="YouTube" src="url-imagen-YouTube" />
</a>
</div>

Donde href es la dirección que sustituimos por cada url que corresponda o copiamos la url de la barra del navegador de la página que vamos a enlazar y reemplazamos la que tenemos por la que copiamos.
En url-imagen añadimos cada imagen en relación con el sitio que vamos a enlazar.

Si queremos que muestre opacidad y al pasar el cursor desaparezca en la hoja de estilos añadimos entonces:

#redes-sociales {
text-align: center;
padding:15px;
border: 1.9px dashed #C0C0C0;
}

a.redes-sociales img {
filter:alpha(opacity=40);
opacity: 0.4;
}
a.redes-sociales:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}

Y en el gadget los enlaces.
<div id="redes-sociales">

<a class="redes-sociales" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" target="_blank" title="Suscribirse" type="application/rss+xml"><img alt="rss" border:0="" border="0" src="url-imagen-Feed" /></a>

<a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank" title="Twitter"> <img alt="en Twitter" border:0="" border="0" src="url-imagen-Twitter" /></a>

<a class="redes-sociales" href="http://www.facebook.com/profile.tu-perfil-facebook" target="_blank" title="Facebook"> <img alt="en Facebook" border:0="" border="0" src="url-imagen-Facebook" /></a>

<a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre" target="_blank" title="YouTube"> <img alt="YouTube" border:0="" border="0" src="url-imagen-YouTube" /></a>
</div>


Aumentando o disminuyendo el valor de opacity conseguiremos más o menos opacidad.
De esa forma le estamos diciendo que la imagen tiene de opacidad 40 pero al pasar el cursor esa opacidad desaparece porque aumentamos a 100.
Para que los botones salgan en horizontal y no vertical debemos añadirlos en ese orden, es decir un código de enlace seguido de otro y separado por un espacio.

0

Who-Tweet: un botón animado para Twitter

Topsy es un buscador especializado en Twitter que dispone de una serie de widgets como los típicos botones de retweet y un API muy interesante.

Basado en eso, moretechtips.net ha desarrollado un botón muy original que tiene como particularidad, mostrar los avatares de aquellos usuarios que han compartido nuestro post.

Para utilizarlo, necesitamos JQuery y podemos usar los archivos que nos proveen así que, antes de </head> agregamos lo siguiente:
<link type='text/css' rel='stylesheet' href='http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js'></script>
Ahora, podríamos insertarlo en nuestros posts simplemente agregando esto en el post-footer de las entradas:
<div class="who-tweet">cargando...</div>
También pueden agregarse opciones, por ejemplo nuestro nombre de usuario:
<div class="who-tweet" options="{nick:'miNombre'}">cargando...</div>
Hay más opciones disponibles y todas se agregan del mismo modo, separándolas con comas:

n:valor establece la cantidad máxima a mostrar
inf_only:1 hace que solo se muestren tweets de usuarios considerados "influyentes" sorpresa2
inf_tip:1 muestra el "valor" de esa influencia
tweet_tip:1 muestra las imágenes como tooltips
animate:'height' cambia el tipo de animación

Una opción extra que podría ser interesente en ciertos casos, es url. Si bien la URL del post no es necesario agregarla, podemos definirla y, de tal modo, agregar esto sólo en determinadas entradas, agregándolo directamente en el editor:
<div class="who-tweet" options="{nick:'miNombre',,url:'URL_entrada'}">cargando...</div>
Este es el ejemplo, usando la opción url y colocando allí, la dirección del blog:

0

Preguntas y respuestas sobre las páginas estáticas

Desde que anunciaron que en Blogger in Draft estaba disponible una nueva opción para crear Páginas Estáticas en Blogger, muchos me siguen preguntando por lo mismo y la verdad, aunque leí las entradas de El escaparate de Rosa y de Gem@ en sus respectivos blogs (recomiendo que las lean) hay algo que, a simple vista, no me convenció demasiado y tal vez por eso, demoré en tocar el tema pero, no hay más remedio que hacerlo.

Se trata de una posibilidad en desarrollo y por lo tanto, con dificultades para acceder a ella, dependiendo del día y de la humedad ambiente pero, ese no es el problema principal; sino que me da la impresión que estabamos ante un anuncio con muchas trompetas y poco sustento. Ahora que lo probé, sólo me limito a confirmar esa sensación original.

Evidentemente, podrá ser una solución para ciertas cosas o para ciertos blogs pero, en lo personal, no creo que sea nada del otro mundo y le añade bastante poco a Blogger porque, eso que se crea, apenas es un post y nada más.

A ver si aclaro eso.

Un blog es una serie de las entradas que se muestran ordenadas cronológicamente y todas aparecerán listadas en un elemento como Archivos o podrá accederse a ellas navegando hacia atrás o hacia adelante. Por el contrario, una página estática es una entrada atemporal, algo que está fuera del orden cronológico y es lo que suele utiizarse para agregar información como el perfil, los formularios de contacto, los índices o mapas del sitio, los términos y condiciones de uso, etc. Por lo general, un blog estándard, no las usa para otra cosa y hasta acá, la única diferencia entre una entrada y ese tipo de página es que no se lista; nada más.

Por supuesto, en otro sistemas como WordPress, esta opción existe pero además, es mucho más amplia ya que esas páginas pueden tener diseños especiales, diferentes al estilo general, pueden entrelazarse y generarse estructuras de árbol que permiten relacionarlas, etc. En Blogger, nada de eso es posible. En Blogger, una página estática no es otra cosa que un post con una dirección URL diferente.

¡Y para eso tardaron tres años!!! ¡Y para colmo, lo tienen en Draft como si se tratara de algo tan complejo de hacer XD!!!

Esta es la URL normal de una entrada:
http://miBlog.blogspot.com/año/mes/titulo.html
y esta es la URL de una "page":
http://miBlog.blogspot.com/p/titulo.html
¿Más diferencias? Poco y nada; no admite etiquetas, pueden habilitarse o deshabilitarse los comentarios, el editor es el mismo que para una entrada, aparentemente, no puede cambiarse la fecha.

¿Más limitaciones? Sí, "puedes añadir hasta 10 páginas independientes". Diez, ni una más ... ¿? (más información)

Si la opción de crear páginas no se ve ¿pueden crearse igual? Si, basta acceder directamente:
http://draft.blogger.com/page-edit.g?blogID=XXXXXXX
reemplazando XXXXXXX por el ID de nuestro blog que podemos ver en cualquier página del escritorio de Blogger.

Una vez creadas, nos da tres opciones para integrarlas al blog, mejor dicho, para mostrar los enlaces esas paginas.

1. Agregarla a la sidebar utilizando un widget lo que generará un elemento que luego puede ser editado como cualquier otro y que tendra un código como este: Ver/Ocultar [+]

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

2. Agregar el mismo widget dentro del llamado crosscol-wrapper, una sección que solemos no utilizar y que a veces, ni siquiera se encuentra en algunas palntillas. De este modo, aparecerá como un menú horizontal.

Si no existe, no es problema, simplemente, lo agregamos, colocando esto donde nos guste:
<div id='crosscol-wrapper'>
  <b:section class='crosscol' id='crosscol' />
</div>
Tampoco es obligatorio colocarlo allí, podríamos moverlo a cualquier otra parte, como cualquier otro elemento o crear una sección nueva con cualquier nombre:
<div id='paginas-wrapper'>
  <b:section class='paginasEstaticas' id='paginasEstaticas' />
</div>
Por defecto, hay una serie de propiedades CSS que lo controlan así que, en muchos casos, habrá que redefinirlas ya que preveen que las pongamos en ese crosscol o en el footer (ellos diseñan nuestro sitio); dicen esto:
.crosscol .PageList ul, .footer .PageList ul {  /* es una lista */
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.crosscol .PageList li, .footer .PageList li {  /* los items de la lista */
  background: none repeat scroll 0 0 transparent;
  float: left;
  list-style: none outside none;
  margin: 0.75em;
  padding-right: 0.75em;
}
.crosscol .PageList h2 {  /* el título */
  display: none;
}
.PageList li a {  /* cada item es un enlace */
  font-weight: normal;
}
.PageList li.selected a {  /* se resalta un item si es que estamos en esa página */
  font-weight: bold;
  text-decoration: none;
}
Los detalles a cambiar variarán segun sea la plantilla pero, podría tener cualquier diseño.

3. La última opción es no hacer nada. En ese caso, publicamos la página y luego, tomamos nota de la dirección URL generada y la usamos en un enlace, como a cualquier otra.

¿Cuál es el resultado de todo esto? Una entrada con una URL diferente al resto y nada más (ver ejemplo).

Una mìnima alternativa de personalización extra es que este tipo de páginas pueden ser identificadas y por lo tanto, pueden usarse condicionales:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    ... esto sólo se ejecutará en las páginas estáticas
</b:if>
o bien:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    ... esto se ejecutará en todas las páginas excepto en las páginas estáticas
</b:if>
Hay preguntas que por ahora no tienen respuestas:

¿Tiene un feed? Aparentemente no.
¿Se indexan? No sé. Esperemos que no ya que eso sería ilógico.

¿Es un avance? Y si pero, es poco, muy pero muy poco; mucho menos de lo que los usuarios de Blogger se merecen y muchísimo menos de lo que los desarrolladores podrían hacer si trabajaran un poco.

Suscribirse a: Entradas (Atom)
 

2009 ·ElHackerZ by TNB

PostsComments