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

100 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

29 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

35 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...

5/12/2013

Cuadro de Búsqueda por Voz y Texto de Google

12 comentarios
En algún comentario me han pedido que publique el código del cuadro de búsqueda por voz, que por estos tiempos tengo en la parte superior de la sidebar.

Cuadro de Búsqueda por Voz y Texto de Google
Esto es una imagen, no vayas a buscar :)


Este cuadro de busque funciona con la voz y con el texto escrito, solo necesitas un micrófono y haciendo clic en el icono de micrófono encontrado en el buscador puedes comenzar a hablar.

Lo bueno de este tipo de búsqueda por voz, es que puedes buscar frases largas, podrás buscar sin utilizar el teclado y ademas conocer como se escriben algunas palabras desconocidas.

Es decir, puedes buscar en Google mientras te estas bañando!! :) Solo debes gritar! jaja

Bueno, dejémonos de risas y vamos al código de este Gadget, pero antes debes ver la demostración justo aquí:



Bonito cuadro de búsqueda! Para tener esta lindura :) en tu blog ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega este precioso código allí:

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input id="s" name="q" onfocus="if(this.value=='Buscar...')this.value='';" onwebkitspeechchange="transcribe(this.value)" type="text" value="Buscar..." x-webkit-speech="" /> 
<input class="sbutton" id="search-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-M5ap7jfNO4a_LD5PKeeBD-7-Y7C5io5IlK-AccLniy4PHAEMIntFdHkNTluWaI0vQJkt-xcmDj2_dbdveufnZxMqaEcsDLUAlDcxDXTzNlFH68Acp6UzqhLCGWRaJRjxNvmDUyn-D_w/s1600/search%5B1%5D.png" style="border: 0; vertical-align: top;" type="image" />
</fieldset>
</form>
<style>
#searchform fieldset {
float: left;
color: #888;
border: 1px solid #DFDFDF;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
width: 98%;
margin: 3px;
}
#searchform fieldset:hover {
border: 1px solid #41B7D8;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
}
#searchform {
margin: 0 10px 10px 0;
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#s {
float: left;
color: #888;
background: none;
border: 0;
width: 80%;
padding: 0.6em;
}
#searchform .sbutton {
cursor: pointer;
padding:8px;
float:right;
}
</style>
Después de haber guardado ese hermoso código :) que te deje arriba, tendrás un cuadro de búsqueda que nadie mas en la red tiene. Mentira, lo que si tendrás es una herramienta versátil y muy funcional; algo que no puede faltar en tu blog.

Es preferible que falte el contenido, a que falte esta caja de búsqueda... (Otra mentira). Pero hablando seriamente, una opción para buscar en tu blog debe ser infaltable, ya que muchos llegan directamente al cuadro de búsqueda para utilizarlo, y que mejor que utilizar esta que te he dejado. (Por favor, no seas mal amigo. No utilices otra...jeje)

Bien, ve entonces e instalalo en tu blog. Me cuentas como quedo, y si falla alguna característica solo me avisas y yo tratare de acomodarla.

Leer Más...

5/06/2013

Botones de Redes Sociales con Efecto Expansible

43 comentarios
botones, facebook, twitter, google plus, feed, pinterest
Navegando en la red encontré estos botones que me han parecido muy llamativos, realmente son atractivos y pueden verse bien en cualquier blog.

Estos botones no utilizan ningún script, ni javascript, ni jquery; están hechos en CSS3 y sencillamente se pueden modificar.

Traen un efecto hover expansible, lo que hará que al pasar el cursor se despliegue el botón hacia la derecha. Al mismo tiempo, viene con las principales redes sociales y la suscripción por email.

Este widget es uno de los mas necesarios en cualquier pagina, puesto que no se pueden dejar a un lado las redes sociales que tanto bien nos hacen al aumentar el trafico hacia nuestro sitio.

Obtén la vista previa aquí mismo:
La instalación es sencilla; para esto ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega allí el siguiente código:
<style>
#tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUqOj6aQRzhJQ7MB4oc3jPfFJJP8oEw1Ndgt2LbKTq4f6unCZFIg_EzNi9hlnkWkLatYmfNTSEEAu5I5aT2NlGhHrBZPkjLw8vZ5ZDlO-i8H6zv62JaojAy5KEMnm0b5F_qlw6zThCyw/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbsose .icon{overflow:hidden; color:#fafafa;}
#tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbsose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbsose li:hover .icon, 
.touch #tbsose li .icon{width:210px;}
.touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="tbsose">
<li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/USUARIO-FACEBOOK" target='_blank'>Síguenos en Facebook</a></li>
<li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/USUARIO-TWITTER">Síguenos en Twitter</a></li>
<li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/ID-GOOGLE+" target='_blank'>Síguenos en Google+</a></li>
<li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/USUARIO-PINTEREST" target='_blank'>Síguenos en Pinterest</a></li>
<li data-alt="Suscribete vía Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" target='_blank'>Suscribete vía Email</a></li>
</ul>

Ahora sencillamente has de reemplazar cada una de las frases resaltadas en color verde por cada una de tus cuentas en las redes sociales y feedburner respectivamente.

Para conocer el usuario en las redes sociales, vas a cada una de tus cuentas y en la URL de la barra de direcciones se mostrara el nombre de usuario.

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

Con esto ya tendrás configurado e instalado este Gadget.

¿Alguna duda o comentario?

Leer Más...

5/01/2013

FanBox de Facebook Emergente y Desvaneciente

18 comentarios
Anteriormente publique una Caja Popup de Facebook que puedes encontrar aquí . Esta vez vengo con algo igual en función pero diferente en estilo.

FanBox de Facebook, LighBox

Muchos se quejan de estas ventanas Popup, porque molestan al lector. Sin embargo tanto esta como la que publique anteriormente pueden ser controladas por medio de las Cookies del navegador, lo que quiere decir, que solo sera mostrada según la frecuencia de días que se estipule en el script; con lo cual no resultara nada molesto para los visitantes, puesto que en varios días no se le mostrará de nuevo la ventana emergente.

A mi gusto, me parece mas atractiva esta Fanbox de Facebook. Por este tiempo, yo estoy utilizando esta caja emergente, sin embargo, como posiblemente la quite en algunos dias, te dejo una demostracion en un blog de pruebas.
Observa esta Fanbox en funcionamiento aquí
Ahora ve a Blogger.com - Diseño - Añadir un gadget - HTML/Jacascript y pega allí este código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<style>
#fanback{display:none;background:url(https://sites.google.com/site/terrenoblogger/imagenes/bg.png);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}#fan-exit{width:100%;height:100%}#fanbox{background:white;width:420px;height:270px;position:absolute;top:50%;left:50%;-webkit-box-shadow:inset 0 0 50px 0 #939393;-moz-box-shadow:inset 0 0 50px 0 #939393;box-shadow:inset 0 0 50px 0 #939393;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:-135px 0 0 -210px;}#fanclose{float:right;cursor:pointer;background:url(https://sites.google.com/site/terrenoblogger/imagenes/fanclose.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}.remove-borda{height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}
</style>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){

if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);

if(value===null||value===undefined){options.expires=-1;}

if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);}

value=String(value);

return(document.cookie=[
encodeURIComponent(key),'=',
options.raw?value:encodeURIComponent(value),
options.expires?'; expires='+ options.expires.toUTCString():'',
options.path?'; path='+ options.path:'',
options.domain?'; domain='+ options.domain:'',
options.secure?'; secure':''].join(''));}

options=value||{};
var result,decode=options.raw?function(s){
return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
</script>

<script type="text/javascript">
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium')})}
$.cookie('popup_user_login','yes',{path:'/',expires:3})});
</script>

<div id="fanback">
<div id="fan-exit"></div>
<div id="fanbox">
<div id="fanclose"></div>
<div class="remove-borda"></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http://facebook.com/USUARIO-FACEBOOK&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div>
</div>

Ahora en expires:3 colocarás el numero de dias que tardara en reaparecer la Popup de nuevo a un usuario. Por defecto esta en 3 dias.

En USUARIO-FACEBOOK escribes el nombre de usuario de tu pagina.

Si el usuario de tu pagina en facebook esta en este formato: https://www.facebook.com/pages/Terreno-Blogger/161470857350835.
Entonces lo que deberás reemplazar por USUARIO-FACEBOOK será solo el ID de tu pagina, es decir, en este caso: 161470857350835

El código resaltado en rojo es Jquery, si ya lo tienes en tu plantilla entonces omitelo.

Probé con varias versiones de Jquery y en todas funcionó, seguramente no tendrás conflictos a la hora de instalar este widget.

Con esto ya tienes instalada esta ventana emergente muy atractiva y nada molesta.

¿Tienes algo para decirme?

Leer Más...

4/30/2013

Dale Estilo al Atributo 'title' en Blogger

19 comentarios
 
¿Quieres personalizar el estilo del atributo 'titile' que es usado en imágenes, links y texto?

EL atributo "Title" es el que da información al usuario, ya sea que se aplique a una imagen, un enlace o un texto.

Esta vez aplicaremos mediante el uso de Jquery, una de las muchas "Tooltips" (asi llamadas en ingles) que darán un agradable agradable aspecto a nuestro contenido y mostraran de mejor forma la información que se inserte dentro del atributo "tiltle".

La utilidad que aplicaremos se llama "Vtip". Es creada por www.vertigo-project.com

Una demostración del script en funcionamiento:

Este es un enlace con vtip

Un texto en donde se aplica vtip


Ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega allí el siguiente código.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
/**
Vertigo Tip by www.vertigo-project.com
Requires jQuery
*/

this.vtip = function() {    
    this.xOffset = -10; // Distancia del cursor en X
    this.yOffset = 10; // Distancia del cursor en Y     
    
    $(".vtip").unbind().hover(    
        function(e) {
            this.t = this.title;
            this.title = ''; 
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
            
            $('body').append( '<p id="vtip"><img id="vtipArrow" />' + this.t + '</p>' );
                        
            $('p#vtip #vtipArrow').attr("src", 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7acRRV9z6gN8JAEksojmD7V_sohrJDOI3LIRy2yjupXwI4ixo-B1k4-mJ4zTCvqi5X0ve83Ty-1M0sFfSamJCke1wcPakoxn_fZYa5gXoCy8DqgHFBhOSJf_LhRzc5lQ8DlldPgZp-k0/s1600/vtip_arrow.png');
            $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
            
        },
        function() {
            this.title = this.t;
            $("p#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
                         
            $("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );            
    
};

jQuery(document).ready(function($){vtip();}) 
</script>

<style>
p#vtip { 
display: none; 
position: absolute; 
padding: 10px; 
left: 5px; 
font-size: 12px;
background-color: white; 
border: 1px solid #a6c9e2; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
z-index: 9999; 
max-width:400px; 
}
p#vtip #vtipArrow { 
position: absolute; 
top: -10px; left: 5px 
}
</style>

El script resaltado en rojo es Jquery. Si ya lo tienes en tu plantilla entonces omítelo. Esta utilidad funciona con versiones de Jquery superiores a la 1.4.

Modifica el tamaño de la letra en font-size

Esto es lo mas básico, pero tu puedes modifcar algunos otros estilos.

Ahora para aplicarlo en el blog, se hará de la siguiente manera.

Para links:
<a href="URL-ENLACE" title="Aqui el titulo del enlace." class="vtip">Aqui el Nombre del Link</a>

Para Imagenes:
<img src="URL-IMAGEN" title="Aqui el titulo de la imagen." class="vtip" />

Para texto:
<div class="vtip" title="Aqui el titulo del texto.">Aqui el texto</div>

Ademas del atributo 'title' que necesariamente debes agregar, es indispensable que siempre introduzcas la clase vtip, que esta resaltada en naranja.

Quisiera ver como quedará en tu blog :)
Leer Más...

4/28/2013

Publicar Automáticamente las Entradas en Google+, Twitter y Facebook

62 comentarios
Publicar Automáticamente las Entradas en Google+, Twitter y Facebook 
Esto que haremos nos ahorrara mucho tiempo a la hora de enviar las publicaciones a las redes sociales. Es un truco mas para automatizar nuestro blog mediante un sistema de publicaciones automáticas en Facebook, Twitter y Google+.

Ahora no tendrás que preocuparte por estar publicando manualmente tus artículos en el medio social.

Básicamente utilizaremos el Feed de nuestro blog y a su vez optaremos por algunas aplicaciones que harán el trabajo por nosotros.

Para cada red social se utilizara una aplicación diferente, así que dividiré este articulo en tres partes.

1. Publicaciones Automáticas en Facebook

Para facebook vamos a usar la bien conocida aplicación "RSS Graffiti".

Agregar y configurar el  Feed


Estando con sesión iniciada en facebook, dirígete a este enlace: https://apps.facebook.com/rssgraffiti/, accede a la aplicación y luego dale en "Add New Publishing Plan", escribe el Nombre de tu blog y luego dale en "Create Publishing Plan".

Ahora tendrás la siguiente imagen:


A continuación al frente de "SOURCES", oprime "ADD NEW" y se te pedira la URL del Feed del Blog. Entonces agrega la url de tu blog en Blogger en el siguiente formato:

tu-blog.blogspot.com/atom.xml

o si ya adquiriste un dominio:
tublog.com/atom.xml

Luego tendrás algunas opciones para configurar:


En "Update Frequency" escoges "As soon as posible" para que RSS Graffiti este alerta en cualquier momento y revisando tu blog para realizar la publicación en facebook.

En "Maximum Psot per Update" elige la cantidad de post que deseas que se publiquen al mismo tiempo. (Esto para cuando se publican muchas entradas). Puedes elegir "5 posts"

Y "Post Order per Update" déjala así como esta.

Ahora dirígete a la pestaña superior "Advanced" (Esto es opcional)


Elige "Static Text" y escribe preferiblemente la url de tu blog.

Al fin dale clic en "Save"

Agregar nuestra Fan Page o Pagina de Seguidores

Después de haber hecho lo anterior debiste quedar en la siguiente imagen. Entonces al frente de "TARGET", oprime "ADD NEW"


Ahora simplemente bajo "Choose Target" escoge la pagina en la cual deseas realizar las publicaciones automáticas  y después de eso dale en "Save Changes".

Finalizando, mueve la flecha de "OFF" a "ON" hasta que este en colo verde, lo que indicará que desde ese momento esta activo.


2. Publicaciones Automáticas en Twitter

Para hacer que nuestras entradas vayan a Twitter por si solas ingresa a: http://feedburner.google.com

Elige el Feed de tu blog, ve a Publicize - Socialize - Add a Twitter Account, entonces te pedirá el permiso para acceder desde tu cuenta en Twitter.

Después de haber otorgado el permiso, en "Twitter Account" selecciona la cuenta de Twitter de tu Blog.

Puedes personalizar la publicacion en Twitter, haciendo uso de algunas opciones:

En ´"Post content", si seleccionas "Title only", entonces solo se mostrara el titulo de la entrada en Twitter. Si seleccionas "Title and body", entonces se mostrara el titulo y parte de la entrada. Y si eliges "Body only", entonces solo se mostrara parte del cuerpo de la entradas, pero no el titulo. Te recomiendo seleccionar "Title only"

Las demás opciones puedes dejarlas así como están.


Al final dale clic den "Activate" para poner a funcionar este servicio.

3. Publicaciones Automáticas en Google+

Ahora blogger a agregado esta nueva función para publicar las entradas automáticamente en Google+. Para activarla te diriges Blogger-Google+ y en la parte derecha selecciona "Compartir automáticamente después de publicar", en la parte izquierda eliges pagina de Google+ donde quieres que se publiquen las entradas. 

Esto no muchos lo saben, pero en realidad, se pueden hacer publicaciones automáticas también en Google+

Para esto sera necesario registrarse en http://hootsuite.com/

Estando en la dashboard dale en "Añadir una red social", luego en el menu izquierdo elige "Google+" y conecta a Google+ con Hootsite.

Despues de haber conectado a Google+, ingresa a la dashboard de nuevo y en el menú izquierdo, en "Configuración" (icono de herramientas), elige "RSS/Atom"

Estando en "RSS/Atom" y  oprimes en el "+" para agregar un nuevo Feed

Ingresa la url de tu feed en "URL de la fuente"; recuerda que debes estar en estos formatos:

tu-blog.blogspot.com/atom.xml

o si ya adquiriste un dominio:
tublog.com/atom.xml

Luego en "Red a la que enviar feeds", escoges tu pagina de Google+ que ya habias agregado anteriormente.

En "Cuando haya nuevas entradas, publicar a la vez:" solo puedes elegir un máximo de 5 publicaciones.

El resto lo puedes dejar asi como esta.

Para finalizar dale en "Guardar fuente"




Una vez hayas terminado todos los procedimientos, no tendrás que volver a preocuparte por publicar manualmente tus entradas en las redes sociales.

No es un proceso complicado, solo es necesario seguir cada paso.

Confió en que he podido ayudarte, y se que esto te servirá mucho en tu pagina web.

¿Como te ha parecido? Déjame tu comentario
Leer Más...

4/26/2013

Cuadro de Suscripción por Correo Electrónico

27 comentarios

Como le comente a "Jayko" en un articulo anterior, "solo estaba esperando que alguien pidiera la caja de suscripción por email" que tengo al final del blog para entonces publicarla.

Pensé, "Si a alguien le gusta, entonces la pedirá" :). Y como claramente es una cuadro de suscripción muy llamativo hoy me dispuse a mostrártelo.

Este Gadget queda muy bien ubicado encima de las entradas o al final del blog. No esta hecho para la Sidebar (barra derecha del blog), ya que con su tamaño no podría caber allí.

Recuerda que parte de las técnicas necesarias para aumentar el trafico hacia tu sitio es poner algún tipo de suscripción por correo electrónico, y en este caso utilizando feedburner haremos uso de esa técnica útil y necesaria.

Este elegante widget lo agregarás yendo a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pegas allí el siguiente código:
<style>
#TB-cuadro-suscripcion {border:1px solid rgba(221,221,221,0.43);border-radius:10px 10px 10px 10px;box-shadow:0 0 30px #EEE inset;margin-bottom:10px;padding:2px;text-align:center}#TB-cuadro-suscripcion h1{color:#000;font-family:'Open Sans Condensed',sans-serif;font-size:24px;line-height:30px;margin-bottom:5px;margin-top:5px;padding:0}#TB-cuadro-suscripcion input{border:medium none;border-radius:5px 5px 5px 5px;box-shadow:0 0 5px #C2C2C2 inset;color:#666;font-family:georgia;font-size:14px;margin-bottom:5px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px}#TB-cuadro-suscripcion .submit{background:none repeat scroll 0 0 #FF4548;border:0 none;border-radius:3px 3px 3px 3px;box-shadow:0 1px 2px #B6B6B6;color:#FFF;cursor:pointer;font-family:georgia;font-weight:700;margin:0 auto;text-shadow:1px -1px 0 rgba(0,0,0,0.4);text-transform:uppercase}#TB-cuadro-suscripcion .submit:hover{color:#FFF;opacity:0.8}#TB-cuadro-suscripcion .submit:active{background:0 repeat scroll 0 0 transparent}
</style>

<div id="TB-cuadro-suscripcion">
<h1>
Recibe actualizaciones en tu Email :)</h1>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<center>
<input name="email" placeholder="Escribe tu Email y Confirmarlo después :)" required="required" size="30" type="text" /><input name="uri" type="hidden" value="USUARIO-FEEDBUERNER" /><input name="loc" type="hidden" value="en_US" /> <input class="submit" type="submit" value="Suscribirse" /></center>
</form>
</div>

El color predeterminado de este cuadro de suscripción es Rojo, pero puedes cambiarlo por el color de tu preferencia modificando lo resaltado en rojo

Para elegir el código de un color, utiliza el Selector de Colores

Ahora pon tu usuario de feedburner en USUARIO-FEEDBURNER

Fácil! Sencillo y rápido. Tienes ahora un cuadro de suscripción por email muy profesional, atractivo y funcional.

Seguramente muchos podrán suscribirse de manera gustosa y rapida, a través de este Gadget.
Leer Más...

4/24/2013

Widget con Suscripción y Botones Sociales para Blogger

25 comentarios
Widget con Botones Sociales y Suscripción para Blogger 
De nuevo vuelvo con un gadget para tu blog, esta vez te mostraré un widget parecido a uno anterior, pero diferente en varios aspectos, ya que este viene con un cuadro para la suscripcion por electronico, y solo con los botones de Facebook, Twitter, Google+ y RSS. (el anterior widget tiene mas botones)  

Los botones de las redes sociales tienen un color verde, así como la suscripción por correo electrónico  Este Gadget es perfecto para usarlo en la Sidebar (barra derecha del blog). Es muy elegante y podría decir que en poco espacio albergas casi la mayoría y mas relevantes tipos de suscripciones a tu blog.

Estos botones son para suscripción, no para compartir. Si necesitas botones para compartir, dirígete a este articulo.

Obsérvalo aquí mismo en funcionamiento.



Suscríbete para recibir nuestras actualizaciones
 

Agregar Widget a Blogger

Para agregar este artilugio al blog, ve a Blogger.com - Diseño - Añadir un gadget - HTML/Javascript y pega allí el siguiente código:
<style type="text/css">
/* Terrenoblogger.co - botones sociales */
#TB-caja-suscripcion {width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.TB-caja-suscripcion-wrapper{background:url(https://ia800900.us.archive.org/24/items/TerrenobloggerFacebook/BackgroundBotonesSociales.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:16px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:capitalize}
.TB-caja-suscripcionform{clear:both;display:block;margin:10px 0}form.TB-caja-suscripcion-form{clear:both;display:block;margin:10px 0 0;width:auto}
.TB-caja-suscripcion-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYAZbe2Vmbgjhpi4HYYmkwT5nbO9vvww93XXDyZLxohBH-1rVyxgN96tR3ReX3wRmGRrsBHOF4zyOE-hesCDQQywh0r_FsfrcQ0NSO-zY1L9WGM4ssQiyFimfpFK3OSQ190SdzsBOg3k/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.TB-caja-suscripcion-email-button{background:#00B047;border:1px solid #01B831;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:capitalize;width:100%}
.TB-caja-suscripcion-email-button:hover,.TB-caja-suscripcion-email-button:focus{background:#20B95D}
.TB-caja-suscripcion-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}</style>

<div id="TB-caja-suscripcion">
<div class="TB-caja-suscripcion-wrapper">
<br />
<a class="social-icons" href="https://facebook.com/USUARIO-FACEBOOK" target="_blank" title="Síguenos en Facebook">
<img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-facebook.png" /></a> 
<a class="social-icons" href="https://twitter.com/USUARIOTWITTER"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/ID-GOOGLE+" target="_blank" title="Síguenos en Google+"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-google%2b.png" /></a> 
<a class="social-icons" href="http://feeds.feedburner.com/USUARIO-FEEDBURNER" target="_blank" title="Suscríbete a nuestro Feed"><img src="https://ia600900.us.archive.org/24/items/TerrenobloggerFacebook/terrenoblogger-rss.png" /></a>
<p>Suscríbete para recibir nuestras actualizaciones</p>
<div class="TB-caja-suscripcion-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" class="TB-caja-suscripcion-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="USUARIO-FEEDBURNER" /> <input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="TB-caja-suscripcion-email-field" name="email" placeholder="Escribe tu Email Aquí" /> <input class="TB-caja-suscripcion-email-button" title="" type="submit" value="Suscribirme!" />&nbsp;</form></div></div></div>

Ahora cambia lo que esta resaltado en verde por cada uno de tus usuarios en las redes sociales y feedburner.

Será sencillo poner este Gadget en tu blog y se vera muy bien allí  Sin embargo, si surge algún inconveniente, coméntalo y te ayudare.

Ha sido rápido, pero muy útil.
Leer Más...

4/21/2013

5 Consejos Antes de Publicar una Entrada en Blogger. Importante!

18 comentarios
5 Consejos Antes de Publicar una Entrada en Blogger
Cuando escribimos un articulo, es muy importante saber que es necesario optimizar algunos aspectos del mismo. Cuando comencé un blog, hace tiempos, al principio no me interesaba y no conocía mucho acerca de esto; publicaba mis artículos de forma incorrecta y en muchos casos perdí el tiempo que dedique a su creación.

Tal vez tu no estés optimizando tus entradas, y estas están perdiendo valor porque no eres consciente de que se deben hacer algunas cosas antes de publicarlas, además de escribir el articulo.

Hoy conocerás cinco consejos que indispensablemente deberías aplicar a cada una de tus entradas antes de publicarlas.

keywords-links-titulos-contenido-seo

1. Contenido

Este es el aspecto mas importante de tu blog, es la base del mismo.

Tu puedes tener el mejor diseño, pero si tu contenido no es único y original, de nada valdrá. Crea artículos de calidad, escribe con buena ortografía, esmérate y esfuérzate por hacer un post creativo, publica algo novedoso, que sea gustoso a tus lectores. Usa imágenes atractivas; has que el lector quiera venir de vuelta a revisar tus publicaciones, has que el lector quiera darte un "Me gusta" en las redes sociales.

Con esto puedes obtener un trafico orgánico, es decir, usuarios que recuerdan tu sitio y lo visitan de nuevo.

Añade tanto contenido de calidad como te sea posible, no publiques basura y no te copies que de eso hay mucho en la red.

2. EL Titulo de la Entrada

Otro aspecto indispensable y supremamente primordial.

Crea un titulo rico en palabras clave de búsqueda, ten en cuenta el posicionamiento de cada palabra que usas y prueba con diferentes títulos en el buscador hasta obtener uno optimizado.

Ponte en la mente del usuario e imagina que escribiría él en el buscador, y dale ese titulo a tu entrada.

3. Encabezamientos (Headings)

Seguramente has leído sobre los encabezados desde H1 hasta H6. Y quiero decirte que esto no es simplemente para que la letra se vea mas grande o mas bonita. Estos encabezados son de vital relevancia en los motores de búsqueda  ya que para ellos un H1 es un titulo muy importante y sera el que primero y con mas frecuencia indexen. Igualmente están los otros, H2, H3...H6, los cuales le dan orden a tu contenido para que sea accesible a los buscadores y legible a los lectores.

Una básica optimización del titulo de tu blog y las entradas seria la siguiente.

Ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F y busca: <title><data:blog.title/></title>

Ahora reemplazala por lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Con esto ya habrás optimizado el titulo de cada una de las entradas. Puesto que ahora se mostrara primero el nombre de la entrada y luego el titulo del blog, lo cual te dejara una buena cantidad de visitas.

4. Enlace Permanente (Permalink)

Es la URL de tu entrada publicada, este enlace debe ser creado usando las mejores palabras claves referentes al post, debe ser una URL limpia, corta y descriptiva. De esto depende también la tasa de clics y el trafico orgánico hacia nuestro blog.

Para optimizar el enlace de tu entrada, antes de publicarla ve a Entradas - Entrada Nueva y en la barra derecha dale a "Enlace Permanente". Luego elige "Enlace permanente personalizado" y escribe el enlace en este formato:
el-titulo-de-tu-entrada-de-blogger

Con esto tendrás una URL de alto valor, creada con palabras clave, la cual sera indexada con facilidad y recordada por tus lectores.

5. Descripción de búsqueda.

Llamada también MetaTags, MetaKeywords o MetaDescripcion, es un factor inmensamente importante, porque la descripción de tu blog en general y la de cada entrada individual contienen las palabras claves por las que Google y demás buscadores te encontraran.

Para optimizar este aspecto en tu blog, estando en Blogger dirígete primero a Configuración - Preferencias para motores de búsqueda y habilita y escribe la descripción de tu blog teniendo en cuenta palabras clave.

Ahora, con esto ya realizado, ve y crea una entrada o modifica alguna ya creada. y dirígete a "Descripción de búsqueda" en la barra derecha del editor de entradas. Entonces agrega de 1 a 3 lineas, describiendo esa entrada en particular.



Pienso que teniendo presente cada uno de estos 5 aspectos antes de publicar una entradas, estarás haciendo un gran trabajo, estarás recibiendo mas visitas y te veras bien en los motores de búsqueda.

No olvides estos 5 consejos y aplícalos siempre!

Agradezco que hayas leído esto; se que te ayudará.

Leer Más...

4/19/2013

Menú Horizontal con Gradientes en CSS

4 comentarios
Menú Horizontal con Gradientes en CSS

Te presento un menú hecho en CSS3 ideal para poner las categorías de nuestro blog de manera mas accesible.

Al pasar el cursor sobre cada item, el menú presenta un efecto degradado como 'hover'. Este menú no tiene subpestañas.

Es compatible con Google Chrome, Firefox 3,6+, Safari 2+ e Internet Explorer. En IE, el hover no sera visible puesto que este no soporta gradientes en CSS3.

Observa una demostración en este blog de pruebas.

Para agregar este menú a nuestro blog, realizaremos el siguiente procedimiento.

Agregar estilos del Menú Horizontal

Agregaremos los estilos de este menú, directamente en la plantilla del blog.

Para esto ve a Plantilla - Editar HTML, das clic dentro de la plantilla, presionas Ctrl + F y buscas ]]></b:skin>, y justo antes pega el siguiente codigo:

div.bottombar{ /* La barra inferior */
height: 10px;
background: #1a1109; /* Color de la barra inferior */
}

ul.semiopaquemenu{ /* Menu principal UL */
font: bold 14px Georgia ;
width: 100%;
background: #2AA7FA; /* Color de fondo del Menu principal */
padding: 11px 0 8px 0; /* Relleno de los 4 lados del menú*/
margin: 0;
text-align: left; /* Escribe "left", "center", o "right" para alinear el menú*/
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* Relleno de los 4 lados de cada enlace del menú */
margin-right: 15px; /* Separación entre cada enlace del menú */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* Sombras en CSS3 */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* relleno sobresaliente hacia arriba */
padding-bottom: 20px; /* relleno sobresaliente hacia abajo */
}

Si el menú no se visualiza correctamente puedes ajustarlo cambiando los valores que el resaltado indica.

Insertar el Menú

Despues de haber guardado los estilos, alli mismo busca </header> (en plantillas del diseñador) o <div id='header-wrapper'> (en plantillas personalizadas) y pega el siguiente codigo justo despues.

Recuerda que en las plantillas personalizadas, después que encuentres <div id='header-wrapper'>, busca hacia abajo el cierre </div> y después pega el código. No olvides que hay un cierre </div> por cada <div> que se abre, así que debes buscar exactamente el que cierra la apertura <div id='header-wrapper'>. (no necesariamente sera el primer cierre que encuentres... puede ser el segundo o tercero; según tu plantilla)

Este es el código:
<ul class='semiopaquemenu'>
<li><a class='selected' href='/'>Inicio</a></li>
<li><a href='/'>Item 1</a></li>
<li><a href='/'>Item 2</a></li>
<li><a href='/'>Item 3</a></li>
<li><a href='/'>Item 4</a></li>
<li><a href='/'>Item 5</a></li>
<li><a href='/'>Item 6</a></li>
<li><a href='/'>Item 7</a></li>
<li><a href='/'>Item 8</a></li>
</ul>
<div class='bottombar'>
</div>

Ahora reemplaza cada Item por el nombre de tu categoria, y cambia  /  por el enlace de cada una de ellas.

Para agregar mas categorias o eliminar alguna, quita o agregar alguna linea como esta: 
<li><a href='/'>Item 8</a></li>

Con esto tendrás un menú horizontal en CSS3 para facilitar la navegacion en tu sitio web.

¿Preguntas y dudas? Coméntalas!

Via | Dynamicdrive
Leer Más...

4/18/2013

Enviar Sitemap de Blogger a Google, Bing y Yahoo

43 comentarios
Enviar Sitemap de Blogger a Google, Bing y Yahoo

¿Porque es Importante Enviar un Sitemap a los Motores de Búsqueda?

Un Sitemap (Mapa del sitio o Indice de contenido) es una lista de todas las paginas de un sitio web. El objetivo principal al enviar un sitemap a los motores de búsqueda es la Indexación, es decir, avisarle y asegurarnos de que Google y otros buscadores conocen todas las paginas de nuestro sitio, que de la  manera normal de rastreo no podrían hacerlo.

¿Como Generar un Sitemap en Blogger?

Quienes usamos la plataforma de Blogger para alojar nuestros blogs, podemos generar fácilmente un mapa del sitio con la lista completa de las entradas que hemos publicado.

Antes de ir a crear el Sitemap, debes revisar el numero de entradas publicadas en tu blog. Para eso ve a Blogger - Entradas  - Publicados y entre paréntesis esta el numero de post que has publicado. Recuerda ese numero.

Condiciones

Blog con menos de 500 entradas

Si tu blog no contiene mas de 500 entradas, utiliza el siguiente Sitemap.

atom.xml?redirect=false&start-index=1&max-results=500

Blog con menos de 1000 entradas

Si tu blog contiene mas de 500 y menos de 1000 entradas debes enviar estos dos Sitemaps.

atom.xml?redirect=false&start-index=1&max-results=500

atom.xml?redirect=false&start-index=501&max-results=500

Blog con menos de 1500 entradas

Si tu blog contiene entre 1001 y  1500 entradas, usa estos tres sitemaps.

atom.xml?redirect=false&start-index=1&max-results=500

atom.xml?redirect=false&start-index=501&max-results=500

atom.xml?redirect=false&start-index=1001&max-results=500

Después de tener listos nuestro o nuestros Sitemaps, vamos a enviarlos a los motores de búsqueda.

Enviar Sitemap a Google

1. Para esto ve a Herramientas para Webmasters de Google.
2. Veras la lista de blog creados con Blogger y elige el que desees.
3. En la parte derecha oprime en "Sitemaps".

Crear sitemap
4. A continuación dale en "AÑADIR O PROBAR SITEMAP"

Aquí agregarás el sitemap, según las especificaciones que te di anteriormente. 
Si son menos de 500 entradas, solo agregaras un sitemap, si son mas de 500, debes agregar tantos sitemaps como entradas tengas según las condiciones dadas arriba.

En este caso, como no hay mas de 500 entradas, agrego este sitemap: 

atom.xml?redirect=false&start-index=1&max-results=500

Añadir o probar sitemap

5. Después de esto podrás ver el numero de entradas enviadas y notaras que aun estan pendientes por indexarse. Solo es cuestión de esperar y Google habrá rastreado todas nuestras entradas.


Paginas enviadas e indexadas
Ya se ha enviado el mapa del sitio a Google. Ahora veremos como hacerlo en Bing y Yahoo.

Enviar Sitemap a Bing y Yahoo

Como sabemos Yahoo fusiono esta herramienta con Bing, asi que Bing esta designado para prestar este servicio con la garantía que tendremos la indexacion de Yahoo también.

Yahoo se ha unido con el motor de búsqueda Bing de Microsoft, nuestro trabajo se hace aún más fácil, ya que con la presentación del blog en Bing se fijará en directo a los dos motores de búsqueda.

Para comenzar ve a Herramientas para administradores de web de Bing, e inicia sesión con tu cuenta en outlook.

La URL de tu blog debe estar en este formato: http://www.blog.com/ ó http://www.blog.blogspot.com/ con el slash (/) al final

Agrega la dirección de tu blog y luego la url del sitemap.

Ten en cuenta las anteriores condiciones. En mi caso yo utilice solo un sitemap, ya que tengo menos de 500 entradas. (Los demás sitemaps pueden agregarse después).

Agregar sitio a Bing y Yahoo

A continuación debes comprobar la propiedad de tu blog, en la opción dos, copia y pega el código que alli se te brinda justo después de <head> en la plantilla de tu blog.

Metaetiqueta
Despues oprimes en "COMPROBAR" Y tu sitio estará verificado.

Por ultimo para saber que nuestro sitio esta siendo indexado por Bing y Yahoo, observamos en la parte inferior que este Correcto


Sitemap correcto en Bing y Yahoo

Con esto ya hemos enviado nuestro blog a Google, Bing y Yahoo. Debes visitar frecuentemente para verificar que no hayan errores y para reenviar de nuevo el sitemap cuando tengas nuevo contenido.

Muy bien, ha sido interesante escribir este articulo. He aprendido, y que mejor! He enseñado!

Cualquier pregunta respecto al tema, por favor coméntalas.
Leer Más...

4/17/2013

10 Maneras de Aumentar el Tráfico hacia tu Blog

Deja tu comentario
10 Maneras de Aumentar el Trafico en el Blog

En estos tiempos hay miles de blogs en la red. Todo el mundo compite por sus lectores, y cada vez mas crece el numero en la competencia. Es muy fácil crear un blog, lo difícil es que sea un éxito!

Hacer que la gente venga a tu blog es trabajo de largo tiempo. No creas que por leer un libro o esta entrada, ya estarás recibiendo visitas mágicamente  No, no... para que esto funcione hay que actuar. Pero lo que si te aseguro es que si lees este articulo, el tiempo que te llevara en aprender sera corto.

A continuación te dejare algunas formas para aumentar el trafico hacia tu blog.

1. Dirígete hacia la gente que Comparte.


Compartir todo el contenido manualmente es imposible, por eso debes dirigirte hacia aquellas personas que les gusta compartir lo que han leído.

Para lograr esto, debes crear articulos que ameriten a ser compartidos. Crea contenido atrayente y de calidad. Por ejemplo es mas fácil que se comparta un articulo llamado "Tsunami en Nueva York" que uno titulado "Grandes olas en el mar". Bueno, tal vez exageré.

Hay publico que comparte, como también hay otro que no le interesa compartir. Y ademas de estos esta la competencia, esos son los otros bloggers que son muy activos y comparten mas que cualquiera.
Si no diriges tu contenido hacia el tipo de personas que lo comparten, probablemente estes perdiendo mucho.

2. Usa los Motores de Búsqueda para atraer gente.


Utiliza técnicas SEO (Posicionamiento en motores de búsqueda). El SEO es inmensamente útil si sabes utilizarlo. Con esto pondrás tu blog en los primeros ranks de Google. Busca palabras clave referentes a tu temática y logra posicionarlas en las primeras lineas de resultados.

Usa los Motores de Búsqueda para atraer gente.

3. Utiliza Google Analytics


Instala esta grandiosa herramienta que te dará un completo informe detallado sobre las fallas y puntos fuertes de tu blog. Te permite conocer tu blog profundamente, la inclinación según el país y la palabra clave. Con esto sabrás que debes corregir y que debes potenciar. Google Analytics tiene numerosas utilidades con las cuales examinar tu blog a fondo.

Si sabes como usarlas, optimizaras tu blog y recibirás visitas.


Utiliza Google Analytics

4. Utiliza palabras clave (Keywords) después de una investigación adecuada


Debes apuntar a las palabras que se utilizan mayormente cuando los usuarios buscan en Google. Para conocer, examinar y encontrar palabras clave utiliza Google AdWords

Google AdWords


Ahora ingresas la palabra relacionada con tu nicho, y AdWords te mostrara la competencia y busquedas globales y locales que esta tiene.

5. Únete a Redes Sociales y Comunidades


Debes compartir tus artículos en las redes sociales, esto es algo muy importante y necesario para obtener trafico. Ademas de esto, únete a comunidades referentes a tu temática y participa activamente en ella con sus miembros.

Cuando aportas algo de valor, tu reputación crece y las personas recuerdan y con gusto visitaran tu sitio de nuevo.

Sitios como Facebook, Google+ y Twitter tienen millones de usuarios. Compartir tus mensajes en estos sitios que fácilmente se propagan.

Algunas utilidades que te ayudaran:

6. Optimiza el Diseño de tu Sitio


Personaliza tu sitio para que sea agradable al lector. Has que lector guste en leer tu pagina web y que sea completamente accesible.

Las plantillas predeterminadas son a veces poco atractivos, asi que seria bueno utilizar temas creados con estilo.

Te recomiendo buscar plantillas aquí: Premium Blogger Templates

7. Links en Medio de los Post


Has referencia entre tus artículos  Pon un enlace en tu entrada que dirija a un tema complementario al articulo, es es muy útil, ya que a las personas les gusta las referencias.

Con esto obtendrás que el usuario pueda navegar mucho mas tiempo y explorar tu contenido. 

Para conocer detalles en cuanto a este consejo, dirígete a Google Alerts y el te puede ayudar.

8. Interactuar con otros Blogs


Comentar en otros blogs hará que consigas visitas, esto solo si aportas calidad en tu comentario.

Busca un buen sitio en donde hacer comentarios y da tu aporte allí. Esto atreará visitas.

Usa un buen nombre de usuario, y debes hacer que no se note, que solo comentas por buscar visitas.

9. Suscripción por Email.


Suscripción por Email.

Algo muy importante. 

Muchos de los visitantes querrán recibir tus actualizaciónes en su correo, mucho otros olvidaran el nombre de tu dominio. Por eso debes asegurarte de que pueda agregarse a tu lista de emails.

Para activar una suscripción por correo electrónico. Dirígete a FeedBurner

10. Estar atentos ante la competencia.


Mantente informado sobre los movimientos de tu competencia. Revisa frecuentemente sus publicaciones y nuevas herramientas implantadas. 

Ten como objetivo ser el mejor en lo que haces, se original y trabaja con calidad. No permitas que otros puedan superarte, y si ya lo hicieron, logra subir a su nivel y mantenerte allí.

Se que hay mas consejos, pero para comenzar seria bueno que aplicaras estos.

Por ultimo, trabaja duro y constantemente. Solo con perseverancia lograras el éxito. Y recuerda que toda persona exitosa, también fue principiante.

Leer Más...

Recibe actualizaciones en tu Email :)