[+/-] 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>

[+/-] Padding y Margin en CSS

En el lenguaje CSS existen estos dos atributos para cada elemento html en una página web, y debido a que los funcionamientos de estos atributos es un tanto similar puede existir una alguna confusión a la hora de utilizarlos. Si bien esta claro que cada atributo crea un espacio alrededor del elemento pero cada uno lo hace a su manera.

Leer la entrada completa

[+/-] Tipografia en CSS

Como ya antes había publicado, el uso de fuente va muy ligado a la página y al tema de la misma, siempre sin descuidar el tamaño de la fuente. Aquí veremos como implementar la fuente de tu elección en una página web mediante CSS.

Al definir una fuente en CSS, para un selector cualquiera, se utiliza la siguiente propiedad o atributo:

Leer la entrada completa

[+/-] Tipografia y uso de fuentes

En esta ocasión tocaremos un punto muy importante tal vez tan importante como los colores a utilizar a la hora de diseñar una página web. Son los tipos de fuente o tipografía.

Las fuentes mas utilizadas en el Diseño de páginas web son:
Helvética
Trajan
Garamond
Futura
Bodoni
Bickham Script Pro
Frutiger

Leer la entrada completa

[+/-] Screen Tweet; comparte tus videos en Twitter

Y seguimos, como en un proceso de recaudación, con otra herramienta que nace al rededor o en base a la red social que ha crecido en popularidad de manera sorprendente, incluso mas rápido de lo que lo hizo Google.

Una muy sencilla, pero en muchas ocaciones muy util. Si te interesa entra aqui!!

Leer la entrada completa

[+/-] Blogger cumple 10 años

Una de las plataformas mas importante de la blogósfera, Blogger. Cumplirá en el mes de agosto 10 años de ofrecer un servicio gratuito y totalmente personalizable, para compartir lo que quieras en un blog.

Algunos datos interesantes de Blogger:

• Cada minuto de cada dia, son publicadas 250,000 palabras en Blogger.
• Millones de personas en todo el mundo utilizan Blogger para publicar en su blog cada semana
• Cerca de la tercera parte de los usuarios de Blogger, son de fuera de los Estados Unidos(en orden ascendente: Brasil, Turquía, España, Canadá, Reino Unido, etc.)
• El tema mas popular entre los usuarios de Blogger, es el fútbol soccer.

Sin duda una gran herramienta, aunque a veces, nos saca de quicio a algunos Blogger. Pero de igual manera ojalá y que cumpla muchos años mas xD!!

Referencias:
Oficial Google Blog

[+/-] El fondo en una página web

Sabemos que es un tanto difícil decidirse a la hora de escoger un fondo para tu página web, pues es parte fundamental y crucial para cada pagina y para los lectores de dicha página.

Aquí encontrarás lo que necesitas para poder elegir un excelente fondo para tu página o blog!!

Leer la entrada completa

[+/-] Koogle; Un buscador para rabinos ultraortodoxos

Una compañía israelí ha desarrollado un motor de busqueda un poco particular, ya que filtra los resultados de imágenes de mujeres mostrando su cabello natural, pues en la religión judía no se permite, es por eso que utilizan mascaras en la cabeza.

Al parecer Koogle cumple con las exigencias de los rabinos ortodoxos, los cuales prohibieron el uso de Internet a los judíos para asegurarse de que los creyentes eviten el material explícito sexual.

Mira que unusuales son los filtros con Koogle!!

Pues a quien no le ha pasado que al estar buscando alguna imagen y de repente se encuentran con otra cosa, incluso hasta con poca ropa. Esto ya no será ningún problema para los creyentes judíos que utilicen Koogle.

Otro filtro poco usual es que en compras a Israel, no permite comprar objetos que los rabinos no permiten tener en casa, como los equipos de televisión.

También el motor de búsqueda impide la carga de imágenes o compras en el Sabbath judío, el cual, impide cualquier tipo de trabajo o negocio.

Según se informa en la propia web, gracias a Koogle se puede navegar y "disfrutar sin temor de cualquier servicio proporcionado por Internet de la forma más adecuada a los valores religiosos". Y todo ello, según "los mandamientos de la Torah".

Referencias:
ElPeriodico.com
ElUniversal.com

[+/-] Buscador de Google para microblogging

Si bien Google tiene un buscador para blogs este no es del todo útil, ya que la información que se encuentra en las búsquedas es poco actualizada y casi no aparecen blogs en dichas búsquedas.

Según recientes publicaciones del blog oficial del gigante de Internet, esta preparando un buscador para microblogging, que tendrá bastantes mejoras del actual buscador de Twitter, por ejemplo, pues ordenará los resultados por relevancia, a diferencia del de Twitter, que ordena los resultados por fecha.

Por otro lado este nuevo motor de búsqueda ofrecerá resultados de todas las plataformas de microblogging (Jaiku, Plurk, Twitter, Identi.ca...)

Referencias:
GoogleSystem.blogspot.com
DownloadSquad.com

[+/-] Mini-Refrigerador USB, para tus bebidas

Un nuevo y curioso gadget ha llegado y por nada mas y nada menos que por $19.90. Algo que seguramente nos ayudará al momento de tener heladas nuestras bebidas al estar en la PC.

Aunque no es recomendable utilizarse en laptops, pues utiliza la energia de la computadora para así poder enfriar la bebida.

Que vendrá después?

Referencias:
ThinkGeek.com

[+/-] TwitPickr; Twitter y Flickr se unen en esta herramienta

El microblogging cada vez se hace mas popular entre la sociedad internauta, y como cualquier producto de la vida real, entre mas demanda mas producto o en este caso mas complementos.

TwitPickr es una herramienta que permite conjugar dos grandes de las redes sociales, Twitter y Flickr, al publicar en Flickr las imágenes que ya hemos subido a TwitPic, con una gran facilidad.

Así que si utilizas constantemente estas dos aplicaciones sigue leyendo!!

El funcionamiento de la página es muy sencilla simplemente necesitas ingresar tu nombre de usuario, y después seleccionar las imágenes que quieras pasar a Flickr para lo que también necesitaras ingresar tus datos de usuario.

Sitio: http://twitpickr.wijndaele.com/

[+/-] Microsoft venderá Windows 7 sin IE

Como ya todos sabrán, la Comisión Europea acusó a Microsoft por monopolio al incluir Internet Explorer en su sistema operativo, dicha práctica perjudica a la competencia limpia entre navegadores de Internet y que además socava la innovación tecnológica.

Ahora, al parecer, el gigante informático venderá su nuevo Windows 7 sin Internet Explorer. Después de que Microsoft diera la opción de poder desinstalar varios programas de su sistema

• Windows Media Player
• Windows Media Center
• Windows DVD Maker
• Internet Explorer 8
• Windows Search
• Handwriting Recognition
  
• Windows Gadget Platform
• Fax y Scan
• XPS Viewer y Services

, por la misma acusación de monopolio.

Asegura la compañía que "Los fabricantes de ordenadores y los usuarios podrán instalarlo o no, como prefieran", al momento de recordar que su actual sistema Windows Vista, permite instalar "Libremente" cualquier otro explorador.

La Comisión Europea(CE), en un comunicado, había sugerido a Microsoft sugerir la instalación de algún explorador alternativo al Internet Explorer: "En lugar de eso, Microsoft aparentemente ha decidido ofrecer a los consumidores una versión de Windows sin ningún navegador. En lugar de más oferta, Microsoft parece haber decidido ofrecer menos", ha señala la CE.

Bruselas ha tenido desde hace algunos años una batalla con Microsoft, ya que no ha respetado algunas reglas de competencia, también por lo cual lo ha multado por alrededor de 1.676 millones de euros.

El sistema operativo será vendido sin Internet Explorer a partir del 22 de Octubre. Y de nuevo el usuario será quien mas pierda al no tener ningún explorador de Internet instalado en el sistema.

Referencias:
ElPais.com
BBC.co.uk
ADN.es
20minutos.es
expansion.com
NYTimes.com
ElMundo.es
Yahoo.com
DesarrolloWeb.com

[+/-] 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.