Mostar URL Cortas en cada Entrada en Blogger

Ahora en nuestro blog de blogger podemos poner una herramienta tan útil como lo es un acortador de URL, algo que solo podíamos realizar en un blog de Wordpress. Gracias a los amigos de BloggerPluging podemos disfrutar des está útil herramienta en nuestro blog, así facilitamos a los usuarios de nuestro sitio que compartan las entradas con una URL más corta.

Cómo se realizo está herramienta: Este acortamiento de URL se realizo con la ayuda de la API de Bit.ly, este servicio de acortamiento de URL es uno de los más confiables en Internet. Este Script te suministra automáticamente una URL  de tu entrada más corta. Pueden ver la Demo.

Para ponerlo en tu blog ve a Diseño > Edición de HTML > Expandimos los Artilugios y con la ayuda de (Ctrl+F) buscamos la etiqueta:

</head>

Justo antes pegamos el siguiente código Javascript:

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>

Ahora localizamos una de las siguientes líneas de códigos, esto baria de acuerdo a tu plantilla:

<p class='post-footer-line post-footer-line-3'>

<div class='post-footer-line post-footer-line-3'>

<data:post.body/>

Una vez hemos encontrado una de las lineas de código, pegamos justo despues el siguiente código:

<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>

Guarda los cambios en tu plantilla, ahora se debería ver una URL corta en cada una de tus entradas.

Configuración Avanzada

1.- Para darle un poco de estilo añadiremos un poco de CSS. Con la ayuda de (Ctrl+F) busca la etiqueta:

]]></b:skin>

Justo antes pegamos el siguiente código CSS:

#bp_shorturl {
color:#666;
font-size:11px
}
#bp_shorturl input {
color:#999;
border:inset 1px #CDCDCD;
padding:1px 5px;
}

2.- Si sólo quieres mostrar las URL cortar en páginas individuales y no en la página principal, debemos de encerrár el código javascript dentro de las etiquetas condicionales como:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>
</b:if>

y

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>
</b:if>

3.- En BloggerPlugins nos aconsejan que si tenemos nuestra propia sesión Bit.Ly y clave de la API, que remplacemos el código que está en color rojo (tweettrackjs y R_7e9987b2fd13d7e4e881f9cbb168f523).

Vía | BloggerPlugins