12/24/2013

En pausa...

3 comentarios
Compañeros Bloggers, hace ya varios meses que inicie este pequeño espacio para compartir algunas ideas en cuanto la plataforma de Blogger. He estado ausente por bastante tiempo, lo que no quiere decir que no me intereso por los lectores. Sin embargo, para no aparentar ser indiferente con ustedes, me tomo el tiempo de informarles que las publicaciones estarán pausadas, no se hasta cuando, puesto que otras circunstancias he de manejar en mi vida.

Espero volver y compartir algunos trucos con ustedes que he aprendido en estos meses, y darles una mano en la optimización de su blog.

Sin mas que decir, agradezco el apoyo recibido durante este tiempo.

Estaré respondiendo sus comentarios en cuanto pueda,

Feliz 2014!
Leer Más...

10/10/2013

Barra de Carga de Youtube para Blogger

13 comentarios
Barra de Carga de Youtube para Blogger
He estado algún tiempo sin publicar algo nuevo, también he estado respondiendo varios comentarios que muchos bloggers hacen en mis publicaciones. Hoy me he animado a realizar un pequeño aporte para engalanar y personalizar nuestros blogs.

Seguramente has visto la barra progresiva de color rojo que se mueve en la parte superior cuando se carga un vídeo en Youtube. Sentí mucha curiosidad sobre como instalarla en blogger, y me puse en la tarea de investigar. 

Inicie mi búsqueda y encontré un script llamado Nprogresss.js. Comencé a hacer algunas pruebas con el script original pero no obtenía resultados, así que profundice en la búsqueda hasta hallar en algunos blogs anglosajones e hindues este script adaptado para Blogger.

La barra de carga esta instalada en este blog de pruebas

Sin mas que decir, vamos a instalar el Gadget. Esto sera sencillo, puesto que solo habrá que hacer una operación para instalarlo. 

Para eso ve a Blogger-Plantilla-Editar HTML, das un clic dentro de la plantilla y oprimes Ctrl+F y buscas por:<body>

Pega este código justo después:
<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style>

<div id='loadMore'/>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='http://goo.gl/10Okof'/>

El código resaltado en verde es Jquery, si ya lo tienes insertado en tu blog, debes omitirlo.
El código resaltado en azul, define el color de la barra. Modifícalo a tu gusto. Utiliza el selector de colores
El código resaltado en rojo ajusta el ancho de la barra. Cámbialo a tu parecer.

Con esto ya estaría funcionando la barra de carga en tu blog.
Leer Más...

6/18/2013

Caja "Me gusta" de Facebook, Pop Up (Emergente) - Actualización #3

97 comentarios
Actualización 1: Se corrigió el procedimiento en la instalación
Actualización 2: Solucionado el conflicto de Jquery implementando: "jQuery.noConflict();"
Actualización 3: Ofrezco disculpas por el vital error, faltaba una linea de codigo, por eso a muchos no les ha funcionado. Ya esta corregido
He estado revisando algunos códigos de ColorBox y he querido poner el FanBox de Facebook a una de estas ventanas emergentes (PopUp).

Caja "Me gusta" de Facebook, Pop Up 

Es un efecto muy agradable que ocupa todo la pantalla con cierta transparencia. Estas cajas emergentes permiten agregar muchas cosas, pero esta vez nos dispondremos a insertar los Seguidores de Facebook.

Mira el Pop Up en este blog de pruebas

El código original los puedes encontrar en Github.

Agregar PopUp a Blogger

El siguiente código contiene los estilos y scripts necesarios para hacer funcionar el Popup. Ademas de ello, es quien da la orden para que se ejecute el Popup. Ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F y busca </head>. Y antes pega este código.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terrenoblogger.css" rel="stylesheet"></link>
<script src="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terreblogger.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); 
jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>

Lo resaltado en azul es Jquery, así que si ya lo tienes en tu blog, omitelo.
Este Popup solo funciona con las versiones de Jquery 1.8.3 e inferiores. Si utilizas una versión superior, no funcionará.

El numero 0 que esta resaltado, es el numero de días que tardará en reaparecer de nuevo la caja a un usuario; tu puedes modificarlo. Esto utiliza las cookies del navegador.

El código a continuación es la caja "Me gusta"de facebook. Dirigete a Diseño - Agregar gadget - HTML/Javascript y pega el siguiente codigo

<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Acompáñanos en Facebook</h3><center><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUSUARIO-FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">terrenoblogger.co</span></div></div></div>


Cambia USUARIO-FACEBOOK por el nombre de tu pagina.

Ten en cuenta lo siguiente:

Hay dos tipos de url de paginas en facebook.

  • 1. La que tiene la url personalizada, por ejemplo: http://www.facebook.com/nombredepagina
  • 2. No tiene la url personalizada, por ejemplo: http://www.facebook.com/page/nombrepagina/164689464316

Si tu pagina en facebook aun no tiene una url personalizada, entonces copiaras el ID de usuario de la msima

Por ejemplo:
http://www.facebook.com/page/nombrepagina/164689464316

El numero resaltado en azul es el ID de tu página. Y ese es el que debes reemplazar por USUARIO-FACEBOOK.

Bien, con esto ya tienes una muy bonita caja de seguidores en tu blog.

Cualquier duda o inconveniente, coméntalos!
Leer Más...

6/06/2013

SEO: Atributos Alt y Title Automáticos en las Imágenes

28 comentarios
Los atributos 'alt' y 'title' son los que describen una imagen y su contenido. El atributo 'alt' se utiliza para describirle el contenido a los motores de búsqueda, y el atributo 'title' describe el contenido a los usuarios.


Atributos Alt y Title, Blogger

En este video Matt Cutts explica la importancia del atributo "Alt" en la imágenes. El el video el hace mucho énfasis en al tributo 'alt' mas que en el 'title', ya que el atributo alt es el que Google va a leer, sin embargo al combinar estos dos se obtiene un mayor impacto tanto en el motor de búsqueda como en los usuarios.

El código base de una imagen debe ser este:
<img src="imagen.jpg" alt="descripcion" title="descripcion" />
En Internet Explorer el atributo 'alt' genera una descripción (tool tip) al pasar el puntero de mouse sobre una imagen, mientras que en Firefox y Google Chrome, esta descripción visible es generada por el atributo 'title'.

Al describir lo que sucede en una imagen le estas ayudando a los motores de búsqueda a encontrar dicha imagen mas rapidamente y esto generara un aumento de trafico hacia tu sitio web.

No debes exceder en el uso de palabras clave en los atributos 'title y 'alt' ya que Google penalizará eso, puesto que no estas describiendo lo que en realidad esta sucediendo en la imagen.

Para agregar estos atributos a las imagenes, Blogger ha implementado un herramientas desde el editor de entradas.

Simplemente, después de agregar un imagen y estando en el editor de entradas, das un clic sobre la imagen y te diriges a Propiedades, allí agregas el texto del titulo y el texto del alt. En lo posible realiza este proceso desde el editor de entradas y agrega un descripción correcta manualmente.

Sin embargo, para reducir el trabajo y realizar este proceso automáticamente, te dejare un script que tomará el nombre de la imagen y lo usará para insertar los atributos title y alt. Pero recuerda que la mejor descripción es la realizada manualmente.

Este script utiliza Jquery; si ya lo tienes en tu blog entonces omite el código resaltado en verde.

Ve a Plantilla>Editar HTML> das un clic dentro de la plantilla, presionas Ctrl + F y buscas </head> Justo antes pega este código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*Atributos alt y title*/
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Guardas lo cambios realizados y vas a una entrada donde exista una imagen. Pasando el mouse sobre ella observaras que se muestra una descripción de dicha imagen y efectivamente esto es lo que queremos lograr.

Con esto se optimizara el posicionamiento de tus imágenes y por lo tanto tu pagina web estara mejor ubicada en los resultados de búsqueda.

Aplícalo si aun no lo has hecho, esto te ayudará.

Leer Más...

5/20/2013

Social Media Tabs (Botones Redes Sociales) +10

34 comentarios
Un saludo a todos los que están activamente leyendo, comentando y aplicando los tutoriales que aqui he dejado.

Social Media Tabs

Hay un Plugin para Wordpress que he instalado en Blogger, el cual esta de maravilla. Se llama Social Media Tabs, y es un Widget que trae mas de 10 Redes Sociales en un solo paquete. Es un Gadget muy elegante y lo he visto utilizado por sitios web de alto rango.

Estuve examinando el código y lo instale acá mismo en el blog. Me gusta mucho, es muy versátil  ya que lo puedes acomodar casi en cualquier lugar de tu pagina web. Es un Gadget compacto y de sencilla instalación.

Por ahora viene con las siguientes redes sociales y sitios de compartimientos:
  • Facebook
  • Twitter
  • Google+
  • RSS
  • Pinterest
  • Youtube
  • Vimeo
  • Deliciuos
  • Instagram
  • Dribbble
  • Digg
  • StumbleUpon
  • Deviantart
  • Tumbrl
  • Y continuara...
Como yo se que tu quieres instalarlo en tu blog, te diré como lo harás, a continuación.

Ve a Blogger > Plantilla > Editar HTML, das un clic dentro de la plantilla, presionas CTRL + F, buscas </head>  y pegas justo antes este codigo:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://sites.google.com/site/terrenoblogger/css/jquery.social.media.tabs.1.6.1.min.js" type="text/javascript"></script>
<link href="https://sites.google.com/site/terrenoblogger/css/dcsmt.css" media="all" rel="stylesheet" type="text/css"></link>
El que esta resaltado en verde es Jquery. Debes omitirlo si ya lo tienes en tu blog.

Después de haber guardado los cambios anteriores, ve a Diseño > Añadir un gadget > HTML/Javascript y pegas allí este código:
<div id="social-tabs">
</div>
<script type="text/javascript">         
        jQuery(document).ready(function(jQuery)
        {
            jQuery('#social-tabs').dcSocialTabs(
            {
    method: 'slide', location: 'left', align: 'top', position: 'fixed', offset: 70, height: 400, width: 320, start: 0, rotate: { delay: 8000,direction :'down' }, loadOpen:false, autoClose:true, imagePath: 'https://sites.google.com/site/terrenoblogger/imagenes/', 

widgets: 'facebook,fblike,google,twitter,rss,pinterest',

facebookId: 'ID-PAGINA-FACEBOOK', 
fblikeId: 'PAGINA-FACEBOOK', 
googleId: 'GOOGLE-ID',
twitterId: 'USUARIO', 
rssId: 'http://feeds.feedburner.com/USUARIO', 
pinterestId: 'USUARIO',
youtubeId: 'USUARIO',
vimeoId: 'USUARIO',
deliciousId: 'USUARIO',
instagramId: '#USUARIO',
dribbbleId: 'USUARIO',
stumbleuponId: 'USUARIO',
tumblrId: 'USUARIO',
deviantartId: 'USUARIO',

twitter: {title:'Tweets Recientes',follow:'Sígueme en Twitter',thumb:true,retweets:false,replies:false,limit:10}, 
fbrec: {header:true}, 
fblike:{stream:false,header:true,limit:36}, 
facebook:{title:'Facebook',follow:'Síguenos en Facebook',text:'content',limit:10}, 
google: {title:'Google+',follow:'Agréganos a tu Círculos',limit:10,api_key: 'AIzaSyAVx2W-gR7eqIpATEgp2IMOWtxzDDDOqt0'}, 
pinterest: {title:'Pinterest',follow:'Encuentrame en Pinterest',limit:10}, 
rss: {title:'Suscribete a nuestro Feed',follow:'Subscribe',limit:10}, 
youtube: {title:'Suscribete',subscribe:true,limit:10}, 
instagram: {clientId:'',redirectUrl:'',accessToken:'',limit:10,title:'Instagram'}, 
vimeo: {title:'Vimeo',follow:'Subscribe',limit:10}, flickr: {title:'Flickr',limit:20}, 
stumbleupon: {title:'Stumbleupon',follow:'Follow',limit:10}, 
tumblr: {title:'Tumblr',follow:'Follow',limit:10}, 
delicious: {title:'Delicious',follow:'Follow on Delicious',limit:10}, 
digg: {title:'Latest Diggs',limit:10}, lastfm: {title:'Last.fm',limit:20}, 
dribbble: {title:'Dribbble',follow:'Follow on Dribbble',limit:10}, 
deviantart: {title:'deviantART',follow:'Follow',limit:10}
            });
        });

    </script>
Ahora, esto que harás sera importante.

En la linea resaltada en morado están escritas solo las redes sociales que se van a mostrar; si deseas mostrar mas redes sociales, solo debes escribir después de pinterest, una coma y luego el nombre de la otra red social y luego en el codigo resaltado en azul agregaras el nombre de usuario de dicha red social.

Solo puedes agregar las redes sociales que están resaltadas en azul.

Las redes sociales que por defecto estan activas, son las de color rojo. Asi que debes reemplazar el usuario respectivo en cada una de ellas.

Para conocer el ID de tu Pagina en facebook, ve a: http://graph.facebook.com/NOMBRE-DE-PAGINA  y alli se te mostrara el ID de tu pagina.

Para saber el usuario de feedburner, te diriges a http://feedburner.google.com/. Elige tu feed y das un clic en "Edit Feed Details…" (Esta bajo el titulo de tu feed). Ahora en "Feed Address:" dentro un recuadro esta el Usuario de tu Feedburner

La linea resaltada en rojo indica en que lugar del blog se mostrara el Widget. Utiliza estos parametros para ajustar la posicion del los botones a tu gusto:
left = iziquerda
right = derecha
top = arriba
bottom = abajo

Este Gadget tiene otras opciones de personalización,  pero no quiero enredarte. Yo se que con esto lo tendrás funcionando correctamente.

Si necesitas ayuda deja el comentario

Leer Más...

Recibe actualizaciones en tu Email :)