[+/-] Como colocar codigo de Enlazame!

El código de enlazame es indispensable para nuestros visitantes que quieres ayudar a nuestra causa promocionando un banner con la imagen mas representativa de nuestro blog, para lo cual es válido proporcionarles accesiblemente buenos banners de la mejor variedad para que puedan colocarlos en donde nuestros visitantes descidan.

Ya que si solo les proporcionamos una imagen grande estamos limitándoles, a estos pocos visitantes que nos tienen fe, los lugares donde pueden realizar la promoción. Es por eso que es muy necesario que les proporcionemos banner de buena calidad y de variedad.

Este es un listado de las mas populares herramientas para crear nuestros banners:

1. BannerBreak.com
2. CrearBanner.com
3. BannerFans.com
4. GifMake.com

Una vez listo nuestro banner podremos colocarlo en nuestro blog y mostrarlo a nuestros visitantes, para lo cual podemos hacerlo de varias maneras:

Leer la entrada completa

[+/-] Varias formas de integrar Goo.gl a Blogger

Si bien los servicios que ofrecían la opción de acortar una url ya existían hace algunos años se hicieron populares gracias a Twitter.com, la red social mas popular del momento.

Ahora que estos servicios están ganando popularidad están surgiendo cada vez mas servicios que ofrecen diferentes resultados:

TinyUrl.com
Bit.ly
TweetBurner.com
aUrl.es
Y el nuevo Goo.gl

Después de enterarnos del nuevo acortador de URL's de Google para la Google Toolbar y para FeedBurner rápidamente se expandieron a extensiones de Chrome y Firefox después a la página de Alexander Gaias y ggl-shortener.

Este ultimo es el que nos interesa, pues ofrece una API interesante para poder usar Goo.gl en cualquier sitio web de manera sencilla utilizando JSON. Y la forma de implementarlo:

[1] Necesitas entrar en el panel Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

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>

[+/-] Recuperar links de "Mas entradas","Entradas antiguas" y "Pagina principal"

En varias plantillas que son acopladas a Blogger, los links de navegación se pierden en el proceso, o simplemente los autores no los agregan por cualquiera que sea la razón.

/!\ 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.

En esta ocasión explicaré como es que deben de agregarse de nuevo los links de navegación:

[1] Tienes que ir a Diseño>Edición de HTML>Expandir plantillas de artilugios y localizar la siguiente linea:

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

[2] Y colocar justo después de esa linea:

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

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

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

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

[3] Y por ultimo necesitarás colocar el texto en rojo:

      <b:include data='post' name='post'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>

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

[+/-] Efectos con los links del blog

La mayoría de los links del blog se ven bastante iguales, y cuando están en una lista grande de links, ni se sabe cuales has visitado y cuales aún no.

/!\ 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] Los códigos a continuación se agregan en Diseño>Edicion HTML>Sin expandir plantillas de artilugios y antes de la etiqueta ]]</b:skin>

Para diferenciar los enlaces visitados, de los demás. Necesitas agregar el siguiente código:

a:visited {
  background: url(URL) no-repeat center;
  padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
  text-align:left;
}

Para diferenciar los enlaces activos, de los demás. Necesitas agregar el siguiente código:

a:active {
  background: url(URL) no-repeat center;
  padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
  text-align:left;
}

Para agregar un efecto que se active al pasar el mouse:

a:hover {
  background: url(URL) no-repeat center;
  padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
  text-align:left;
}

El texto en color:
Rojo, se sustituye por la url de la imágen/icono. Que aparecerá a lado de los enlaces visitados.
Azul, se sustituye por los atributos de la imágen/icono.

También existe la posibilidad o necesidad de colocar un icono, a un lado del enlace en una lista de algún tema en específico.

Para agregar un icono, a lado de las etiquetas del web/blog:

.label a {
  background: url(URL) no-repeat center;
  padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
  text-align:left;
}

Para agregar un icono, a lado de las listas de links en tu blog:

.linklist a {
  background: url(URL) no-repeat center;
  padding: {mitad del alto de la imagen} 6px {mitad del alto de la imagen} {ancho de imagen};
  text-align:left;
}

El texto en color:
Rojo, se sustituye por la url de la imágen/icono. Que aparecerá a lado de los enlaces visitados.
Azul, se sustituye por los atributos de la imágen/icono.