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

Recibe actualizaciones en tu Email :)