La Hora del Planeta: apaga tu sitio, enciende el planeta

Cómo instalar el plugin para apagar el blog/web durante La Hora del Planeta

Sábado 28 de Marzo 20:30 - 21:30h

¿Qué es?
La Hora del Planeta es un gesto simbólico que se celebra en casi todos los países del mundo, y que consiste en apagar la luz durante los 60 minutos de un día del año, como medida de ahorro energético en beneficio de la salud de nuestro planeta.

El evento ocurrirá el próximo sábado 28 de marzo, de 20:30 a 21:30 horas. Puedes encontrar más información en la web española, http://www.horadelplaneta.es y en la web internacional, http://earthhour.org/node?direct=true.

Nosotros, además de apagar la luz en nuestra casa, apagaremos simbólicamente nuestro sitio en Internet para sumarnos a este gesto. Para esto he diseñado una utilidad que simula el apagado, impidiendo el acceso a cualquier enlace de la página durante los 60 minutos del día señalado. A continuación explico como instalarla.

La utilidad ha de ser insertada en un lugar del blog o web que se ejecute siempre, independientemente de la página solicitada, por ejemplo si lo tuyo es un blog, lo más práctico es que lo instales como un gadget HTML, tal y como puedes ver en la columna de la izquierda en este blog.

Añade el gadget:


Y añade estas líneas de código al gadget:

<div style="width:269px;background-color:white;padding-bottom:1px;">
<div style="width:269px;color:#c4d7e8;font-weight:bold;background-color:black;text-align:center;padding-top:2px;">Sábado 28 de Marzo 20:30 - 21:30h</div>
<img style="width:269px;height:107px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHdAMWaAPqMXrd1mttaSqTi0KPJvco8bNK2BdwpBVDaUThgalYnaPfJCxLmZ0QJqYDYtSdUZWJyEe_rpBhBvVGQBePU2kha85Jn0cg48nGNoGaKBZDAXtjupB5YxKsz2bwD-P6DDP17c/s269/logo-H-Planeta.jpg" />
<ul style="margin-left:21px;margin-top:7px;font-size:0.9em;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCADgSeYbbTUTOstrgyyFbj3CB0rYWy9a4N5FPE2a_Q7fLeAQX-SjbPCXqCeGsZdQhKYASR1bdCkke7bvH7HWQ3VghBwePFMRn9p6QW6Jd1IuOzVF9WixziRKSeuNI1YUCFKc9_EB4vw/s0/diamond_red.gif);">
<li style="margin-bottom:7px;"><a target="newhp" href="http://www.horadelplaneta.es/que-es">¿Qué es?</a></li>
<li style="margin-bottom:7px;">Este sitio se apagará simbólicamente durante La Hora del Planeta (<a href="javascript:;" onclick="FADEAR(60);">probar ahora durante 60 segundos</a>)</li>
<li><a href="http://bikertb-blog-howto.blogspot.com/2013/03/la-hora-del-planeta-apaga-tu-sitio.html">Instalar esto en mi sitio</a></li>
</ul>
</div>

<!-- Corrige la posición de objetos flash -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});
</script>

<!-- Bloquea el acceso al blog el 28 de marzo de 2015, desde las 20:30h a las 21:30h -->
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/hora-planeta-d.js' type='text/JavaScript'></script>

Y ya está, el gadget se mostrará igual que ves en este blog, y el día 28 de marzo de 2015, entre las 20:30 y las 21:30 horas, esta utilidad apagará tu blog/web de la forma que puedes ver en esta muestra: Probar durante 5 segundos

Si tu sitio es una web en lugar de un blog, y dispones de un área de gadgets o widgets, que aparezcan siempre independientemente de la página solicitada, también puedes añadir el código anterior en esa área.

Si no dispones de ese área de gadgets, puedes añadir el siguiente código a la cabecera html de la web. El código ha de situarse justo antes de la etiqueta </head>. Aunque en este caso no se verán la imágen de la utilidad ni los enlaces.

Añade estas líneas de código a la cebecera html de tu web sin gadgets:

<!-- Corrige la posición de objetos flash -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});
</script>

<!-- Bloquea el acceso al blog el 28 de marzo de 2015, desde las 20:30h a las 21:30h -->
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/hora-planeta-d.js' type='text/JavaScript'></script>
</head>

El día 28 de marzo de 2015, entre las 20:30 y las 21:30 horas, esta utilidad apagará tu blog/web de la forma que puedes ver en esta muestra: Probar durante 5 segundos

Pasada La Hora del Planeta, puedes eliminar el código de esta utilidad de la cabecera html de tu página.

Los Mapas de Rutas de BikerTB

Este post está obsoleto, corresponde a la v2.x del API que Google decidió cerrar. Actualmente (10-feb-2014) se utiliza otro código compatible con la v3.x de API.

El mapa de rutas de BikerTB está construido con el API de Google Maps controlado con JavaScript. Google lo permite utilizar gratuitamente bajo determinadas condiciones de licencia que puedes leer al solicitar la API Key, siendo imprescindible para hacerlo funcionar en tu página. Para solicitar la API Key necesitas tener cuenta en Google.

Los tracks estan definidos en ficheros KML que deberemos alojar en algún servidor, por ejemplo en Google Sites. Y se cargan mediante formularios HTML.

Código necesario en la plantilla del blog:

<script type="text/javascript" src="http://www.google.com/jsapi?key=PON_TU_GOOGLE_MAPS_API_KEY_AQUI"></script>
<script type="text/javascript">
    google.load('maps', '2.160');
    var map;
    var geoXml;
    
    function initialize() {
      map = new GMap2(document.getElementById("map"));
// Define la Latitud, Longitud para el centro de tu mapa y el nivel de zoom en la siguiente línea:
      map.setCenter(new GLatLng(45.512654,-4.490452), 5);
// La siguiente línea opcional activa el plugin Earth:
      map.addMapType(G_SATELLITE_3D_MAP);
      map.addMapType(G_PHYSICAL_MAP);
      var mapui = map.getDefaultUI();
      map.setUI(mapui);
      map.setMapType(G_PHYSICAL_MAP);
    }
    
    function loadKml(url) {
      map.clearOverlays();
      geoXml = new GGeoXml(url);
      map.addOverlay(geoXml);
      geoXml.gotoDefaultViewport(map);
    }
</script></head>
<body onload="initialize()" onunload="GUnload">

Crea tus ficheros KML con cada una de tus rutas o grupo de ellas y enlázalas en un post o mejor en una página estática.
Este es el código necesario con los enlaces apuntando a ficheros KML donde estarán descritas las rutas a representar:

<!-- Botones para los mapas de grupo -->
<div style="float:left;"><form id="kmlurl-group" ACTION="#" NAME=EnGrupo>
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Centro.kmz'); return false;" value="Zona Madrid" />  
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Alicante.kmz'); return false;" value="Zona Alicante" />
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Essex.kmz'); return false;" value="Zona Essex" /></form></div><!-- Lista desplegable para los tracks individuales -->
<div><form id="kmlurl" ACTION="#" NAME=SoloUna><SELECT  style="margin: 2px 0 0 15px;" NAME="ruta" ONCHANGE="loadKml(document.SoloUna.ruta.value); return false;">
    <OPTION VALUE="">Rutas individuales:</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/ADF-Marmota-Batan.kmz">IBP 94BC: ADF - Puentes Batán y Marmota</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/mutxavista-maigmo.kmz">IBP 91BC: Mutxavista - Balcó d'Alacant</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/DehesaMoncalvillo.kmz">IBP 77AA: La Dehesa de Moncalvillo</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/sifones-jarama.kmz">IBP 74AA: Por el CYII: Los sifones del Jarama</OPTION>
</SELECT></form></div>
<div id="map" class="map" style="height:800px"></div>

Posts expandibles

Son los índices que aparecen al solicitar el listado de posts [LOG] o [CHK] en el menú superior del blog de BikerTB. Permiten una navegación más ágil, pudiendose además expandir y contraer una o varias de las entradas de dicho índice al hacer click en la marca [+/-]

Sustituir el siguiente código de la plantilla del blog:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>

Por este otro:

<b:includable id='PeekABooPost' var='post'>
  <div class='post uncustomized-post-template'>
      <table><tr>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <td width='40px'>
            <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
        </td>
        </b:if>
        <td>
            <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
       </td>
       </tr></table>
       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='post-body' expr:id='data:post.id' style='display:none'>
          <p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
      <b:else/>
        <div class='post-body' expr:id='data:post.id' style='display:block'>
        <p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
      </b:if>
  </div>
</b:includable>
<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:include data='post' name='PeekABooPost'/>
  <b:else/>
        <b:include data='post' name='post'/>
        </b:if>
      <b:else/>
      <b:include data='post' name='post'/>
      </b:if>

Y añadir este pequeño JavaScript en la cabecera que hace expandirse y contraerse las entradas:

<script type='text/javascript'>
function toggleIt(id) {
 post = document.getElementById(id);
 if (post.style.display != &#39;none&#39;) {
  post.style.display = &#39;none&#39;;
 } else {
  post.style.display = &#39;&#39;;
 }
}
</script>
</head>

Si las entradas no se contraen/expanden es posible que falte alguna función. En este caso sustituir el JavaScript anterior por este otro:

<script type='text/javascript'>
// <![CDATA[
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}

function showFullPost(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost")
            spans[i].style.display = 'inline';
        if (spans[i].id == "readmore")
            spans[i].style.display = 'none';
    }
}

var fade = false;
function showFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            if (fade) {
                spans[i].style.background = peekaboo_bgcolor;
                Effect.Appear(spans[i]);
            } else spans[i].style.display = 'inline';
        }
        if (spans[i].id == "showlink")
            spans[i].style.display = 'none';
        if (spans[i].id == "hidelink")
            spans[i].style.display = 'inline';
    }
}

function hideFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            if (fade) {
                spans[i].style.background = peekaboo_bgcolor;
                Effect.Fade(spans[i]);
            } else spans[i].style.display = 'none';
        }
        if (spans[i].id == "showlink")
            spans[i].style.display = 'inline';
        if (spans[i].id == "hidelink")
            spans[i].style.display = 'none';
    }
    post.scrollIntoView(true);
}

function checkFull(id) {
    var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    var found = 0;
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].id == "fullpost") {
            spans[i].style.display = 'none';
            found = 1;
        }
        if ((spans[i].id == "showlink") && (found == 0))
            spans[i].style.display = 'none';
    }
}

function commentDisplay(json) {
    for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
            alturl = entry.link[k].href;
            break;
        }
    }
    alturl = alturl.replace("#", "#comment-");

    if (entry.content) {
        comment = entry.content.$t;
    } else if (entry.summary) {
        comment = entry.summary.$t;
    }

    var re = /<\S[^>]*>/g;
    comment = comment.replace(re, "");
    document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
    if (comment.length < numchars)
        document.write(comment + '<br/><br/>');
    else
        document.write(comment.substring(0, numchars) + '...<br/><br/>');
    }
}
//]]>
</script>
</head>

Tablas CSS para columnas de texto

Código moderno para generar columnas de texto de igual altura.

Código CSS:

#contenedor {
 width:80%;
 float:left;
 margin-right: 10px;
 font-family: verdana;font-size:0.8em;
 color:#9e5205;
 text-align:justify;
}
#arriba {
 border: 1px solid #9e5205;
 margin-bottom: 10px; 
 padding: 10px;
 background-color:#f5e39e;
}
#tabla {
 display: table;
 width: 100%;
 border: 1px solid #9e5205;
 border-collapse:collapse;
}
#fila {
 display: table-row;
 background-color:#f5e39e;
}
#celda-izq {
 display: table-cell;
 width: 50%;
 padding: 10px;
}
#celda-der {
 display: table-cell;
 border-left: 1px dotted #9e5205;
 width: 50%;
 padding: 10px;
}

Código HTML:

<div id="contenedor">
    <div id="arriba">Lorem ipsum dolor...</div>
   <div id="tabla">
        <div id="fila">
            <div id="celda-izq">Etiam scelerisque lorem...</div>
            <div id="celda-der">Quisque volutpat metus...</div>
        </div>
    </div>
</div>
<div><p>Sed id suscipit sapien...</p>
    <p>In arcu enim, rutrum sed...</p>
</div>

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac consectetur enim. Morbi ac imperdiet risus. In justo sem, sodales in feugiat at, suscipit vel purus. Morbi sed mauris et eros congue rutrum. Nam scelerisque ipsum a risus sagittis nec elementum diam pretium. In nec sapien lectus. Proin enim neque, vestibulum vitae euismod et, condimentum sit amet elit. Vivamus a turpis ipsum, a scelerisque nulla. Nam sed dolor commodo nibh ornare ornare in vel erat. Pellentesque eget vestibulum orci. Duis ullamcorper tincidunt neque, ultrices imperdiet mi iaculis quis. Maecenas egestas lobortis turpis ac fringilla. Mauris et ornare ligula. Ut adipiscing felis id nibh eleifend sodales. Praesent lacinia urna sed nunc gravida dignissim. Proin malesuada commodo urna nec dapibus.

Etiam scelerisque lorem at nibh interdum bibendum. Donec convallis lacinia tortor vel fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque fringilla felis vitae tincidunt. Phasellus nec cursus diam. Proin tristique libero id mauris ullamcorper tincidunt vel non orci. Maecenas interdum lorem gravida nisl sagittis id porttitor tellus bibendum. Mauris vitae quam a felis euismod sollicitudin. Fusce scelerisque, metus quis imperdiet condimentum, dui ligula pellentesque velit, a accumsan dolor lectus eu augue. Pellentesque malesuada mauris a mauris blandit rutrum. Pellentesque faucibus tortor a ligula molestie sit amet iaculis libero commodo.

Quisque volutpat metus nec eros imperdiet non molestie nibh blandit. Quisque luctus, orci sed malesuada fermentum, urna sem convallis mauris, et mattis odio arcu eu neque. Integer ultrices ultricies cursus. Pellentesque eu ultricies mi. Suspendisse potenti. Cras nisl mi, mattis ac iaculis et, placerat ut quam. Integer pulvinar congue felis, at egestas mi bibendum quis. Mauris vel lectus eleifend libero pulvinar gravida id in purus. Mauris aliquam tristique porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce laoreet tellus at purus dictum nec varius ligula dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam lobortis nunc non nisl vulputate dignissim id non justo.

Sed id suscipit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna nunc, dictum vel hendrerit consequat, consequat non ipsum. Nunc eu nunc at odio placerat sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sed gravida lorem. Nulla vel rhoncus nisl. Cras ultricies nibh velit. Proin tempor augue lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi placerat metus eget erat aliquet porttitor. In ullamcorper dignissim risus, sit amet dictum sapien fermentum nec. Mauris tempor dolor et nisl facilisis non porttitor quam vulputate. Proin faucibus, augue at dictum ultrices, tellus tortor laoreet tellus, non vestibulum ligula neque a est. Pellentesque ultrices elit ac est porttitor vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean non odio et ligula facilisis ornare.

In arcu enim, rutrum sed viverra vel, fermentum quis justo. Donec nisi ligula, pulvinar et pharetra eget, pulvinar eget lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc tortor, posuere sed consectetur id, fringilla non elit. Nulla sit amet neque justo, eu dapibus magna. Etiam eget vehicula mi. Nunc metus mi, sollicitudin sit amet convallis non, facilisis et ipsum. Sed non sapien non lorem ornare rhoncus ac sit amet nisl. Duis ut nunc leo. Nam imperdiet ante augue, fringilla porta mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris quis odio odio, porta elementum velit. Praesent sit amet nisl nisl, at aliquam nunc. Quisque orci ligula, elementum in consectetur sed, imperdiet sit amet quam. Etiam fermentum elit quis lectus mollis id porta odio auctor. Integer sapien mauris, faucibus id vestibulum convallis, tristique vel nulla. In hac habitasse platea dictumst.

La cabecera de BikerTB

La cabecera está basada en la plantilla estándar Blogger Sand Dollar de Jason Sutter ligeramente retocada.

La altura de la cabecera se ha modificado fijándose en 113px según se indica en el post Redimensionado de los elementos principales.

El título y subtítulo conservan el diseño original de la plantilla. No se ha variado la fuente, el color ni el tamaño.

Gráfico del ciclista de madera pasando bajo la cubierta MTB. La cubierta se sacó de un catálogo online recortándola adecuadamente, creo recordar que era de las cubiertas que monté en ese momento, unas Specialized The Captain Control 2Bliss. El ciclista es parte de un montable que venden en "los chinos" y que alguien me regaló. La composición se grabó en una imágen con formato PNG y fondo transparente, fijándola en la esquina superior derecha del blog. Redimensiona la ventana del navegador para comprobar como la imágen permanece fija allí.

Este es el código de posicionamiento absoluto de la imágen insertado como se ve después de la etiqueta BODY:

<body>
<div><img style="POSITION: absolute; TOP: 0px; RIGHT: 40px; WIDTH: 530px; HEIGHT: 113px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUwNgAhiliVvNVhnuWnE7VX8GXw7p_fvxnzWuWm4G6C1gpMO0e0nbVgc0DakKuv4lpZqMYp8KTVZFpovpqzfB41muQuVnn4I75rQbHBlvhgQmDzOKGKBQU49jPObWN_SGe9p6w11aKIww/" /></div>

El menú de la cabecera sólo es codigo HTML en un gadget estándar de texto.

<div style="border-bottom: 1px dotted; color: rgb(224, 173, 18);" ><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">· </span><a style="text-decoration: none;" href="http://bikertb.blogspot.com/">INICIO</a> <span style="color: rgb(255, 0, 0);">·</span> <a style="text-decoration: none;" href="http://bikertb.blogspot.com/search/label/%5BKDD%5D">[KDD] LLAMADAS</a> <span style="color: rgb(255, 0, 0);">·</span> <a style="text-decoration: none;" href="http://bikertb.blogspot.com/search/label/%5BLOG%5D">[LOG] CRÓNICAS</a> <span style="color: rgb(255, 0, 0);">· </span><a style="text-decoration: none;" href="http://bikertb.blogspot.com/search/label/%5BCHK%5D">[CHK] PRUEBAS</a> <span style="color: rgb(255, 0, 0);">·</span> <a style="text-decoration: none;" href="http://bikertb.blogspot.com/search/label/%5BQUE%5D">[QUE] EN COLA</a> <span style="color: rgb(255, 0, 0);">·</span> <a style="text-decoration: none;" href="http://bikertb.blogspot.com/p/enviar-un-mensaje-bikertb.html">CONTACTO</a> <span style="color: rgb(255, 0, 0);">·</span></span></div>

Escape de entidades html

Esta utilidad escapa las siguientes entidades html:
< se escapa como &lt;
> se escapa como &gt;
& se escapa como &amp;
" se escapa como &quot;

Escribe o pega en esta ventana el código

Código escapado

---

Código fuente de esta utilidad

JavaScript necesario en la cabecera

<script type='text/javascript'>
//<![CDATA[
function $(id){ return document.getElementById(id) }
    function encode_entities(s){
    var result = '';
    for (var i = 0; i < s.length; i++){
    var c = s.charAt(i);
    result += {'<':'&lt;', '>':'&gt;', '&':'&amp;','"':'&quot;'}[c] || c;
    }
    return result;
}
function do_encode(e){
    $('dst').value = encode_entities(e.value)
}
//]]>
</script>
</head>

Código necesario en el post (en azul)

<div id="form"><b>Escribe o pega en esta ventana el código</b>
<textarea cols="80" rows="16" style="float:left;" onkeyup="do_encode(this)" onchange="do_encode(this)"></textarea>
</div><div style="clear:left;"></div>
<b>Código escapado</b>
<textarea style="float:left;" id="dst" cols="80" rows="16" onfocus="this.select()" onclick="this.select()"></textarea>

Los pies de post

Adorno el pie de post metiéndolo en un recuadro blanco y delimitándolo por debajo con una línea de puntos naranja.

Añadir el siguiente código (en rojo) a la clase .post-footer

.post-footer {
  padding:0px;
  margin:0px;
  color:$footercolor;
  font-size:80%; padding:5px; /* Añado algo de espacio texto-borde */
  background-color:#ffffff;
  border-bottom-color:#e0ad12;
  border-bottom-style:dotted;
  border-bottom-width:1px;
}

Y además modifico la forma de presentación del número de comentarios en el pie de post sustituyendo el siguiente código en azul:

</span>
<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>
<span class='post--icons'>

Por el siguiente código en rojo:

</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>1 Comentario
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>(VER LOS COMENTARIOS Y/O ESCRIBIR UNO)</a>
</b:if>
</b:if>
</span>
<span class='post--icons'>

Aviso pop-up asociado a un post

¡ Zona hostil para manazas !

Modificar el código de la plantilla puede ser perjudicial para el funcionamiento correcto de tu blog. Sólo deberías continuar si estás seguro de lo que estás haciendo.

Código para generar un aviso pop-up asociado a un determinado post. Se inicia con CSS y el usuario lo hace desaparecer con un pequeño JavaScript, por lo tanto es indetectable por los sistemas de protección anti-pop-up de los navegadores.

Agregar el siguiente código CSS (en rojo) a la plantilla del blog:

<style id='page-skin-1' type='text/css'><!--
.black_overlay{
  display: block;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}
.white_content {
  display: block;
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 20%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index:1002;
  overflow: auto;
}

Agregar el siguiente código (en rojo) en el inicio del post:

<div id="light" class="white_content">¡ Zona hostil para manazas !<br />Modificar el código de la plantilla puede ser perjudicial para ... <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Cerrar aviso</a></div><br /><div id="fade" class="black_overlay"></div>

Blockquotes / citas textuales

Formato para blockquote de los post definido en la sección CSS de la plantilla.

.post blockquote {
 margin: 10px 10px 6px 0px;
 width: 50%;
 background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoleft.png) left top no-repeat;
 float: left;
 position: relative;
}
.post blockquote div {
 padding: 0 48px;
 background: transparent url(http://lh3.ggpht.com/_5SvLLd6obBo/quoright.png) right bottom no-repeat;
 font: normal 80% /1.7em verdana, helvetica, sans-serif;
 color: #5f5f5f;
 text-align: justify;
}

Código html para el blockquote.

<blockquote cite="http://www.lipsum.com"><div>Quisque ... ... ...in massa.</div></blockquote>

Como se ve se usan dos imágenes (quoleft.png y quoright.png) para simular las comillas de apertura y cierre que tendremos que situar en algún sitio, por ejemplo en Picasa. La primera se posiciona de forma absoluta dentro del elemento blockquote, y la segunda está posicionada en la esquina inferior derecha como imágen de fondo de dicho elemento.

En el texto de ejemplo siguiente, el código html del blockquote se encuentra justo al terminar la frase en azul y antes de empezar la frase en naranja. Redimensiona la ventana del navegador para ver como fluye el texto alrededor del blockquote.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem lacus, adipiscing vel volutpat ac, egestas id enim. Nulla elit felis, iaculis id interdum at, euismod at enim. Morbi eget mauris velit. Aliquam arcu neque, auctor in tempus ut, condimentum quis libero. Ut tellus lacus, rhoncus ac adipiscing ut, convallis a lectus. Praesent ut odio neque, sit amet lobortis ante. Vestibulum ac semper sem. Curabitur sed lacus ut magna lobortis luctus. Pellentesque turpis est, blandit eu aliquam in, accumsan eu urna. Nullam vel mi nec massa sagittis fermentum id in lectus. Quisque blandit posuere metus ut ultrices.

Cras justo nisi, vulputate non vulputate a, iaculis nec nunc. Nullam nec leo eget tellus facilisis sodales. Vivamus posuere varius libero, sit amet faucibus risus dapibus id. Nullam a laoreet orci. Suspendisse urna massa, pretium vestibulum scelerisque sit amet, dictum ac risus. Cras tempor dui enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quisque quis purus sem, sed elementum metus. Curabitur vehicula lacinia risus ut vestibulum. Ut quis massa vel odio tincidunt blandit. Nam tempus purus quis elit tempor ut condimentum tortor imperdiet. Fusce purus erat, vehicula quis ornare et, fringilla nec augue. Curabitur convallis libero eget libero egestas id condimentum nibh vestibulum. Donec mollis fringilla congue. Nulla placerat suscipit felis, varius scelerisque dui euismod non. Nulla nulla leo, adipiscing a suscipit lobortis, cursus quis libero. Curabitur eget iaculis tortor. Pellentesque eget nunc et nisi sagittis rutrum id eget elit. In dui lacus, ornare eleifend sagittis sit amet, laoreet eget dolor. Ut enim augue, pellentesque ac faucibus vitae, varius in massa.

Nunc faucibus urna ut nisl porta vitae cursus massa dictum. Aenean nulla odio, placerat eu facilisis a, semper et sem. Ut placerat arcu ac augue lacinia lacinia quis sed tortor.

Sed euismod facilisis neque. Duis cursus, justo a imperdiet molestie, erat nibh malesuada orci, at lobortis diam quam quis leo. Phasellus blandit tristique purus, in varius urna pellentesque vel. Ut tempus consectetur massa eget euismod. Nulla facilisi. Morbi congue luctus ultrices. Nullam nibh sapien, tristique eu sagittis rhoncus, facilisis in orci.

Nunc venenatis, felis sit amet dictum consectetur, dolor nisi dignissim eros, sed molestie ante quam vel lacus. Phasellus varius molestie dolor, a tempus tellus ultricies sit amet. Suspendisse enim elit, auctor rhoncus tempus posuere, pulvinar vitae metus. Integer nec mi sit amet felis ultricies interdum. Curabitur laoreet pretium elit, eget commodo justo mollis in. Aenean laoreet dolor ac sapien pretium pellentesque. Cras et sapien ac ipsum volutpat fringilla. Mauris condimentum gravida massa, eu auctor ligula auctor vehicula. Morbi eu magna lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quam arcu, tempus ut fringilla varius, dignissim mattis ipsum. Fusce quis dui augue, at aliquet nunc. Donec ultricies augue nec lacus sollicitudin sit amet fringilla enim vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. In vehicula dignissim tortor eu auctor. Morbi fringilla lacinia posuere. Praesent vitae ultricies lorem.

Pellentesque mollis, nunc a ullamcorper eleifend, tortor tellus rhoncus diam, eget pulvinar ligula mauris sed tortor. Nam sit amet nisi urna, quis tempor arcu. Ut sollicitudin venenatis commodo. Duis luctus nulla et massa viverra nec posuere massa ornare. Curabitur vel leo non est sollicitudin ultricies a sit amet neque. Nullam luctus placerat placerat. Vestibulum adipiscing, orci sed porttitor facilisis, lorem odio hendrerit justo, eu sodales velit felis in risus. Aliquam iaculis congue nulla, sit amet viverra odio tincidunt ac. Integer sollicitudin imperdiet neque varius vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras porttitor molestie elementum.

Redimensionado de los elementos principales

Las dimensiones de la cabecera, zona de menús, zona de posts, etc., se definen en la plantilla del blog.

... ... ...
@media all  {
   div#main {
       float:right;
       width:73%; /* amplio el ancho de la zona de posts de 66% a 73% */
       padding-top:30px;
       padding-right:0;
       padding-bottom:10px;
       padding-left:1em;
       border-left:dotted 1px #e0ad12;
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
   }
   div#sidebar {
       margin-top:20px;
       margin-right:0px;
       margin-bottom:0px;
       margin-left:0;
       padding:0px;
       text-align:left;
       float: left;
       width: 24%; /* reduzco el ancho de la barra de menú de 31% a 24% */
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
}
... ... ...
#header {
   height:113px; /* añado esta línea para fijar la altura de la cabecera */
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   border-bottom:dotted 1px #e0ad12;
   background:#F5E39e;
}

Efecto pelar esquina

Ficheros necesarios.
peel.js - JavaScript de carga
peel-large.swf - flash efecto desplegado
peeel-small.swf - flash efecto plegado
peel-ojo.jpg - imágen efecto plegado
peel-needs-you.jpg - imágen efecto desplegado

Blogger no deja guardar estos ficheros así que los situamos en otro servidor, por ejemplo en http://sites.google.com

Pero antes debemos modificar el script peel.js con los enlaces correctos (en rojo).

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://redmtb.wordpress.com'); /* <--página que aparecerá al hacer click sobre el desplegado */

jaaspeel.small_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-small.swf';
jaaspeel.small_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-ojo.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-large.swf';
jaaspeel.big_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-needs-you.jpg');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';

Agregamos el siguiente código (en rojo) a la plantilla del blog justo después de la etiqueta body.

<body>
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel.js' type='text/javascript'></script>

El buscador de BikerTB

El buscador de BikerTB es una pequeña customización del gadget "Cuadro de búsqueda" que podemos encontrar entre los disponibles.

La presentación original del gadget en nuestra página sería esta:

El siguiente código CSS (en rojo) customiza la caja de búsqueda tal y como aparece en BikerTB.

<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
   display:none;
}
input.gsc-search-button {
   display:none;
}
input.gsc-input {
background: url(http://lh6.ggpht.com/_5SvLLd6obBo/TIqlsPhvm8I/buscar.gif) no-repeat;
background-color:#fff;
}
input.gsc-input:focus,input.gsc-input:hover {
background: #fff;
outline: none
}

Con este resultado:

Y el siguiente código CSS (en rojo) hace una customización alternativa.

<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
   display:none;
}
input.gsc-search-button {
   color: #FFF;
   background: #FF55AA;
   border: 1px solid #ff0084;
}
input.gsc-input {
   border: 2px solid #D8FFEB !important;
}

Mostrandose así:

Donde:
gsc-branding-text - Define la presentación del texto "con la tecnología de"
gsc-branding-img-noclear - Controla la imágen "Google"
input.gsc-search-button - Define el botón de búsqueda.
input.gsc-input - Define el formato de la caja de búsqueda.

Postear código fuente

Para postear código fuente en blogger únicamente hay que escapar las entidades del código que puedan interpretarse como html:
& la escapamos como &amp;
< la escapamos como &lt;
> la escapamos como &gt;
" la escapamos como &quot;

En Escape de entidades html tenemos una utilidad que nos hará la transformación de forma automática.

Y opcionalmente se puede adornar el resultado con CSS:

/* --INI display CODE-- */
pre {
  font-size: 12px;
  padding: 0;
  margin: 0;
  background: #f0f0f0;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  line-height: 20px;
  background: url(http://lh5.ggpht.com/NRgsYoIH-Ug/bloc.png) repeat-y left top;
  /* width: 600px; */
  overflow: auto;
  overflow-Y:hidden;
}
pre code {
  margin: 0 0 0 40px;
  padding: 18px 0;
  display: block;
}
.code {
  margin: 20px 0;
}
/* --FIN display CODE-- */

Y en el post el código convenientemente escapado entre las siguientes etiquetas html en azul:

<div class="code"><pre><code>&lt;img class=&quot;img-BTB&quot; WIDTH: 230px; FLOAT: left; HEIGHT: 175px;  src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNms2kqLdOb97fJSXSQgZJnTh9yPQswsYx_1VVy8lqRhUfnvQ7-Qgs1ptK3b08rVI_OWWk6MMtf8uVA_pFMcEAyuVVGGNlfbspNooeOIIEpgs3BFp-mSqwSPEKMLlj4Peuyh6Q1HubGs/&quot; /&gt;</code></pre></div>