Mostrando entradas con la etiqueta Links. Mostrar todas las entradas
Mostrando entradas con la etiqueta Links. Mostrar todas las entradas

martes, 3 de abril de 2012

Abrir todos los enlaces en otra ventana (2)

Hemos visto cómo abrir todos los enlaces en otra ventana usando un script que deja a opción del lector si los enlaces se abren o no en una ventana nueva, y además usando otro método que es agregar en la plantilla el comando <base target='_blank'/> que hace que todos los enlaces de abran en otra pestaña.
Éste último parece ser la solución, sin embargo al agregarlo surge un problema, que si el lector hace click en las etiquetas, entradas antiguas, archivo del blog, etc. éstos también se abren en una ventana nueva, lo cual resulta bastante molesto.



Para solucionar esto Cartucho propone usar el atributo target='_parent' dentro de ciertas partes de la plantilla que harán que se force a que esos enlaces no se abran en otra ventana sino en la misma página. Este atributo hace lo contrario que el atributo target='_blank' es decir, indica que el enlace debe abrirse dentro de la misma página.


Empezamos primero poniendo debajo de la etiqueta <head> lo siguiente:
<base target='_blank'/>


Con esto ya se abren todos los enlaces en otra pestaña, ahora vamos a crear las "excepciones".



Entra a Diseño > Edición de HTML y marca la casilla Expandir plantillas de artilugios.

Busca los códigos que se mencionan y agrega lo que está en color rojo donde se indica.



Para el título de la entrada.

<b:if cond='data:post.url'>

<a expr:href='data:post.url' target='_parent'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>



Para el título del blog o la cabecera localiza los siguientes fragmentos, no están uno tras otro pero están cerca.

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl' target='_parent'><data:title/></a>

</b:if>

</b:includable>


<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block' target='_parent'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>



Para el link de los comentarios debajo de las entradas.

<b:if cond='data:post.allowComments'>

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

</b:if>



Para las etiquetas de las entradas debajo del post.

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag' target='_parent'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

</b:loop>

</b:if>



Para el enlace de enviar entrada por correo.

<!-- email post links -->

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg' target='_parent'>



Para el leer más de Blogger.

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title' target='_parent'><data:post.jumpText/></a>

</div>



Para el gadget de Etiquetas.

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' target='_parent'><data:label.name/></a>



Para el gadget de Archivos del blog localiza las siguientes tres partes, no están juntas pero sí dentro de la misma área.

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url' target='_parent'><data:i.name/></a>


<li class='archivedate'>

<a expr:href='data:i.url' target='_parent'><data:i.name/></a> (<data:i.post-count/>)

</li>


<li><a expr:href='data:i.url' target='_parent'><data:i.title/></a></li>



Para los links de navegación (entradas antiguas, entradas más recientes)

<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' target='_parent'><data:newerPageTitle/></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' target='_parent'><data:olderPageTitle/></a>

</span>

</b:if>



<a class='home-link' expr:href='data:blog.homepageUrl' target='_parent'><data:homeMsg/></a>

Para el gadget de páginas estáticas.

<li class='selected'><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>

<b:else/>

<li><a expr:href='data:link.href' target='_parent'><data:link.title/></a></li>



Esos son casi todos los enlaces dentro de Blogger que no queremos que se abran en otra ventana. Pero igual podemos aplicarlo para cualquier otro enlace, ya sea dentro de una entrada o un elemento HTML/Javascript, en cualquier caso sólo aplicamos el mismo atributo después de la URL del enlace:

<a href='URL del enlace' target='_parent'>Texto del enlace</a>


En caso de que quieras aplicar el mismo atributo a otro elemento dentro de la plantilla sólo revisa detenidamente el código y donde diga href= es el indicador de que hay un enlace, es al final de eso donde deberá ir el target='_parent'. Puedes guiarte en los ejemplos de esta misma entrada para poder identificar dónde y cómo poner el código.



Recuerda que debe haber un espacio en blanco antes de poner el atributo target='_parent' de lo contrario no funcionará.

Acortadores de URLs para todos los gustos

La función principal de un acortador de URLs es lo que su nombre dice, hacer más corta una URL larga, esto es para evitar enlaces extensos llenos de decenas de letras, signos y números, principalmente pensado para aprovechar los espacios de caracteres del microblogging.
Y desde que estos aparecieron han salido un sin fin de sitios que dan este servicio de acortamiento de URLs, unos más conocidos que otros, y aunque todos hacen lo mismo hay unos que se destacan por sus peculiares características como son los que veremos a continuación.






Bit.ly es probablemente el más conocido debido a que fue el servicio que utilizó Twitter y aunque sí, es el más usado, muchos desconocen que se pueden obtener estadísticas de los enlaces acortados que hagas, sólo hay que crear una cuenta gratuita y podrás conocer cuánta gente entra a tus enlaces cortos.



Enlace | Bit.ly







Por supuesto que el imperio de Google no podía quedarse atrás en estos temas así que desde 2009 lanzó su acortador de URLs y aunque funciona como un simple acortador de enlaces también cuenta con un sistema de estadísticas en tiempo real, sólo basta con loguearte con tu cuenta de Google y tendrás acceso a las estadísticas de todas las URLs que has acortado.

Y por si fuera poco ha puesto a disposición de todos la aplicación Google Short Links, para quienes cuentan con un dominio personalizado puedan crear su propio acortador de URLs.



Enlace | Goo.gl

Tutorial | Google Short Links








Is.gd es uno de los acortadores que se ha vuelto favorito de muchos quizá por lo estable que es el servicio, o quizá porque tiene la posibilidad de que con sólo ponerle un guión (-) al final de la URL acortada podemos saber cuál es la dirección Web a la que dirige; de este modo las personas a quienes les compartimos los enlaces pueden saber de forma segura a qué lugar están yendo.



Enlace | Is.gd

Ejemplo | http://is.gd/fXHPI-








TinyURL es sin duda de los servicios de acortamiento más conocidos en la red y a diferencia de muchos otros con él puedes personalizar la dirección corta, sólo basta poner el nombre del enlace que quieres en Custom alias y si está disponible podrás tener una URL corta personalizada, lo cual agradecerán los que buscan SEO a toda costa.



Enlace | TinyURL

Ejemplo | http://tinyurl.com/trucosblogger








Uno un poco menos conocido pero con la misma característica que el anterior es Tiny.cc, el cual también nos permite personalizar la URL acortada. La ventaja respecto a la anterior es que al ser menos conocida hay más posibilidades de encontrar el nombre personalizado del enlace.


Enlace | Tiny.cc

Ejemplo | http://tiny.cc/ciudadblogger








Y ya que estamos en el tema de los acortadores personalizados pues qué mejor que además de poder personalizar el nombre del enlace también podamos personalizar el nombre del dominio. ¿Cómo? Pues MeaningfulURL nos da la posibilidad de escoger dentro de una lista el nombre del dominio, algunos de ellos son: thanks.to, happy-birthday.to, invite.to, vote.to, enter.to, sorry.to, etc.


Enlace | MeaningfulURL

Ejemplo | http://enter.to/fondos240








Y si necesitas compartir más de un link a la vez entonces quizá necesites usar LinkBunch, un acortador que permite incluir en una sola URL varios enlaces para compartir, sólo hay que ingresar todas las URLs que quieres acortar y tendrás una URL corta que contendrá las URLs largas que has incluido.


Enlace | LinkBunch

Ejemplo | http://linkbun.ch/0ixe9








Otro servicio similar que agrupa varios enlaces en una sola URL acortada es Fur.ly, pero con la gran diferencia que en lugar de abrir una página con las direcciones de los enlaces, abre la página del primer enlace y arriba una barra para seleccionar los demás links que contiene la URL corta.


Enlace | Fur.ly

Ejemplo | http://fur.ly/2f2g








Probablemente haya enlaces que no quieras que vea todo mundo, ya sea por privacidad o porque no es apto para todo el público. En esos casos agregarle una contraseña al enlace se vuelve una excelente opción, y es eso lo que Thinfi hace, nos permite agregarle una contraseña a la URL que acortaremos para que sólo quienes tengan ese password puedan ver el contenido.


Enlace | Thinfi

Ejemplo | http://thinfi.com/4ib

Password | potro








Algo muy similar pero con otras curiosidades más es Trick.ly, un acortador que nos permite agregar una contraseña y una pista para quienes no recuerdan con exactitud el password que abre el enlace.
Otras dos variantes más que nos ofrece es utilizar una adivinanza como password o una pregunta en concreto.


Enlace | Trick.ly

Ejemplo | http://trick.ly/4rB

Password | potro

Pista | Ciudad Blogger








Y si lo que te preocupa es la seguridad de tu equipo entonces no hay mejor opción que utilizar el acortador de McAfee que además de acortar la URL también examinará el contenido en busca de virus, malware y amenazas que podrían dañar tu equipo.


Enlace | McAfee







Pero si eres de aquellos que les gusta ganar dinero en Internet entonces necesitarás un servicio que además de acortar las URLs también te pague por cada visita que tenga el enlace que has acortado.
Así es, sólo necesitas crear una cuenta gratuita en su sitio y te pagarán por cada visita que tengan tus URLs acortadas. Pero claro, hay dos cosas que resaltar, una es que el pago por cada visita es muy poco, y otra que cada URL acortada tendrá un anuncio antes de poderse ver el contenido.


Enlace | YvY.me

Ejemplo | http://yvy.me/GiNV1D








Pero no a todos les gusta seguir las reglas, así que para quienes van en contra de todo, ¿por qué tener una URL corta si podemos hacerla mucho más larga? Eso es justo lo que HugeURL hace, toma una URL acortada o "normal" y la convierte en una URL extra larga con docenas de caracteres.


Enlace | HugeURL

Gadget para compartir enlaces de las entradas del blog

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.
Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.
El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):




Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<data:post.body/>
O si usas el Leer más automático busca este código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


Justo debajo de cualquiera de esos dos agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='compartir-post'>

<p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>

<p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Link HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>

&lt;label for=&quot;aa-forum&quot;&gt;Link para foros:&lt;/label&gt;&lt;br /&gt;

&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>

</div>

</b:if>


Ahora agrega antes de ]]></b:skin> esto:

/* Compartir entradas

----------------------------------------------- */

.compartir-post {

background:#EFF5FB; /* Color de fondo del contenedor */

margin-top:30px;

padding-top:5px;

padding-bottom:5px;

padding-left:10px;

}

.compartir-post p {

font-size:12px; /* Tamaño de texto del mensaje */

}

.compartir-post input {

background:#ffffff;

border: 1px solid #A4A4A4; /* Borde de las celdas */

}


Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.



Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.



El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.


Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Las mayúsculas y las minúsculas en las URLs

Las URLs son poco flexibles cuando se trata de que funcionen de manera correcta, ya sea para una imagen o un enlace deben de ser escritas de forma textual respetando cada caracter que contiene, incluso si estos caracteres son mayúsculas o minúsculas.


Por ejemplo, esta es la URL de una imagen:
http://lh4.ggpht.com/_qgZA1ny_dAs/SuokgUwYpqI/AAAAAAAAC2c/4UZ0UOIPEtw/Skate.jpg


Esa URL contiene signos, letras y números. Y en el caso de las letras hay tanto mayúsculas como minúsculas. ¿Qué pasaría si cambiara todas las letras a minúsculas? No mucho excepto que la URL simplemente dejaría de funcionar.


http://lh4.ggpht.com/_qgza1ny_das/suokguwypqi/aaaaaaaac2c/4uz0uoipetw/skate.jpg


Lo mismo sucede con las URLs de los enlaces, aunque no aplica para todos los casos sí aplica para las URLs de Blogger. Por ejemplo, yo tengo en el blog la etiqueta Plantillas con P mayúscula, por lo tanto esta URL funcionará:
http://ciudadblogs.blogspot.com/search/label/Plantillas
Pero esta no:

http://ciudadblogs.blogspot.com/search/label/plantillas
¿Qué ha cambiado? Sólo una simple y casi insignificante letra que pasó de mayúscula a minúscula, pero ese pequeñísimo cambio ha hecho que la URL deje de funcionar y ahora Blogger me dice que no hay ninguna entrada con esa etiqueta.


Sin embargo, aunque hayamos tenido el cuidado de escribir la URL respetando las formas de las letras seguro muchos notarán que en sus blogs algunas imágenes o enlaces no funcionan, y esto es porque sin importar cuántas veces lo intentemos al momento de guardar los cambios Blogger cambia todos los caracteres de la URL a letras minúsculas.


Ignoro a qué se deba esto y porque en algunos blogs suceda y en otros no, pero por suerte Aresil me compartió un tip.
Si eres de los que están teniendo problemas con las mayúsculas de las URLs al momento de guardar los cambios sólo hay que hacer una pequeña modificación en el código del enlace o de la imagen.


Las URLs las encerramos siempre entre comillas, simples o dobles, usualmente esto no importa, pero esta vez sí, ya que si usamos las comillas simples (') Blogger nos cambia todos los caracteres a minúsculas.
Pero si usamos comillas dobles (") misteriosamente Blogger respeta las mayúsculas y las minúsculas.
Por ejemplo, en lugar de usar la URL así:
<a href='URL de la imagen o del enlace'>
Hay que usarla entre comillas dobles, así:

<a href="URL de la imagen o del enlace">
Y habiendo hecho eso no habrá ningún problema con las mayúsculas y las minúsculas de las URLs por lo que podrán funcionar correctamente. Una solución bastante sencilla ¿no creen?