[+/-] Nuevas caracteristicas en imagenes alojadas en Blogger

Hace algunos días que me percate de una nueva característica de las imágenes que subimos a Blogger. Se trata de modificar el tamaño de la imagen mediante el url de esta, para no sobrecargar la página.

Veamoslo de un modo práctico...

Leer la entrada completa

[+/-] Blogger: Acerca del Autor de la entrada tipo WordPress

Seguro ya habrán visto en algunos blogs que al final de la entrada se encuentra un pequeño apartado donde el autor de la entrada se presenta con sus lectores con un pequeño texto.

Es un recurso interesante, pues mediante eso, los autores del blog pueden hacerse algo de audiencia y preferencia única hacia ellos, mientras que de la manera tradicional casi siempre o siempre pasa desapercibido quien fue el autor que escribió tan fantástica entrada.

Esto no quiere decir que el blog se dividirá en varios sub-blogs, donde cada autor cree sus entradas y cada uno tenga su propia audiencia dentro del mismo blog. Pudiera ser, pero no propiamente, se trata solo de darle los créditos de la entrada al autor la entrada.

Puedes ver un ejemplo de su funcionamiento: Acerca del autor. Aunque no es posible en blogger de manera nativa o por defecto, podemos hacerlo manualmente y conseguiremos el efecto deseado, como se puede ver en la entrada de ejemplo.

Leer la entrada completa

[+/-] Blogger: Ocultar algunas etiquetas de las entradas

Alguna vez haz pensado en poder poner una etiqueta que solo puedas utilizar tu en el panel de administrar entradas, y por lo tanto no sea visible en el blog??

Ese es el objetivo de este hack, el utilizar una etiqueta( o varias si asi lo necesitas) invisible solo para fines administrativos o mejores resultados en las búsquedas o resultados de entradas relacionadas, pero para tus lectores esa etiqueta no exista o no sepan de ella. Bien, ya sabemos lo que queremos.

Ahora necesitamos aplicarlo, ¿como? solo sigue estos sencillos pasos:

Leer la entrada completa

[+/-] Blogger: Sustituir el nombre de las etiquetas por imagenes

Si te molesta que en cada entrada se muestren las etiquetas en forma de texto, por estética o por lo que quieras, sencillamente podrías hacer que cada etiqueta, en vez de mostrar su nombre en texto, mostrara una imagen relacionada con ella.

Es decir, si tienes de etiqueta algo así como "noticias", en vez de que tu entrada muestre "noticias" en la parte de las etiquetas muestre un periódico, diaro, boletin. Como le digan en tu país. En el siguiente enlace puedes ver un demo

En fin, ya entrados en el tema. lo que tenemos que hacer para mostrar las etiquetas con forma de imagen:

Leer la entrada completa

[+/-] Resaltar comentarios del autor del Post

El poder resaltar los comentarios hechos por el autor del Blog, en si, no es una funcionalidad de Blogger. Pero se puede lograr manipulando algunas variables que maneja el sistema. Comenzaremos copiando el código que toda plantilla mínima debe tener en la parte de los comentarios, en Notepad o algún editor de texto plano:

Leer la entrada completa

[+/-] Enlaces de navegacion con nombre de entrada

Aunque para algunos es muy poco para mi es un pequeño gran salto, pues hace un año que cree este blog sin saber absolutamente nada de los lenguajes web xD. Ahora soy todo un programador y hablando de desarrollar para es post numero 100, les comparto un hack, que si bien me resultó fácil desarrollarlo nunca lo he visto en otro blog de Blogger, así que disfrutenlo en este post número 100 xD!!

[1] Para añadirlo a tu blog, necesitas entrar en Diseño>Edicion HTML>Expandir plantillas de artilugios

[2] Despues buscar con Ctrl+F el siguiente texto:

<div class='blog-pager' id='blog-pager'>

Que es el que normalmente tienen las plantillas de Blogger, justo despues debes agregar el código Javascript:

        <!--  links con titulos -->
        <script type='text/javascript'>
          txtLink = function(lnk) {
            var t = lnk.split(&quot;/&quot;);
            t = t[5];
            t = t.split(&quot;.html&quot;);
            t = t[0];
            t = t.replace(/-/g,&quot; &quot;);
            t = (t.length &gt; 35) ? t.charAt(0).toUpperCase()+ t.substring(1,30) : t.charAt(0).toUpperCase()+ t.substring(1,t.length-2);
            document.write(t + &#39;...&#39;);
          }
        </script>
        <!--  terminan los links con titulos -->

[3] Despues de agregar el codigo, debes buscar esto otro:

<b:if cond='data:newerPageUrl'>

Donde verás algo como esto:

<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'>
      [....]
    </a>
  </span>
</b:if>

Que debes modificar de la siguiente manera:

<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'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        [....]
      <b:else/>
        <script type='text/javascript'>txtLink(&#39;<data:newerPageUrl/>&#39;);</script>
      </b:if>
    </a>
  </span>
</b:if>

[4] Por ultimo, necesitarás buscar esto:

<b:if cond='data:olderPageUrl'>

Que verás seguramente esto o algo por el estilo:

<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'>
      [....]
    </a>
  </span>
</b:if>

Que necesitarás modificar de la siguiente forma:

<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'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        [....]
      <b:else/>
        <script type='text/javascript'>txtLink(&#39;<data:olderPageUrl/>&#39;);</script>
      </b:if>
    </a>
  </span>
</b:if>

[+/-] Separar una etiqueta, manteniendola invisible

En un comentario reciente, me preguntaban como se puede hacer para dividir las entradas de una etiqueta individual de la demás, es decir, mostrar las entradas de una etiqueta fantasma que no aparezca en el gadget de etiquetas.

Lo primero que se me ocurrió es filtrar en el Archivo del Blog, las entradas con la etiqueta. Pero el dato de las etiquetas nunca apareció. Así que pensé que tal vez con un feed y un lector modificado se podrían mostrar todas las entradas de esa etiqueta y después ocultarla del gadget de etiquetas.

Por ejemplo, digamos que tengo una etiqueta de "colores", una de "marcadores" y una de "lapices". Entonces quiero que la etiqueta "marcadores" se muestren a parte de las demás etiquetas y también que cuando muestre las etiquetas no se vea la etiqueta "marcadores".

Entonces para solucionar el mostrar todas las entradas de cualquier etiqueta necesito agregar un gadget con este contenido en Javascript:

<script type='text/javascript'>
tagFeedRSS = function (json) {
  var m = (m ? m : 999);
  var f = "";
  m = ( m &gt; json.feed.entry.length ? json.feed.entry.length : m);
  for (var i=0;i&lt;m;i++) {
    var n = json.feed.entry[i];
    var l = n.link[4].href;
    var t = n.title.$t.link(l).bold();
    f = f + t + '<br/><br/>';
  }
  document.write(f);
}</script>
<script src='http://miblog.blogspot.com/feeds/posts/default/-/Etiqueta?alt=json-in-script&callback=tagFeedRSS&max-results=999' type='text/javascript'></script>

Unicamente debes sustituir el texto de otro color, con tus datos.

Y para esconder una etiqueta en el gadget de etiquetas solo necesito modificarlo como se explica en un post anterior: Ocultar etiquetas del gadget de Etiquetas

Con eso se solucionó el problema, para separar los posts!!

[+/-] Gadget de Etiquetas expandibles

Supongamos que tienes una lista aburrida de etiquetas, que tal si en vez de mostrar el numero de entradas en esa etiquieta, mejor mostrar el titulo de las entradas en ella.

Sería fantástico ¿no?. Además estos feeds no hace que tarde mas la página en cargar. Pues se cargan despues de cargar la página y van apareciendo etiqueta por etiquetaPara quienes buscan auto-promocionar su blog, pues como dije en ocaciones anteriores la auto-promocion de un mismo blog es muy importante para retener visitas y hacer que los lectores encuentren información relevante para ellos.

Se basa en un lector de Feeds especial para Blogger, que muestra solo los titulos de las entradas en cada etiqueta.

Además no hace que dure mas la página en cargar. Así que no se pierde nada en agregarlo. Al contrario se obtiene un mayor tiempo pero de visitas en el blog

[1] Primero debes ir a Diseño>Edicion HTML>Sin expandir plantillas de artilugios

[2] Antes de </head> o despues de <head> agrega el siguiente código javascript:

<script type='text/javascript'>tagsRSS = function (json) {
 var m = (m ? m : 999);
 var f = "",xz;
 m = ( m > json.feed.entry.length ? json.feed.entry.length : m);
 for (var i=0;i &lt; m;i++) {
   var n = json.feed.entry[i];
   var l=n.link;
   for(xz=0;xz &lt; l.length;xz++){
    if(n.link[xz].rel === "alternate"){
      l=l[xz].href;
      xz=l.length+10;
    }
   }
   var t = n.title.$t.link(l).bold();
   f = f + t + "<br/>";
 }
 document.open();
 document.write(f);
 document.close();
}</script>

[3] Por último agrega despues de alguna etiqueta similar a:

<b:widget id='XXXXX' locked='XXXXX' title='XXXXXX' type='XXXX' />

El siguiente código Blogger:

<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
   <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
   <b:loop values='data:labels' var='label'>
     <div class='etiqueta'>
       <b:if cond='data:blog.url == data:label.url'>
         <data:label.name/>
       <b:else/>
         <a href='#' expr:onclick='"if(document.getElementById(\"label_" + data:label.name + "\").style.display == \"none\"){document.getElementById(\"label_" + data:label.name + "\").style.display=\"\"}else{document.getElementById(\"label_" + data:label.name + "\").style.display=\"none\"};return false"'>[+/-]</a> <a expr:href='data:label.url'><data:label.name/></a>
       </b:if>
       (<data:label.count/>) <br/>
       <div class='etiquetas-expandibles' expr:id='"label_" + data:label.name' style='display:none;'>
       <script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=tagsRSS&amp;max-results=999"' type='text/javascript'> </script>
       </div>
     </div>
   </b:loop>

   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

[4] Si quieres modificar el estilo de los titulos de las entradas utiliza el siguiente selector CSS:

/*      Etiquetas Explandibles
====================================== */
.etiquetas-expandibles {
}

Siempre salen innovaciones y mejoras para cada cosa, así que puede haber mas formas pero esta es una que les comparto, además yo mismo la desarrollé.

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-] Ocultar etiquetas del gadget de etiquetas de Blogger

Ocultar etiquetas del gadget de etiquetas de Blogger, una utilidad que te podría servir. Tal vez hoy no, pero en un futuro. Un recurso con bastante futuro en Blogger. Algunas veces necesitamos mostrar u ocultar alguna etiqueta del gadget de etiquetas del blog, ya sea por cualquier razón. Basta con examinar y entender el gadget de Blogger para poder manipularlo.

Rapidamente explicaré como funciona la etiqueta "b:loop": esta etiqueta repite lo que esta dentro de ella según los parámetros:

<b:loop values='data:labels' var='label'>
  <!-- Código que se repetirá -->
</b:loop>

Es decir, el contenido de esta se repetirá tantas veces como etiquetas tengas en tu blog.

Ahora utilizaremos la etiqueta de control "b:if" que colocaremos dentro del "b:loop", en la cual colocaremos la condición, que en este caso es literalmente algo asi como: "si el nombre de la etiqueta es diferente de "Etiqueta_1", mostrar etiqueta":

<b:if cond='data:label.name != "Etiqueta_1"'>
  <!-- Código que mostrara las etiquetas -->
</b:if>

Tambien podemos modificar esa sentencia para que solo muetre una sola etiqueta:

<b:if cond='data:label.name == "Etiqueta_1"'>
  <!-- Código que mostrara las etiquetas -->
</b:if>

Según lo anterior, para que el gadget de las etiquetas solo muestre las que queremos tendremos que corregirlo de la siguiente manera:

<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <b:if cond='data:label.name != "Etiqueta_1"'>
        <li class='etiqueta'>
          <b:if cond='data:blog.url == data:label.url'>
            <data:label.name/>
          <b:else/>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          (<data:label.count/>) 
        </li>
      </b:if>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

En donde el texto color rojo.- Es la etiqueta del blog que estará actuando.

[+/-] Añadir miniposts en el Blog

Seguro que ya haz visto alguna vez minimo, el tipico mensaje de 'Leer Mas', que muestra solo la primer parte del post. Pero ¿cómo hacerle para mostrar un resumen de verdad, es decir, algún tipo de doble entrada y que el segundo minipost se muestre solo la página de la entrada y el primer minipost en las demás?

Solo es cuestión de añadir en la entrada dos etiquetas clave, de las cuales, la primera encerrará al primer minipost(resumen), y la segunda, encerrará al segundo minipost(entrada real).

Y es que, en algunas ocasiones publicamos entradas grandísimas que nos ahorraría un poco de espacio en las páginas de búsqueda, principal o en las de etiquetas, si agregáramos un resumen mas atrayente que solo la primer parte de la entrada.

Por que, supongamos que publiqué una entrada gigante de las Chivas de Guadalajara, digamos que es un resumen del encuentro, y esta grandísimo. Ahora lo publico y tengo que ocultar una parte, pero si en vez de esa primer parte muestro otro resumen mas atrayente, es decir algo como "Las Chivas rayadas de Guadalajara acaban de golear al América, entra aquí para ver el resumen del partidaso!!" y lógico que en la página de la entrada no vas a mostrar eso, por que se supone que ya vas a haber entrado. No ahí se mostrará ya la entrada del resumen del partido.

Se supone que para esas situaciones fue diseñado este Hack, disfrutenlo que fue un poco molesto de desarrollar. Funcionará de la siguientes maneras:

Para publicar la entrada con los dos minipost, es decir, que se muestren entradas diferentes en las páginas del blog, que en la página de la entrada. En la entrada debes agregar lo siguiente:

<span class='resumen'>Aqui solo estaría el resumen, que este solo se mostrara en las páginas que no sean la página de la entrada</span>
<span class='fullpost'>Esta sería la entrada que se muestre en la página de la entrada</span>

Lo cual dará como resultado en la página de la entrada:

Y en las demás páginas se mostrará otro contenido que atraiga a tus lectores:

Además si ya habías aplicado el truco del 'Leer mas', esto no afectará a las entradas con el truco, incluso puedes utilizarlo en las entradas que quieras de la siguiente manera:

Aquí estaría el resumen normal, el que todo mundo conoce, el que se muestra en la página principal del blog y también en la página de la entrada <span class='fullpost'> Aquí estaría la entrada completa</span> 

En la página de la entrada se mostrará todo el contenido:

Y en las demás páginas solo la primer parte de la entrada:

Y si decidieras publicas una entrada sin ningun hack, la entrada se publicará tal cual es, sin el enlace de 'Leer mas':

Aqui solo estará la entrada normal

Y la entrada se mostrará de la misma manera en la página del post y en las demás:

[1] Para agregar el Hack, solo debes entrar en Diseño>Edicion HTML>expandir las plantillas de artilugios y agregar el siguiente código antes de la etiqueta </head>:

<b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>.resumen{display:none;}</style>
<b:else/>
 <style type='text/css'>.fullpost{display:none;}</style>
 <script type='text/javascript'>
 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].className == 'resumen') {
       found = 1;
     }
     if (spans[i].className == 'fullpost') {
       if (found == 1) {
         spans[i].style.display = 'none';
       }
       else {
         spans[i].style.display = '';
         found = 1;
       }
     }
     if (spans[i].className == 'leermas') {
       if (found == 0) {
         spans[i].style.display = 'none';
       }
     }
   }
 }
 </script>
</b:if>

[2] Y sustituir <p><data:post.body/></p> o si no <data:post.body/>, por lo siguiente:

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

/!\ Es importante que si ya utilizas el truco del 'Leer mas' o algo por el estilo, lo quites del blog antes de agregar este otro!!.

[+/-] Mensaje de suscripción en página de cada etiqueta II

Hace un poco publiqué una manera de agregar un mensaje de suscripción en la página de cada etiqueta, junto con las entradas de la misma etiqueta, que se conseguía con un gadget, que yo mismo desarrollé. Pero a ese gadget se le pueden aplicar varias mejoras, como agregarle un fondo al mensaje, distinto con la etiqueta especificada, para conseguir el siguiente efecto:

El código Blogger, es el siguiente:

<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
  <b:includable id='main'>
    <b:loop values='data:labels' var='label'>
      <b:if cond='data:blog.url == data:label.url'>
        <b:if cond='data:label.name == "rojo"'>
          <style type='text/css'>
            .feedEtiqueta {background:red;}
          </style>
        </b:if>
        <b:if cond='data:label.name == "azul"'>
          <style type='text/css'>
            .feedEtiqueta {background:blue;}
          </style>
        </b:if>
        <span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMCv_2snT1V07m0zq4K-umBE19HATCsg1GqFlHOOTE0zuW5pGltKVej8Fnp1u27NuMs_fV6MZwQ_fiyFUwdAFZitrLVTQC1T19eE-KkHTlxT9gMwtB8Bk_akTyy4RQ36TU4_bx7ty7P8Y3/' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
      </b:if>
    </b:loop>
  </b:includable>
</b:widget>

El texto en color:

rojo.- es el nombre de la etiqueta en la que quieres aplicar el efecto.
verde.- es donde debes colocar el estilo CSS, que se aplicará.

Lo que realiza este otro gadget, es que al entrar en la página de la etiqueta, revisa si es la que esta definida(en el ejemplo anterior: color rojo) y si es esa aplica el etilo definido(en el ejemplo anterior: color verde) en el mensaje, se puede cambiar el color de fondo, cambiar el color de letra, poner una imagen de fondo o lo que necesites.
[1] Para agregar el gadget necesitas entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Y agregar el código despues de cualquier etiqueta </b:widget> que veas. Luego podrás moverlo en Diseño
[3] Luego para modificar el estilo del gadget(lo que no cambiara) en CSS será algo asi como esto:

.feedEtiqueta {
  border:1px dashed black;
  display:block;
  margin:0 auto 0 auto;
  padding:5px;
  width:500px;
}

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-] Administracion personal del Blog

Para los que ocultamos la navbar de Blogger, o al menos a mi, se hace muy tedioso el tener que ingresar a Blogger y después darle en edición de entradas, en especial si no esta activado el icono editor rápido de entradas. Pero gracias a una clase de CSS, predefinida por el mismo Blogger, esta tarea se simplifica y nos ahorra un poco de tiempo.

Lo primero a hacer, es obtener el id de el blog. Lo cual se consigue entrando a crear una entrada, en donde la barra de direcciones se contendrá algo parecido a esto:

Una vez que conoces el ID del blog, deberás sustituir el texto en rojo del siguiente código por el ID de tu blog:

<div id='Admin-Blog'
<span class='item-control blog-admin'>
<a href='http://draft.blogger.com/home'>Blogger Draft</a> |
<a href='http://draft.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://draft.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edición de entradas</a> |
<a href='http://draft.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://draft.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
<br/>
<a href='http://www.blogger.com/home'>Blogger</a> |
<a href='http://www.blogger.com/post-create.g?blogID=XXXXXXXXXXXXXXXXXX'>Crear entrada</a> |
<a href='http://www.blogger.com/posts.g?blogID=XXXXXXXXXXXXXXXXXX'>Edicion Entradas</a> |
<a href='http://www.blogger.com/blog-options-basic.g?blogID=XXXXXXXXXXXXXXXXXX'>Configuración</a> |
<a href='http://www.blogger.com/rearrange?blogID=XXXXXXXXXXXXXXXXXX'>Diseño</a>
</span>
</div>

Este código se agrega en un gadget HTML, pero no te preocupes nadie lo verá, solamente tu y eso solamente cuando estés logueado en Blogger.

De hecho lo que tenga las clases 'item-control blog-admin', solo podrá ser visto por los administradores del blog. Algún código en prueba o lo que se te ocurra.

[+/-] Recuperar el editor por defecto de Blogger

Ya son bastantes los que necesitan saber como cambiar de editor en Blogger, pues en blogger existen dos tipo de Blogger.
El primer tipo de editor y mas común es el editor llamado WYSIWYG (what you see is what you get).

El segundo tipo de editor es mucho mas liviano y no tiene tantas funciones.

Para cambiar el tipo de editor, es necesario entrar en la pestaña Configuracion del blog y después buscar hasta abajo algo como la siguiente imagen:

Y si quieres tener el primer tipo de editor tendrás que cambiarlo a Si, pero si quieres el segundo tipo de editor bastará con cambiarlo a No.

Cabe rescatar que los editores son muy similares, solo que el editor WYSIWYG es mas pesado y si no conoces mucho de HTML ni de CSS, te lo recomiendo. Pero si conoces bien como dar formato al texto en CSS y HTML, te será muy estorboso ese editor ya que tiene muchisimas funciones y algunas de ellas no las utilizaremos muy amenudo.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

[+/-] Expandir o contraer, cada gadget

Los gadgets contraíbles tienen la misma funcionalidad que las entradas contraíbles. Puedes utilizarlo en los gadgets que quieras!!

[1] Para colocarlo simplemente debes dirigirte a Diseño>Edicion HTML>Expandir plantillas de artilugios y agregar las siguientes lineas de código antes de la etiqueta </head>, para cargar los archivos JavaScript, que contienen los códigos necesarios para el efecto de desplazamiento(Prototype.js y scripttaculous.js):

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Ahora solo tienes que buscar por su nombre al gadget que quieres agregar el efecto:

<b:widget id='HTML101' locked='false' title='miGadget' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

[3] Y modificarlo como el siguiente ejemplo:

<b:widget id='HTML101' locked='false' title='miGadget' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><sup><a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:widget.instanceId + &quot;_miGadget&quot; + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none;'>[+/-] </a></sup><data:title/></h2>
    </b:if>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_miGadget&quot;'>
      <data:content/>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

Lo mejor en estos casos es tener como referencia la etiqueta:

  <b:includable id='main'>

Ya que esta etiqueta es la que muestra el contenido de cada gadget, asi que cada gadget la tiene. Dentro de ella estará siempre el código que necesitas modificar.

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-] Entradas expandibles en Blogger

Un efecto bastante vistoso, pues puedes hacer que las entradas se muestren expandidas o contraídas, para ahorrar espacio o simplemente por estética o por simple decoración. Puedes configurarlo para que sean por defecto o solo en las paginas de etiquetas y búsquedas.

/!\ Actualizacion 21/01/10: Se actualizo en el paso 3, la solución al problema de las páginas individuales de Blogger

Leer la entrada completa

[+/-] Aumentar y reducir el tamaño del texto de las entradas

Aumentar y reducir el tamaño de la fuente en las entradas, se puede realizar de mas de una manera. Existen varios métodos para lograrlo, aquí les explico el que yo utilizo.

[1] Debes ir a Diseño>Edicion HTML>Expandir plantillas de artilugios, donde tienes que agregarlo antes de la etiqueta </head>:

<!-- Start Text-Sizer -->
<script type='text/javascript'>//<![CDATA[
function ChangeSize(number,number) { if (document.all) { element = document.all['entrada'];} else { element = document.getElementById('entrada'); } var startSize = 12; var rateSize = 3;var numRate = 5; var startSizeLine = 14;var rateSizeLine = 3;var numRateLine = 5; var strActual = element.style.fontSize; var strLineActual = element.style.lineHeight; var intActual = parseInt(strActual.substring(0, strActual.indexOf("px"))); var intLineActual = parseInt(strLineActual.substring(0, strLineActual.indexOf("px"))); intActual += number; intLineActual += number; if (intActual < (startSize + ( (numRate + 1) * rateSize) ) && intActual > startSize-1){ element.style.fontSize = intActual + "px"; } if (intLineActual < (startSizeLine + ( (numRateLine + 1) * rateSizeLine) ) && intLineActual > startSizeLine-1){ element.style.lineHeight = intLineActual + "px"; } } function normalSize(){var strActual = element.style.fontSize;var strLineActual = element.style.lineHeight;var intActual = 12;var intLineActual = 14; element.style.fontSize = intActual + "px"; element.style.lineHeight = intLineActual + "px";}//]]></script>
<!-- End Text-Sizer -->

[2] Ahora tienes que ir a Diseño>Edicion HTML>Expandir Plantillas de Artilugios y encontrar el siguiente código:

<div class='post-body entry-content'>

Y cambiarla por la siguiente:

<div class='post-body entry-content' id='entrada' style='font-size:12px;line-height:14px'>

[3] Despues puedes agregar el siguiente código en un gadget HTML, o en la plantilla misma:

<p id='control_txtszr' style="font-family:verdana">
 <a href='#' onclick='javascript:ChangeSize(1,1);return false'>
   <span style='font-size:20px'>+A|</span>
 </a>
 <a href='#' onclick='javascript:normalSize();return false'>
   <span style='font-size:13px'>A|</span>
 </a>
 <a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
   <span style='font-size:11px'>A-</span>
 </a>
</p>

[4] Por ultimo, puedes modificar el estilo con las siguientes instrucciones CSS:

#control_txtszr {
color:{color del texto}
font:{tipo de fuente}
position:{absolute o relative}
top:{pixeles de espacio hacia arriba}
left:{pixeles de espacio hacia la izquierda}
right:{pixeles de espacio hacia derecha}
bottom:{pixeles de espacio hacia abajo}
}

/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[+/-] Ampliar imágenes con mouse y CSS

Ya habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.

El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.

El código CSS es el siguiente:

#img {
  width:300px; /* Este es el ancho de la imagen pequeña */
  height:400px; /* Este es el alto de la imagen pequeña */
  background: url(URL DE LA IMAGEN REDUCIDA) no-repeat top left;
  border:none;
}

#img:hover {
  width:410px; /* Este es el ancho de la imagen grande */
  height:546px; /* Este es el alto de la imagen grande */
  background: url(URL DE LA IMAGEN GRANDE) no-repeat top left;
}

El código HTML es el siguiente:

<img id='img'/>

Lo que cabe rescatar es que para cada imagen en la que utilices este efecto deverás colocarle un id='img1',id='img2', es decir que incremente cada imagen y lo mismo con el CSS, #img1, #img2.

[+/-] Mostrar u ocultar objetos Div, con Javascript y DOM

Existe un metodo para mostrar u ocultar elementos Div, es decir ocultar el elemento y todo lo que este dentro de él.

Inicialmente oculto

Estos botones niciarán en la página con el contenido no visible para el visitante, así el visitante podrá decidir si quiere mirar el contenido del botón o lo que oculta, xD.
CSS.- Botón con CSS:


Para que se entienda un poco mejor y mucho más práctico aqui esta un ejemplo visual:

Aqui estará la parte que se ocultará y puede contener lo que quieras, como Imágenes, Videos, incluso otro boton como este:

Todo lo que te puedas imaginar

Código:

<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>

Tradicional.- Botón sin CSS:


Si, bastante interesante el efecto, pero tambien puedes colocar en vez de que se vea con fondo color azul, puede ser un botón tradicional:

Que tal de la manera tradicional

<div><input value="Ver más" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Que tal de la manera tradicional</div></div>

Inicialmente visible

Los anteriores ofrecian la funcionalidad de mostrar solamente el botón y presionarlo para ver el contenido, pero si lo prefieres se podría conseguir el efecto contrario, es decir, mostrar el contenido y ocultarlo dependerá totalmente del visitante de tu página:

Tradicional.- Botón sin CSS:

Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.

El código es el siguiente:

<div><input value="Ocultar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div>Este es el contenido visible, tal vez una imagen, un video, una nota, que depende de el visitante de la página totalmente para ser visible u ocultarse, xD.</div></div>

Modificación del botón con CSS

El código se puede insertar en cualquier parte de nuestro web/blog, ya sea en entradas o en gadgets, así como en la propia plantilla. Tambien puedes personalizarlo en cuanto a los colores y bordes, así como el tipo de letra:

<div><input value="Ver más" style="color:white;background:#CCCCFF;border:1px ridge white;margin-left: 50px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver más';}" type="button" /><div style="display: none;">Todo lo que te puedas imaginar</div></div>

color:white; /* Aquí se cambia por el color en Hexadecimal o RGB, y este será el color de la letra */
background:#CCCCFF; /* Aqui se puede colocar una imágen de fondo y el color de fondo */
border:1px ridge #FFFFFF; /* Aquí se modifica respecto a los bordes en CSS*/
margin-left: 50px; /* Aquí se especifíca el espacio exterior a la izquierda */
padding: 0px; /* Aquí se especifica el espacio interior */
width: 80px; /* Aquí se especifica el ancho del botón*/
font-size: 14px; /* Aquí se especifica el tamaño de la letra */
font-family: trebuchet ms; /* Aquí se especifca el tipo de la letra */

O puedes utilizar el mismo efecto, pero en un enlace:

Ver más

Todo lo que te puedas imaginar

<div><a href='#' style="margin-left: 50px;" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Ver más';}return false" type="button">Ver más</a><div style="display: none;">Todo lo que te puedas imaginar</div></div>

[+/-] Texto que crece solo

Se podría utilizar para publicidad o para cualquier otra razón que requiera una atención especial, lo sencillo de esto no es que aumente por si solo de tamaño si no que colocarlo es aún mas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1]Solo tienes que dirigirte a Edición de HTML, y colocar despues de <head> y antes de </head> el siguiente script:

<script language="JavaScript"> 
var banZoom = null 
function creceLetra() 
{ 
var obj = banZoom 
var tma 
tma = parseInt(obj.style.fontSize) 
window.status = obj.style.fontSize 
if (tma<obj.maxTam) 
{ 
obj.style.fontSize = tma + 1
setTimeout("creceLetra("+obj.maxTam+")",20) 
} 
else 
setTimeout("resetear()",500) 

} 
function resetear(mn, mx, rapidez, idBan) 
{ 
if (banZoom == null) 
{ 
banZoom = document.getElementById(idBan) 
banZoom.maxTam = mx 
banZoom.minTam = mn 
banZoom.rapidez = rapidez 
} 
banZoom.style.fontSize = banZoom.minTam 
setTimeout("creceLetra()",rapidez) 
} 
</script>

[2] Y luego de instalarlo, donde quieras mostrarlo, ya sea un gadget o en la plantilla, necesitarás agregar el siguiente código para mostrarlo:

<div id="letras" style="text-align:center;position:absolute; font-size:10px; height:56px;width:100%; background-color: #CCFFCC;border: 1px solid #000000;">AQUI EL TEXTO QUE AUMENTA SOLO</div>
<script>resetear(1, 48, 10, 'letras')</script>

[Modificaciones]

text-align:center
Alineacion del Texto:left,center,left,justify.

font-size:10px
Tamaño del texto inicial:big middle o tamaño en pixéles

height:56px
Alto del div, o contenedor: pixeles o porcentaje

width:100%
Ancho del div, o contenedor: pixeles o porcentaje

background-color: #CCFFCC
Fondo del div, o contenedor: Colores en RGB o Hexadecimal.

border: 1px solid #000000
1px=ancho del borde
#000000=color
solid= tipo de borde(solid,dotted,double,dashed)
Borde del div, o contenedor: Colores en RGB o Hexadecimal.

TEXTO QUE AUMENTA SOLO
Este se reemplaza por el que requieras.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[+/-] Agregar 2 o mas gadgets en el header (Titulo)

Me he alejado un poco del blog pero a cambio tengo muchísimas ideas mas para compartir y mejorar nuestros webs/blogs. Espero y sean de su agrado.

Bueno En esta ocasión les mostraré como agregar 2 o mas gadgets a la cabecera de tu blog. Y así poder colocar cualquier objeto arriba o abajo de nuestra cabecera.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.

[1] Para poder realizar nuestra modificación necesitas entrar en el panel de Edicion HTML y sin expandir las plantillas de artilugios debes encontrar con CTRL+F el siguiente código:

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

[2] El número en color rojo puedes cambiarlo a cualquier otro que se te ocurra (Este será el número de gadgets que podras insertar).

[3] La palabra que esta en color azul (NO) cambiala a yes y todo estará listo para que puedas agregar un gadget en la cabecera de tu blog.