Menu minislide

Un sencillo menú con CSS y Javascript que podéis ver con el nombre de "menú uno (minislide)" en mi blog de pruebas.

[1] Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.
Lo colocamos entonces antes del </head> de nuestra plantilla de esta manera:

<script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text/javascript'/>

[2] Incluiremos ahora el código CSS necesario antes del ]]></b:skin> de nuestra plantilla:

/*MENU UNO (Minislide)
Stephen Clark
www.sgclark.com/sandbox/minislide
----------------------------------------------------------------------- */

#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}


#minislide {
        float: left;
        margin: 0;
        padding: 0px 10px 0px 10px;
        position:relative;
        z-index:2;
        }

#minislide li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        text-transform:uppercase;
        }

#minislide a:link, #minislide a:visited {
        float: left;
        line-height: 19px;
        font-weight: bold;
        margin: 0 10px 0px 10px;
        text-decoration: none;
        color: #888888;
        }

#minislide a.active:link, #minislide a.active:visited {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #888888;
        }
      
#minislide a:hover {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #CC0000;
        }
  
#animated-tab {
        position: absolute;
        z-index: 1;
        /*font-size: 85%;*/
        line-height: 19px;
        padding-bottom: 1px;
        border-bottom: 5px solid #888888;
        width:100%;
        }
      
br
        {
        clear:both;
        }

[3] Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript debajo de la cabecera o en el crosscol por ejemplo:

<div id="nav">
<ul id="minislide">
<li><a href="#">Inicio</a></li>
<li><a href="#" title="Mi perfil en Blogger">Perfil</a></li>
<li><a href="#" title="Suscribe Feed">Feed</a></li>
<li><a href="mailto:#" title="Envia un email">Contacto</a></li>
<li><a href="search/label/?max-results=999" title="Ver todas las entradas">Ver todas las entradas</a></li>
</li></ul></div>

Un click para Suecia

Estoy segura de que muchos de vosotros ya habéis leído la noticia en algún otro blog ya que, por suerte, está siendo bastante difundida, aún así he decidido publicar esta entrada ya que cuantos más seamos, más conseguiremos.

Somos un grupo de 3 estudiantes bahienses de la Universidad Nacional del Sur: Nicolás Álvarez, Ricardo Matías Ferro Moreno y Nicolás Komañski. En abril del año que viene (2009), junto con nuestro coach Martín Darío Safe, nos vamos a Estocolmo, Suecia .



¿Cómo?

El 15 de Noviembre de este año participamos en la Instancia Regional de la competencia ACM ICPC (International Collegiate Programming Contest) y salimos 3ros de la Región Sur de Sudamérica (3ros en Argentina, 4tos en toda Sudamérica). Con esto, clasificamos para la instancia mundial.

Pueden ver acá los resultados de la competencia para la región Sudamérica Sur. Nosotros somos el equipo “Bahía”.

Esta competencia consiste en resolver problemas de tipo algorítmicos-matemáticos. Cada grupo de 3 participantes cuenta con una computadora y 5 horas para resolver una cantidad de problemas que varía entre 8 y 11.

Para más información sobre la competencia, dejo un par de links:

• Información general (castellano)
• Página oficial de la competencia (inglés)
• Resultados todo Sudamérica
• ICPC en la Wiki (castellano)
• ICPC en la Wiki (inglés)
• Equipos clasificados para la instancia Mundial

¿Por qué estamos contando todo esto?

No creamos este blog para molestar a la gente con nuestra historia por el simple motivo de querer contarla. El problema es que, al ser invitados a la instancia Mundial, la organización de la competencia nos paga todos los gastos relacionados con la estadía en Estocolmo, pero no nos cubre los pasajes.

El costo de los pasajes es aproximadamente 6000 USD (dólares).

Creamos este blog con el objetivo de difundir nuestra situación, para poder darnos a conocer y ver si eso ayuda a conseguir alguna empresa, institución, etc, que nos auspicie.

En su blog han colocado anuncios de publicidad Adsense con la esperanza de que las visitas pinchen en ellos y conseguir así parte del dinero para costearse los pasajes, si os parece podríais visitarles y hacer un par de clicks en los anuncios, no es demasiado esfuerzo por una buena causa ¿no os parece?

¡Un click para Suecia!

Rotador de imágenes

Es una forma de mostrar diferentes imágenes cambiantes con un efecto de transición entre imagen e imagen muy lindo.
Puede utilizarse para mostrar cualquier tipo de imágenes teniendo en cuenta que todas han de tener las mismas medidas.
Es ideal para usarlo con banners o botones de otras web, ya que el código incluye la posibilidad de incluir un vínculo o enlace en cada imagen.
Podéis ver una demostración en la sidebar de mi blog de pruebas, en forma de mini-banners con enlace a cada página.

[1] Nos descargamos el archivo xfade2.js a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos.
Una vez obtenida la url del archivo, lo colocamos de esta manera antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[2] A continuación colocamos unas líneas de CSS en la plantilla justo antes de ]]></b:skin>:

/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 2px solid #CC0000;
overflow: hidden;
margin: 10px ;
padding:2px;
position: relative;
width: 200px;
height: 50px;
}
#rotator img
{
border: 0;
width: 200px;
height: 50px;
}

Donde dice: width: 200px; y height:50px;  colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

[3] Ya solo nos queda incluir el código necesario en un gadget HTMLJavascript para mostrar el rotador de imágenes e incluir los cambios necesarios :

<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->
</div>

 En "alt" y "title" colocaremos un texto explicativo, por ejemplo el título de la web a la que enlaza la imagen, así los navegadores mostrarán un cartelito (tooltip) con ese texto al poner el ratón sobre la imagen.

Fecha en todas las entradas

En Blogger cuando se publica más de una entrada el mismo día, solo la última publicada mostrará la fecha, en las demás el espacio que debería ocupar la fecha, se mostrará vacío.

Usando javascript podemos hacer que todas las entradas publicadas un mismo día, muestren la fecha correspondiente.

[1] Desde "edición html" localizamos esta parte del código de la plantilla con "la plantilla de artilugios expandida":

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

[2] Sustituimos ese código anterior por este otro:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

¿Necesitas ampliar esta información?: Vagabundia

¡Felices Fiestas!

Barra anuncio fija sobre el pie del blog

Podría usarse para anunciar o destacar cualquier cosa que necesitemos ante nuestras visitas.

En este ejemplo colocaremos un mensaje animando a suscribirse al feed, que se mostrará sobre la parte inferior del blog y permanecerá fijo aun cuando hagamos scroll, pero que tendrá la posibilidad de ocultarse con un simple click.

[1] Una vez logueados en nuestro panel de Blogger, nos situamos en la pestaña de "Edición Html" y localizamos dentro del código (sin expandir artilugios) la etiqueta: ]]></b:skin> y justo sobre ella, pegamos este código CSS:

#ftr_bar {
background:#166D80;
border-top: 3px solid #69A7B4;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
#ftr_bar .left {
float: left;
text-align: center;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #fff;
width:92%;
}
#ftr_bar .right {
float: right;
text-align: center;
width: 30px;
}
#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png) no-repeat;
text-decoration: none;
color: #fff;
padding:5px 0px 5px 30px;
}
#left_bar a:hover {
text-decoration: underline;
color: #fff;
}

[2] Algo más abajo veremos la etiqueta </head> justo antes de esta, colocamos este script:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_bar").style.visibility = "hidden";
}
//]]>

</script>

[3] Al final prácticamente del código de la plantilla, veremos la etiqueta </body> y justo sobre ella pegaremos este código:

<div id='ftr_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/blogspot/hnBy' target='_blank'>Suscribete y recibe lo ultimo del Escaparate</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;elescaparatederosa.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://img229.imageshack.us/img229/1809/closethumb1zd4.png' style='cursor:hand;cursor:pointer;'/></span>
</div>

Modificaciones:
En el paso [1] podemos cambiar el color de fondo de la barra y el color y anchura del borde:

#ftr_bar {
background:#166D80;  [Color de fondo aquí]
border-top: 3px solid #69A7B4; [Color y anchura del borde superior de la barra]

Así como la imagen del icono de rss, sustituyendo la url por la de el nuevo icono:

#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png)

En el paso [3] cambiamos la url del feed que en el ejemplo es la de mi blog (en color naranja), por la del blog donde vamos a colocar la barra; y el texto (destacado en verde) por el que queramos mostrar.
La url destacada en azul es la del icono de cierre, también puede cambiarse por la de nuestro propio icono.

Podéis ver el resultado en este blog de pruebas.

Archivos y Feed (expandir y contraer)

Hace tiempo explicaba como aplicar al gadget de "Etiquetas" un script para mostrarlas con la posibilidad de expandir y contraer desde su título dicho gadget.

Algunas personas me han consultado sobre la posibilidad de hacer lo mismo con el gadget de "Archivos" y "Feed" voy a explicar como hacerlo ya que, aunque el sistema es exactamente el mismo, será más fácil de aplicar con la explicación para el gadget concreto.

Gadget de Archivos

[1] En la parte de "Diseño HTML" de nuestro panel, sin expandir las plantillas de artilugios, localizamos la línea que corresponde al Gadget de "Archivos":

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

[2] Sustituimos esa línea por todo este código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +       &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId +       &quot;&amp;toggleopen=&quot; + data:toggleopen'>
        <span class='zippy toggle-open'>&#9660; </span>
    </a>
  <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; +         &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId +         &quot;&amp;toggleopen=&quot; + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
              &#9668;
            <b:else/>
              &#9658;
            </b:if>
          </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>

Notas:
Los archivos se mostraran como en el ejemplo de la imagen de arriba, es decir, el gadget con la opción "Jerarquía" en un principio, pero usar la opción "Lista" e incluso la de "Menú desplegable"  no supondrá ningún problema; podremos cambiar de una opción a otra desde "Editar" del mismo Gadget sin que este pierda la función de expandir y contraer.


Gadget Feed

[1] Localizamos la línea correspondiente al Gadget del Feed que será algo así:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>

[2] Sustituimos esa linea por este código:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
    <h2><data:title/></h2>
    <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
    <ul expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <b:loop values='data:feedData.items' var='i'>
        <li>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
          <b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != &quot;&quot;'>
              <span class='item-date'>
                &#160;-&#160;<data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != &quot;&quot;'>
              <span class='item-author'>
                &#160;-&#160;<data:i.author/>
              </span>
            </b:if>
          </b:if>
        </li>
      </b:loop>
    </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
    <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

"Leer más" solo en los post escogidos

Me he encontrado en Blogger Magz con una nueva forma de aplicar el "Leer más" solo a las entradas que queramos mediante el uso de javascript.

A juzgar por los comentarios de allí parece ser que no da el problema de otros "Leer más" anteriores, que aparecía en todas las entradas a pesar de no incluir el código en las mismas.

Yo misma lo he instalado en un blog de pruebas y parece ser que así es, que el "Leer más" solo es visible en las entradas en las que incluyamos el código para el efecto.

 [1] En nuestro panel de Blogger, nos situamos en la pestaña de "Edición HTML" y marcamos la opción de "Expandir las plantillas de artilugios" para colocar este código justo antes de </head>:

<b:if cond='data:blog.pageType == "item"'>
 <style>.fullpost{display:inline;}</style>
<b:else/>
 <style>.fullpost{display:none;}</style>
 <script type='text/javascript'>
 function checkFull(id) {
   var post = document.getElementById(id);
   var spans = post.getElementsByTagName(&#39;span&#39;);
   var found = 0;
   for (var i = 0; i &lt; spans.length; i++) {
     if (spans[i].className == &#39;fullpost&#39;) {
       spans[i].style.display = &#39;none&#39;;
       found = 1;
     }
     if (spans[i].className == &#39;showlink&#39;) {
       if (found == 0) {
         spans[i].style.display = &#39;none&#39;;
       }
     }
   }
 }
 </script>
</b:if>

[2] Localizamos ahora esta parte del código de la plantilla:

<div class='post-body'>
  <p><data:post.body/></p>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>  

Dependiendo de la plantilla, la primera línea de este código podría verse así:
<div class='post-body entry-content'> o de alguna otra manera. Tomando como referencia el resto del código no será demasiado difícil localizarlo.

Y lo cambiamos por este otro:

<div class='post-body' expr:id='"post-" + data:post.id'>
  <p><data:post.body/></p>
  <b:if cond='data:blog.pageType != "item"'>
    <span class='showlink'>
      <p><a expr:href='data:post.url'>Leer más...</a></p>
    </span>
    <script type='text/javascript'>
      checkFull(&quot;post-<data:post.id/>&quot;);
    </script>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

[3] Una vez guardados los cambios, para usar el "Leer más" hemos de colocar un pequeño código en cada entrada en la que vayamos a usar el efecto de esta manera:

Parte de la entrada que estará a la vista

<span class="fullpost">

El resto de la entrada que estará oculta hasta pinchar en el "Leer más"

</span>

[4] Podemos incluir el código en Opciones - Formato -  Plantilla de entrada, así el código aparecerá automáticamente cada vez que vayamos a escribir un nuevo post, si en alguna entrada no queremos mostrar el "Leer más",  solo tendremos que borrar el código.

Imagen en la cabecera con enlace a otra página

Crea un blog solo para pruebas.
Tu plantilla original estará a salvo
y una vez comprobado el resultado
podrás hacer los cambios con seguridad...

Me han preguntado varias veces como añadir una imagen en la cabecera del blog cuyo enlace lleve a otra página.

Esto que puede parecer raro, tiene una explicación muy sencilla, pues hay algunas personas que tienen un blog o más dependientes de otro principal y lo que quieren es usar el header de los secundarios como enlace al principal.




[1] En nuestro panel de Blogger vamos a "Edición HTML" y localizamos el código que corresponde a la cabecera de la plantilla:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mi blog (cabecera)' type='Header'/>
</b:section>
</div>

[2] Vamos a eliminar ahora el gadget "Header" que vemos desde diseño desde donde subimos la imagen de cabecera al blog y lo sustituiremos por un gadget HTMLJavascrip.
El código anterior debe de quedarnos así:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML90' locked='false' title='' type='HTML'/>
</b:section>
</div>

[3] Si la cabecera tiene bordes añadidos (como es el caso de la Mínima) y queremos anularlos, localizamos este código más arriba, en la parte del CSS:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

En las dos líneas que están resaltadas en negrita, dejamos el valor del borde en 0px o directamente borramos las dos líneas por completo.

[4] Guardamos los cambios y Blogger nos mostrará este mensaje de advertencia:

Pinchamos en "confirmar y guardar" y nos dirigimos a la parte de "Edición" de nuestro panel, donde tendremos que ver ahora el gadget HTML en el lugar que antes ocupaba el elemento de la cabecera:

 

[5] Por último pinchamos en ese gadget en "Editar" y pegamos este código dentro:

<a href='aquí-la-url-de-la-página-a-enlazar'>
<img border="0" height="196" src="aquí-la-url-de-la-imagen-de-cabecera" width="760"/></a>

En width colocamos el ancho de la imagen en pixeles y en height el alto.

Enlace a comentarios en una imagen

El enlace que facilita la publicación de comentarios es uno de los elementos más importantes de nuestro blog , ya que nos posibilita el obtener un mayor número de comentarios.
Para los que no están habituados a los blogs se hace difícil localizar el sitio exacto donde deben pinchar para poder comentar, al menos en muchas de mis consultas se han quejado precisamente de esto bastante a menudo, así que vamos a destacar el enlace para comentar haciendo que se vea dentro de una imagen y situándolo en la parte de arriba de las entradas, mas o menos al lado del título.

Enlace a comentarios con imagen en la parte superior del post

[1] Iremos en nuestro panel a la pestaña de "Edición HTML" y tendremos que marcar la casilla de expandir las plantillas de artilugios.

[2] Localizamos ahora el código que corresponde a nuestro enlace de comentarios:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>

          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>

Una vez localizado el código tendríamos que transportar el código de donde está a donde vamos a mostrar los comentarios dentro de la imagen, es decir, copiarlo, guardarlo en el blog de notas por ejemplo, y eliminar el original.

[3] Localizamos ahora la parte del código de la plantilla donde vamos a pegar el código anterior. Podríamos colocarlo en distintos sitios dependiendo de donde queremos mostrarlo, por ejemplo justo después de esta línea estaría bien:

<b:includable id='post' var='post'>

[4] Modificaremos lo necesario en ese código para eliminar el texto del enlace y mantener únicamente el número de comentarios ya quedará mucho mejor para mostrarlo dentro de una imagen.
Hay que suprimir las etiquetas "<data:top.commentLabel/>" y "<data:top.commentLabelPlural/>", con lo que el código quedará así:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>

          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
          </b:if>
        </b:if>
      </span>

[5] Colocamos entonces una líneas en el CSS, siempre antes de ]]></b:skin>, para añadir los atributos del enlace y conseguir así el formato que queremos (imagen de fondo, fuente, dimensiones, márgenes, bordes, etc.):

.comment-link {
font-size: 150%;
background: url(http://img368.imageshack.us/img368/2623/comentabe7.png) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

Conservar los dos enlaces, una arriba con imagen y el de siempre debajo de la entrada.

Una vez efectuados los cambios anteriores tendremos el número de comentarios dentro de una imagen y al lado del título de nuestras entradas, pero habremos prescindido del enlace de "comentarios" en el pie de cada entrada (post-footer).
Para conservar ambas opciones, en lugar de eliminar el código original en el paso [2]  lo dejaremos donde está y tal como está, es decir, al código original no le eliminaremos las etiquetas del paso [4].

Tendremos que cambiarle la "clase" al nuevo enlace para que se distinga del anterior ya que sino ambos se verían dentro de la imagen.
En el nuevo código que hemos añadido, paso [4], cambiamos donde dice: <a class='comment-link' por <a class='comment-link2', y el código que hemos añadido en el CSS tendremos que ponerlo así:

.comment-link2 {
font-size: 150%;
background: url(http://img368.imageshack.us/img368/2623/comentabe7.png) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

SkyDrive, alojar archivos y usar la url correcta

Aviso

SkyDrive cambia las url de los archivos alojados cada cierto tiempo sin previo aviso. No es buena idea usarlo como alojamiento para enlazar archivos.
Solo sirve como almacén para no ocupar demasiado nuestra PC.

SkyDrive es un servicio de alojamiento de archivos que, entre otros tipos de archivos, nos permite alojar script en unos pocos pasos.
El uso de este servicio es bastante sencillo y por lo que he podido comprobar en casi todos los casos que me consultan, el mayor problema se presenta a la hora de localizar exactamente cual es la url que debamos usar.

[1] Una vez hemos accedido a SkyDrive mediante nuestra id de Windows Live (Hotmail, MSN, etc.) lo primero que vemos es una pantalla con algo como esto:

[2] Pinchamos en la carpeta que vemos en primer lugar y que dice "Publico".
Pasaremos entonces a otra pantalla con una serie de enlaces, pinchamos en "Crear carpeta":

Le ponemos un nombre cualquiera a la carpeta y pasamos a una nueva pantalla donde mediante un enlace se nos invita a incluir un archivo:

Pinchamos en ese enlace y agregamos el archivo que vamos a subir mediante "Examinar" desde nuestro PC (pueden subirse hasta cinco al mismo tiempo), pinchamos en "Cargar" y esperamos.

[3] Pinchamos ahora sobre el icono del archivo (ese que parece una hoja de papel con la esquinita doblada) y en la pantalla individual del archivo, vemos el mismo icono pero a mayor tamaño:

Por supuesto no tenemos en cuenta el aviso que saldrá resaltado en amarillo, ya que saldrá por defecto siempre que el archivo subido sea un script.

[4] Llego el momento de optener la url del archivo:

Firefox
Lo haremos pinchando sobre el icono grande con el botón derecho del ratón, y en la ventanita que se abre en "Propiedades" copiamos la dirección del enlace que será algo así:

http://w522ka.bay.livefilestore.com/y1pem4zcAZ0A7OliKRG1Dul3RhUEHg12E69eLnuGiOcaW35wOUKj0iL7SrvowrRg52jiC1Ch76dOSs/linkprefs.js?download

Para usarla lo hacemos eliminando la parte final, el ?download que está destacado en color rojo.

IExplorer
Bastará con pinchar con el botón derecho y "Copiar acceso directo". Para usarla también hemos de eliminar por supuesto, la parte final, el ?download.

Headers Navideñas

Una fantástica colección de 75 cabeceras con motivos navideños.

Podéis descargarlas desde ConectaBlog

Abrir enlaces externos en pagina nueva de forma optativa

Los visitantes de nuestro blog tendrán la posibilidad de escoger la forma de abrir los enlaces externos de nuestro blog, para ello usaremos un script y mediante una casilla en nuestra sidebar daremos la posibilidad de elección.

[1] Tendremos que copiar el script en el blog de notas por ejemplo y modificar los datos que he puesto en negrita por los vuestros .

<!--
/*
Link Target Preferences v.1.1
http://www.noscope.com/journal/2004/10/link-target-preferences
*/

// BEGIN Configuration
// estas URLs seran consideradas internas y se ignoraran
var url_1 = "http://MIBLOG.blogspot.com";
var url_2 = "http://www.google.com";

// Preferencia por defecto:
// El valor "true" abre los enlaces en nueva ventana por defecto, "false" los abre en la misma
var open_blank_default = true;

// Titulo Blog - se usa solo para no crear interfencian con las cookies
// No espacios, ni caracteres especiales

var site_title = "elescaparatederosa";
// FIN configuracion

// Cookie Functions
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
// Checkbox Loader
function loadLinkPrefs () {
if (readCookie(site_title+"_linkprefs_cookie")) {
initVal = readCookie(site_title+"_linkprefs_cookie"); // Load cookied preference
} else {
createCookie(site_title+"_linkprefs_cookie", true, 20000)
initVal = open_blank_default; // If no cookie is set
}
openBlank = initVal;
setCheckbox(eval(initVal))
}
// Set Checkbox State
function setCheckbox(state) {
openBlank = state;
document.getElementById('linkprefs').checked = state;
setTargets();
createCookie(site_title+"_linkprefs_cookie", state, 20000)
}
// Configure Link Targets
function setTargets() {
var link, l = 0;
if (openBlank == true) {
while (link = document.links[l++]) {
// Open in _blank, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_blank';
}
} else {
while (link = document.links[l++]) {
// Open in _top, except all links starting with...
if (link.href.indexOf(url_1) == -1 && link.href.indexOf(url_2) == -1 && link.href.indexOf('javascript') == -1) link.target = '_top';
}
}
}
// Event Listener, by Scott Andrew
function addEvent(obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
}
//-->

[2] Una vez modificado el script lo guardamos como linkprefs.js y lo subimos a un alojamiento colocando la dirección (url) obtenida en dicho alojamiento en este código y lo colocamos antes de </head>:

<script src='URL_DEL_SCRIPT'></script>

[3] Para terminar añadimos estas líneas de código donde mostraremos la casilla optativa para abrir los enlaces:

<div class="linkprefs">
<p style="display: block;"><input id="linkprefs" value="linkprefs" name="linkprefs" onclick="setCheckbox(document.getElementById('linkprefs').checked);" type="checkbox"/>
<label for="linkprefs" title="opciones de navegacion">Abrir enlaces externos en nueva ventana</label></p><span></span>
<script type="text/javascript">addEvent(window, 'load',loadLinkPrefs);</script>
</div>

Visto en: La Blogueria

Estrella de Navidad

Seguimos con cosillas para adornar el blog en estas fechas navideñas, pero antes de nada os recomiendo que no pretendáis poner todos estos adornos navideños a la vez, pues el funcionamiento del blog podría verse afectado.

Feliz Navidad

Esta Estrella de Navidad se pasea a lo ancho de nuestra pantalla de derecha a izquierda, saludando con la mano y deseando a nuestras vistas Feliz Navidad, una vez que desaparece por el lado izquierdo de la pantalla  vuelve a salir desde el derecho y así sucesivamente.

Ejemplo de funcionamiento.

Código:

Lo colocaremos en un gadget html en cualquier parte de la plantilla, por ejemplo en el footer.

<marquee  direction="left" style="position: absolute; left: 0px; top: 100px; height: 70px;" scrollamount="3"><img class="sin" src="http://img99.imageshack.us/img99/6566/xestelnadal2hl1.gif"/><span style="color: #FFB800; font-size: 20px; font-weight: bold;">Feliz Navidad</span></marquee>

Modificaciones:

• Podemos usar cualquier imagen que nos guste, cambiando la url de la estrella por la de la imagen que vayamos a utilizar.
  

•  direction="left" Si queremos que la estrella comience su paseo por la derecha en lugar de salir desde la parte izquierda, cambiamos "left" por "right".

• top: 100px; Es la distancia desde la estrella a la parte superior de la pantalla, según queramos que se vea más arriba o más abajo, cambiamos ahí el valor 100 por el que necesitemos.

• height: 70px; Aquí pondremos el alto que tiene nuestra imagen e incluso algo más, para que esta no se vea cortada.

• scrollamount="3" La velocidad de desplazamiento, a mayor número más velocidad.

  Esta línea es la que controla el aspecto del texto que sigue a la estrella:

<span style="color: #FFB800; font-size: 20px; font-weight: bold;">Feliz Navidad</span>

Aquí podemos cambiar el color del texto y el tamaño. Si no queremos mostrar ningun mensaje siguiendo a la imagen, sencillamente borramos esa línea.

Paginación de comentarios en Blogger

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

No hace mucho un lector del blog me preguntaba si conocía alguna manera para hacer que los comentarios aparecieran en varias páginas, ya que su problema era que tenía demasiados comentarios en algunas entradas y la página se alargaba demasiado.

Mi respuesta fue que si estaba usando el antiguo formulario de comentarios, no había problema, ya que una vez superados los 200 comentarios en una entrada, Blogger añade la paginación de los mismos en el formulario:


















Por supuesto el problema era que no quería prescindir del nuevo formulario de comentarios por lo que le contesté que con este sistema de comentarios no era posible su paginación.

Anoche creando un nuevo blog para unas pruebas, me di cuenta de un código que aparecía en la nueva plantilla y que yo al menos, no había visto hasta entonces:

Supuse que era para posibilitar la paginación de los comentarios aún usando el nuevo formulario para comentar, pero me era imposible comprobarlo ya que en ese blog no tenía ningún comentario.

Como prácticamente sucede con todos los nuevos servicios que Blogger nos ha ido proporcionando, el código no aparece en las plantillas antiguas, así que decidí copiarlo y colocarlo en la plantilla del Escaparate en la misma posición en que aparecía en la plantilla de pruebas (imagen de arriba).

Una vez guardados los cambios sin problemas, ya solo me restaba examinar alguna de las entradas con gran número de comentarios y efectivamente ahí estaba:

Así que desde Edición HTML y con la casilla de expandir las plantillas de artilugios marcada, localizamos esta línea:

<dl id='comments-block'>

Justo sobre esa línea colocamos el código necesario para que se muestren los enlaces de paginación:

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
Total comentarios: <data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

Como podéis comprobar es a partir de los 200 comentarios lo que a mi personalmente me parecen demasiados, pero tratándose de mejorar cualquier aspecto del blog ¡menos es nada!

Nieve en el blog (II)

El año pasado a principios de Diciembre veíamos como conseguir que la nieve apareciera en nuestro blog con motivo de las cercanas fechas navideñas.
Este año os traigo otra manera de incluir nieve en el blog mediante el uso de un script que he encontrado en DynamicDrive.
El efecto es sencillo pero no por eso menos espectacular, los copos son simples puntitos a los que da la impresión de "manejar" el viento.
El resultado queda precioso en los blogs con fondo oscuro.
Podéis verlo en funcionamiento en esta página de ejemplo en  DynamicDrive.

[1] Nos descargamos el script snow.js a nuestro PC, lo descomprimimos y lo subimos a un alojamiento de archivos.

[2] Incluimos esta línea de código para el script casi al final del código de nuestra plantilla, justo antes de </body>

<script type="text/javascript" src="URL_DE_SCRIPT"></script>

¡Disfrutad de la nieve!