Fanbox de Redes Sociales

Con este Fanbox de las redes sociales: facebook, Twitter y Google+, puedes hacer que los usuarios que visitan tu pagina web, puedan darle ME GUSTA a tu fanspage, sin necesidad de salir de la pagina web. Esta forma es mucho mejor ya que se ganan la atencion del usuario para que le den Me Gusta a tu fanspage

Vista Previa:

Lo que vemos en la Vista Previa es solo el fanbox deslizante de Facebook, con Tiwtter y Google+, obtendrá el mismo efecto.

Para añadirlos, vas a Diseño → Añadir Gadget → HTML/Javasprit y pega lo siguiente:

<style>

#flotante1 {

position:fixed;

top:100px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1002;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante2 {

position:fixed;

top:240px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1003;

border-radius:10px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante3 {

position:fixed;

top:380px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1004;

border-radius:10px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante1:hover, #flotante2:hover, #flotante3:hover {

right:0px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

div.likeboxwrap {

margin-top:-5px;

margin-left:-45px;

width:238px;

height:325px;

background-color:#fff;

overflow:hidden;

border-radius:10px;

}

</style>

<!-- Primera pestaña -->

<div id='flotante1'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV29m-g316TzuMEIS9tMcggtwGOwNXxcA0S_LZgvolBjLB05zh_4FnKcri3tQGUJkNTg48oz2f3C8U-NQp-oX5TxzPeSUl0g9sXKtKFeZw7SOBQhpj_Lm94Z9_-cvwqxqLe2U-nLFbDvU/' style='float:left;'/>

<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>

</div></span></div></div>

<!-- Segunda pestaña -->

<div id='flotante2'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoMZLBIXqngypQRt-usJ6eIfICPtbTTp4AnqdH7B0dcCKVSElIRZW_CdVq-o3AVf9mLidt7ivhfVTQzO8YlSWWwfEV_r5nLpXR7BXKil3SqEjyFGYFed96aOlkJkxsrSrsoYgnZqSi2qI/s159/goo_tab.png' style='float:left;'/>

<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">

</div>

<script type="text/javascript">

(function() {

window.___gcfg = {'lang': 'es'};

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

})();

</script>

</div></span></div></div>

<!-- Tercera pestaña -->

<div id='flotante3'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyRIY2q2fiGBOcla6GJoh5gELYh-QijC5-SH54GqwJyGAsnP_Ck5B-qMcrpTaU3nBCPF-taPs172h0F3HL3u1PQ8R99l_U10vzWVrYTyxYxHe3GJFxP7QbIvceQSDSU0Dy3JYURK2jQ1c/' style='float:left;'/>

<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>

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

<style>

.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}

.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}

.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}

.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}

.follow_box img{border: 0;}

.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}

.follow_box a:hover{text-decoration: underline;}

.follow_action{padding: 0 0 0 8px;}

.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}

.follow_box .follow_button{margin: 5px 0 0;}

.follow_box .total{min-width: 230px; overflow: hidden; display: block;}

.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}

.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}

.follow_box .clearfix{zoom: 1;}

.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}

.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}

.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}

.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}

.follow_box .footer_border{ margin-top: 5px;}

.follow_box .uiImageBlock{line-height: 14px;}

.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}

.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}

.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}

.follow_box .titlecase{text-transform:capitalize;}

</style>

<script>

/*

* Twitter Follow Box jQuery Plugin

* http://jobyj.in/twitter-follow-box-widget/

* Copyright 2012, Joby Joseph

* Free to use under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*/

(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsamj-iyHIuJjMdN9H-MSGdXJbtcqJk5lPnPqHYcXrFpQIpZ5uYgyJ1VVN90FPm3Q1VnTKvuxlyqCZOwDFsgIIfD3AoEEUfDjdn0ADjiz7PfL6v-zCccR-wFU7wSPmiRqtDZ2pmG64Bg/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)

</script>

<script>

$(document).ready(function(){

$('#twitterfollowbox').followbox({

'user':'usuarioTwitter',

'height':'300',

'width':'260',

'theme':'custom',

'border_color':'#ffffff',

'bg_color':'#ffffff',

'bg_image':'',

'title_color':'#3B5998',

'total_count_color':'#333333',

'follower_name_color':'#BDBDBB'

});

});

</script>

<div id="twitterfollowbox" class="follow-box-container"> </div>

</div></span></div></div>

Ahora reemplaza lo que esta en azul, por lo que se indica, en el caso de facebook donde dice nombre-de-la-página-de-facebook reemplazalo por el nombre de tu pagina en facebook, lo mismo con el usuario de Twitter, lo que cambia es en la parte de Google Plus donde dice XXXXXX la cambias por tu ID de G+, esta la puedes hallar en la URL de tu perfil o pagina en G+, en mi caso la URL de mi perfil es:

112998393368589174522 ◄Es la ID en Google+

Ahora solo guarda los cambios 

ACTUALIZACIÓN

Si en el fanbox de Facebook te sale algún error, es posible que se deba a que no tienes una URL personalizada en tu página de Facebook, en este casos deberás cambiar esta parte:

http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

 Por esa otra:

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX

Ahí además de poner el nombre de tu página de facebook donde se indica, deberás añadir en las XXXX una serie de números que aparecen al final de la URL de tu página de Facebook.

Botones de redes sociales

Hola amigos, hoy les vengo a traer un gadget, de Redes Social para blogger, en donde el lector al hacer click, lo lleve a tu red social, para añadirlo es muy facil, solo vas a Diseño → Añadir Gadget → HTML/Javasprit, y pegas:

<a href="http://www.facebook.com/FanPage" target="_blank"><img alt="Siguenos en Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlD10bQuv8Jqw4vMei_Vh13hFBZBVWtX6P2Z7xieDLEx59bgTqvusx-7b6GVg3o2jmWJnW-GhMWoFf1KjzJKr8hV2GW-KVEwSr6VDgmj0fCEzgZPcT7_5fd-REIm08iVXCviIGS-AL8g/s48/facebook48.png" width=48 height=48  /></a>
<a href="http://www.facebook.com/CuentaTwitter" target="_blank"><img alt="Siguenos en Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CaT6jXahkoNxzHWE2NJOn5TbQ7YhXqAieHnLPoazX06D6_vhStDTa6xbPOsnJaqBl7lMm0OxBJWxXgeghRm4YzDn1eJaqe3Kx3tEiKiHTO6xlS2efBc-mqPBN_LSxSTa06Piw-AYau34/s1600/twitter.png" width=48 height=48  /></a>
<a href="http://www.facebook.com/CuentaGoogle" target="_blank"><img alt="Siguenos en Google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5FEgU1GP1XB_yss5BpHHepJCEWkcKpd01rjCO7W8qJZiNJ1St86ZRCoWoSkGrmTQqtjEsFlBqoUWhzGh017_ZatvYaljkPWfthvqdjZkLAKUx7wlncDxTS-eel9J-NycM9az5pqRJU6z/s1600/google+.png" width=48 height=48  /></a>

Si quieres agregar otra red social u otro tipo de pagina, agregas:

<a href="Link" target="_blank"><img alt="Siguenos en Nombre" src="Link de la imagen" width=48 height=48  /></a> 

En donde dice Link lo sustituyes por el link de otra red social u otro tipo de pagina.
La parte en donde dice Nombre lo sustituyes por el nombre de tu pagina u otro texto que desees.
En donde dice Link de la imagen lo sustituyes por el link de la imagen que quieres que valla, de preferencia que sea con las esquinas redondeadas y en formato PNG (hacerlo en photoshop).
Tambien puedes cambiar el ancho de los botones 
Widht:Ancho
Heigth: Altura

Botones para compartir flotantes que se deslizan al bajar

 

Hola amigos, hoy les vengo a traer unos botones para compartir flotantes, que se deslizan con el blog, estos botones se encontrarán en el lado izquierdo del blog, e irán bajando junto con el blog. Incluíremos solo los botones basicos Facebook, Twitter, Google+, aunque tambien puedes agregar más botones.

Para añadirlos nos vamos a Plantilla → Editar HTML, buscamos </head> y antes pegamos:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>

Luego buscamos:

<div class='post-header'>

Y debajo pega:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>

</div>
</b:if>

Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>

Iconos de Redes Sociales con efecto de desvanecimiento

 Estos Iconos de las Redes Sociales, obtiene un efecto de desvanecimiento al pasar el cursor por encima, le quedaría muy bien en tu blog.

Vista Previa (pasa el cursor sobre los iconos)

           

Vé a Plantilla → Editar HTML y busca:

]]></b:skin>

 Justo arriba de ]]></b:skin> pega lo siguiente:

#social img:hover {opacity: 0.6;}

 Guarda los cambios, y vé a Diseño → Añadir Gadget → HTML/Javascript y pega:

 <div id="social">
<a href='URL DE TU FANPAGE DE FACEBOOK' target="_blank"><img alt="Facebook"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSRj1cg_dr4dGfhElyjDcWp7vfteNC8dNXfZtehBplH1VhmxFWf7ZBXo-2R2ttdj5QGO_G0IknhXQaDCWdP0u7fRSu-4yeusGkYPVUCVKMhu2rtfpYBdzn_Y3VVYr3vGNhPfJSQNRb9DY/s64-no/thumbs_097124-3d-glossy-blue-orb-icon-social-media-logos-facebook-logo.png" title="Siguenos en Facebook" /></a>
<a href='URL GOOGLE PLUS' target="_blank"><img alt="Google+"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboliFvbiTJK0V-5M7b-6A0OkQUiFUE4miX2QQLqmthySunMRhFEfr7wnIvtZeq_XbswHWKFW9__9sRNUiX-Mie1BtF32HkrEi2Vmtft25h26swzyE3AKGTy6oUulyjxOpye_W3LsPiN4/s64-no/thumbs_097137-3d-glossy-blue-orb-icon-social-media-logos-google-g-logo.png" title="Siguenos en Google Plus" /></a>
<a href='URL TWITTER' target="_blank"><img alt="Twitter"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6p9OOsKfcz0Y42MBNTx-NZdWeuWHCH-5qal6WgsUx8g8UJqkvognkmSJpa4MLy1SP6NjUhx6pMMxKS1SuXE2CXWASeVot_2EpDgBiJ93V-c0Tgzlyrbze4eM4v5Rka0YsChxrA5h4l-E/s64-no/thumbs_097196-3d-glossy-blue-orb-icon-social-media-logos-twitter.png" title="Siguenos en Twitter" /></a>

Botones de Redes Sociales (Facebook, Twitter y Google+) con efecto hover

Hola amigos, hoy les enseñare a como poner los botones de las redes sociales Facebook, Twitter y Google+ en nuestro blog.
Este gadget es muy bueno ya que vienen en blanco y negro, y al pasar el cursor, se vuelven a color.

Vista previa:

1. Ir a Plantilla → Editar HTML, adentro presionamos Ctrl + F para buscar lo siguiente:

]]></b:skin>

2. Encima del  ]]></b:skin> pegamos:

***Efecto Hover para tus Redes Sociales por Gadgeria.blogspot.com***#sosial {display:block;margin:0px 0px 0;width:100%;float:center;background:transparent;position:relative;padding:0;height:40px;}#sosial::before {content:"";width:0;height:0;bottom:-11px;position:absolute;right:-1px;border-right-color:transparent;border-bottom-color:transparent;}#sosial::after {content:"";bottom:0;position:absolute;left:-40px;z-index:99999;border-left-color:transparent;}#sosial ul {position:relative;}#sosial ul::after {content:"";bottom:-47px;position:absolute;left:-43px;z-index:99999;}#sosial li {display:block;float:left;margin:0 10px;text-indent:-999999px;}#sosial li a {display:block;height:45px;width:133px;overflow:hidden;background:url(http://3.bp.blogspot.com/-_yX_V-or3pw/Ubi8AXEI4EI/AAAAAAAAAEs/eyXbDlhZnxo/s400/Sosial-Sprite.png);}.fb {background-position:0 0;}.fb:hover {background-position:0 -45px !important;}.twitter {background-position:0 -177px !important;}.twitter:hover {background-position:0 -225px !important;}.gplus {background-position:0 -90px !important;}.gplus:hover {background-position:0 -135px !important;}

Despues, guardamos los cambios y nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos lo siguiente:

<div id="sosial">
<ul>
<li>
<a class="fb" href="https://www.facebook.com/" target="_blank">Haste Fan en Facebook</a></li>
<li>
<a class="twitter" href="http://twitter.com/" target="_blank">Siguenos en Twitter</a></li>
<li>
<a class="gplus" href="https://plus.google.com/" target="_blank">Siguenos en Google+</a></li>
</ul>
</div>

Reemplazamos lo que está en rojo por lo que le corresponde.

Cursores de memes

Bueno amigos hoy les traigo nuevos cursores de memes para web, bueno que a mí me gustó mucho, para a quien le gusta los memes y tiene un blog de humor le quedará muy bien, Pruebenlo.        

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit  y pegas el código del cursor que más les guste.

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/smilies/smi-3/smi220.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/13/fffffuuuuuuuu-rage-face-comics.html" target="_blank" title="FFFFFUUUUUUUU  - Rage Face Comics"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="FFFFFUUUUUUUU  - Rage Face Comics" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/smilies/smi-3/smi216.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/13/forever-alone-happy-rage-face-comics.html" target="_blank" title="Forever Alone Happy  - Rage Face Comics"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Forever Alone Happy  - Rage Face Comics" style="position:absolute; top: 0px; right: 0px;" /></a>

   

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/smilies/smi-3/smi210.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/13/lol-rage-face-comics.html" target="_blank" title="LOL - Rage Face Comics"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="LOL - Rage Face Comics" style="position:absolute; top: 0px; right: 0px;" /></a>

    

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/smilies/smi-3/smi215.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/13/girl-happy-rage-face-comics.html" target="_blank" title="Girl Happy  - Rage Face Comics"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Girl Happy  - Rage Face Comics" style="position:absolute; top: 0px; right: 0px;" /></a>

   

   

  <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/smilies/smi-3/smi205.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/13/omg-rage-face.html" target="_blank" title="OMG - Rage Face Comics"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="OMG - Rage Face Comics" style="position:absolute; top: 0px; right: 0px;" /></a>

Iconos de Redes Sociales para Compartir

Hola amigos, hoy les vengo a traer unos iconos muy buenos para compartir, que lo puedes poner en una entrada o como un gadget en HTML/Javascript, lo bueno de estos iconos es que, si tu entrada o tu blog le fascina al usuario, él lo puede compartir con sus amigos, y así, hacer crecer tu blog.

Para añadirlos como un gadget nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegas el código del icono que prefieres.

Para Añadirlos en una entrada o pagina, nos vamos a la Edicion HTML y pegas el código del icono que prefieres.

<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcde13f58c50d2b"></script><!-- AddThis Button END -->

____________________________________________________________________________________________

<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script><!-- AddThis Button END -->

____________________________________________________________________________________________

<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcde18b394a19ad"></script><!-- AddThis Button END -->

"Hi-Tech" Plantilla para blogger

Hi Tech esta plantilla tiene muchas cualidades, se vería muy bien en tu blog.

sin duda esta es una de las mejores plantillas que e visto, tiene una columna a la derecha en donde puedes insertar una imagen, iconos sociales en la parte superior, bueno, sin más que decir, aquí esta la plantilla.

              

Iconos de Redes Sociales con efecto 3D

Hola amigos, hoy les vengo a traer uno Iconos de nuestras Redes Sociales con efecto 3D

Vista Previa:

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos lo siguiente:

<style type="text/css">
ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; height:55px}
ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; border:none}
ul#m-soc6 li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9aFpX_XvM9bRmO2JwGtAYERyRRx1WQqW0pZpPe5hkyg1GkuKz60WAPf6zheeOziG9vom9fdZ7rZ0EvWRZ3louf8aHRrn7s8Xb4m0FLUWxTGatfv82nR9lClFHNzOWQi9KTrGHPbPGHxU8/s400/sprite6-compartidisimo.png) no-repeat 0 0; margin:0; padding:0; display:block; position:relative; width:32px; height:32px; overflow:visible}
ul#m-soc6 li a.twitter{background-position:0 0}
ul#m-soc6 li a.facebook{background-position:-32px 0}
ul#m-soc6 li a.google{background-position:-64px 0}
ul#m-soc6 li a.rss{background-position:-96px 0}
ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}
ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}
ul#m-soc6 li a.google:hover{background-position:-64px -32px;}
ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}
ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
ul#m-soc6 li a:hover{text-decoration:none}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}
</style>
<ul id="m-soc6"><li><a class="twitter" href="Url Twitter"><span>Twitter</span></a></li><li><a class="facebook" href="Url Facebook"><span>Facebook</span></a></li><li><a class="google" href="Url Google+"><span>Google+</span></a></li><li><a class="rss" href="Url Rss"><span>Suscribete</span></a></li></ul>

Cambian lo que está en rojo por lo que le corresponde.

Dominios Gratuitos Uni.me

Blogger da por defecto un subdominio .blogspot.com y aunque es muy útil al principio, lo mejor es hacerse con un dominio propio del tipo miblog.com pero si no tienes el dinero para comprar un dominio .com hoy te traigo una alternativa de dominio propio y lo mejor que es gratis

Hace poco he descubierto un excelente dominio gratis, se trata del Uni.me donde podrás registrar tu dominio totalmente gratis del tipo miblog.uni.me, y lo mejor es que estos dominios son indexados por Google y se les puede personalizar las DNS por lo que pueden ser usados tanto en Blogger como en Wordpress.

Puedes registrar un numero ilimitado de dominios, y lo bueno es que te los activan de forma inmediata, a continuación les dejo un vídeo de como configurar tu dominio uni.me en Blogger, esta en portugués pero es muy sencillo seguir dicha guía.

Como ves, es muy fácil configurar dicho dominio en Blogger, así que ya no tienes excusa para no tener un dominio propio, ya que es totalmente gratis, y lo mejor como le he dicho los dominios con la extensión .uni.me son indexados por Google.

Aquí ya tienes otra opción de dominio gratis para Blogger y Wordpress.

Dominio TK Gratuito

Hola amigos, hoy les traigo la oportunidad de conseguir un dominio gratis, se trata del tominio tk es una gran alternativa para aquellos usuarios de blogger que estan cansados del dominio tan largo que nos ofrece blogger

Se trata de Dot TK, un servicio de redireccionamientos de dominios gratis. Puedes redireccionar tu blog, tu cuenta de Twitter, tu Facebook, tu perfil, en fin, todo lo que quieras.

Pasos para obtener el dominio

1. Entrar a Dot TK e ingresar la URL que deseas redireccionar, por ejemplo: http://nombre-de-mi-blog.blogspot.com/.

2. Luego te aparecera el nombre con que se redireccionara,como por ejemplo:  nombre-de-mi-blog.tk.

3. Luego escoges el plan que desees, y listo.

Iconos de Redes Sociales con efecto hover

Hola amigos blogueros, hoy les vengo a traer un pack de iconos sociales con efecto hover, este gadget es muy bueno, ya que es otra forma de que otros usuarios se suscriban a tus redes sociales.

Vista Previa:

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos lo siguiente

<style type="text/css">

ul#social {

    position: fixed;

    margin: 0px;

    padding: 0px;

    top: 10px;

    left: 0px;

    list-style: none;

    z-index:9999;

}

ul#social li {

    width: 100px;

}

ul#social li a {

    display: block;

    margin-left: -2px;

    width: 100px;

    height: 70px; 

    background-color:#fff;

    background-repeat:no-repeat;

    background-position:center center;

    border:1px solid #AFAFAF;

    -moz-border-radius:0px 10px 10px 0px;

    -webkit-border-bottom-right-radius: 10px;

    -webkit-border-top-right-radius: 10px;

    -khtml-border-bottom-right-radius: 10px;

    -khtml-border-top-right-radius: 10px;

    -moz-box-shadow: 0px 4px 3px #000;

    -webkit-box-shadow: 0px 4px 3px #000;

}

ul#social .twitter a{

     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtgH84Xgf4QaQwA4wm_liJ6ufDV3jyKn5Jf5nZ5nYpIGQukhcuBEIb3LA3HXfgJDhK1LjWN6b13hLVXrfhkn_lYmSzh7C0-prtTuley_i2o5bd8XjIURboX-9l8RUxqG2kcojGQYf3oY/s1600/Twitter.png)no-repeat;

background-position:center center;

}

ul#social .googleplus a      {

    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJQlPkSsKXIf3Ozl-pxFiIyQIdWOynS-XY-SNbzMnIzMtlGwRCz8Jfyp0UmSPTMqXIoCsZYL78ugL_GRwG_dDRjyjeRAwLVNHsdzeGIQr2mR20Gjrod4vH72kQFkKxMLo-ayy4b1sbr-4/s1600/GOOGLE+PLus.png)no-repeat;

background-position:center center;

}

ul#social .facebook a      {

    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjOqJTpHkBFjibB3SD-Cn8zbDrbjlEWqTSEuCqG7ndYRaIF1Z4qawMYDKdmxp6vr9F1ZZ8gowjzzZ1slul4NJuliN-oUjzOpebfYPu1ANHBVklNnammbzeBMLEluzmmrJWAr817MaEZw/s1600/Facebook.png)no-repeat;

background-position:center center;

}

ul#social .rss a      {

    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOBIDeG1uYfblzw2OUMvb0-X4Kp58zt9O_oL4xH-VC3zbqHCt7KXfrmnA4nb1FU3R4RQ0fA8ZrZpgwJR5YDP4To2sjiMWaG6CjT3EgkWzxGjjTFfLvNTlmIy3vkqvDtEkqjjNiYkU3EE/s1600/rss.png)no-repeat;

background-position:center center;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript'>

$(function () {

    $('#social a').stop().animate({

        'marginLeft': '-85px'

    }, 1000);

    $('#social > li').hover(

        function () {

            $('a', $(this)).stop().animate({

                'marginLeft': '-2px'

            }, 200);

        },

        function () {

            $('a', $(this)).stop().animate({

                'marginLeft': '-85px'

            }, 200);

        }

    );

});

</script>

<ul id='social'>

 <li class='twitter'><a href='#' title='Twitter'></a></li>

 <li class='googleplus'><a href='#' title='Google Plus'></a></li>

 <li class='facebook'><a href='#' title='Facebook'></a></li>

 <li class='rss'><a href='#' title='Rss'></a></li>

</ul>

Cambiar el # por el link que corresponde en cada caso.

Como insertar un mapa en blog

En ciertos casos habrá quienes necesiten poner un mapa en el blog de su negocio, su ciudad, su vecindario, etc.

Para poner un mapa en el blog sigue estos pasos:

1. Asegúrate de que el mapa que deseas insertar esté marcado.

2.Haz clic en el botón de enlace situado en la parte superior del panel izquierdo.

3.En el cuadro que aparece, copia el código HTML en "Pegar HTML para insertar en sitio web" y pégalo en el código fuente de tu página web o de tu blog.

Y el resultado es:

"Retina Blogger" Plantilla para Blogger

Retina Blogger es una espectacular plantilla para Blogger que tiene muchas características que la hacen unica en su genero.

Cuenta con un slider en la parte superior muy elegante, en la pagina principal se pueden mostrar las ultimas entradas de algunas etiquetas, también cuenta con miniaturas en la pagina principal.

              

"Date a Live" Plantilla para blogger

Date a Live es una de las mas hermosas plantillas que he visto para Blogger, esta plantilla esta categorizada como premium, dado su gran elegancia y múltiples efectos.

Esta es una plantilla premium blogger con 2 columnas, barra lateral derecha, estilo galería, diseño web 2.0, mirada fresca, esquinas redondeadas, diseño exclusivo para Blogger, columnas de pie de página, iconos de marcadores sociales, miniaturas, menú desplegable, mensajes relacionados, un diseño de fondo, comentarios anidados con un excelente diseño.

 

              

Gadget "Deja un comentario" con imagen de Homero

Aquí les dejo un Gadget muy  útil para vuestro blog , se trata de un famoso Gadget ( Deja un comentario con imagen de Homero ) que seguramente todos lo hemos visto en otros blogs.

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos el siguiente codigo:

<br /><a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://masgadgetsb.blogspot.com/2013/08/gadget-deja-un-comentario.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHAyu5TfKDMmya2g0v9huH7KwKNCk0l-S01oB23KuNhBDYL8aUkX1kzajFcIylNNoHcY-VHl6c8YFGaf1bbb-c5Yroe_T8jO3iG2RyeM6JUpNN-F5Gm6g3ZgvdeUQi_4tyn8x-3qRx1c/s1600-r/Deja+un+comentario+homero.png" /></a><br />

Gadget de Esqueleto andante

Para aquellos que les gusta estar siempre a la moda y poner cosas interesantes en su blog, hoy estan en su día de suerte. Hoy tenemos un excelente gadget que consta de un esqueleto que se mueve sigilosamente.

Así que para no dejar de publicar por mucho tiempo hoy les traigo este excelente gadget para que coloquen en donde quieran porque está muy bueno.

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos lo siguiente:

<a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="http://masgadgetsb.blogspot.com/2013/08/gadget-de-esqueleto-andante.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGxOq21v77Mv6uH6w_IM32Q2PcGKG6m0X5sZKnguIOAYoewdACFy342mYBw87B2snm475RMbUwI4nI2nbnPMgDK3mXB8XAw2xoAZW8OWX5LzkHOI2IHoM2CbvHPkOham_LgzQmSKio9c/s1600/2rrx9ba.gif" /></a>

Ahora solo te queda guardar los cambios.

Traductores para web

El contenido de tu sitio web sólo puede estar en un idioma (por ejemplo, Español), pero tus visitantes pueden preferir leer tu contenido en sus propios idiomas nativos. Traducir el contenido de tu sitio web a varios idiomas de forma manual puede ser costoso y complicado, pero afortunadamente en la web hay varios servicios que ofrecen gratuitamente gadgets traductores para blogs o páginas web. Solo necesitas elegir un servicio, personalizar el traductor a tu gusto, copiar su código HTML/Javascript correspondiente y pegarlo donde quieras que este aparezca en tu sitio.

Acontinuacion, verás paginas en donde puedes conseguir el codigo HTML de distintos traductores para web.

1.- Traductor Google

Enlace: https://translate.google.com/manager/website/

2.- Google Translate My Page

Enlace: http://tinyurl.com/Google-Translate-My-Page

3.- Translateth

Enlace: http://translateth.is/

4.- Microsoft Translator

Enlace: http://www.microsofttranslator.com/widget/

5.- Free Website Translations

Enlace: http://free-website-translation.com/

6.- GTranslate

Enlace: http://gtranslate.net/

7.- Translate Client

Enlace: http://translateclient.com/translator_widget.php

8.- Webestools

Enlace: http://tinyurl.com/Translation-Buttons-Generator

9.- WidgetBox

Enlace: http://www.widgetbox.com/widget/google-site-translator

10.- On Your Site!

Enlace: http://www.onyoursite.com/trans/

Gadget de cámara de vigilancia

Hola amigos, buscando por la web, me encontré este gadget de una cámara de vigilancia para tu blog, cuando lo agregas, la cámara se pone en la parte superior de la derecha.

Para añadirlo nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos lo siguiente:

<br /> <div style="text-align: center;"><a href="http://masgadgetsb.blogspot.com/2013/08/gadget-de-camara-de-vigilancia.html" _fcksavedurl="" style="right: 0px; position: fixed; top: 0px;"><img src="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" _fcksavedurl="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" alt="" /></a></div>

Pop Up con el boton Me Gusta de tu pagina de facebook

Que tal amigos, hoy les vengo a traer una ventana Pop Up con el boton Me Gusta de tu pagina de facebook facebook, que aparece solo la primera vez que el usuario entra a tu pagina. Otra forma de ganar seguidores mediante facebook.

Vista Previa

Para añadir la ventana Pop Up nos vamos a Diseño → Añadir Gadget → HTML/Javasprit y pegamos lo siguiente:

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOC...600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn...background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-...00/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txE...0/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Mantente en contacto con nosotros a través de Facebook. Sólo presiona el botón Me gusta <center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FXanacom%2F 160821757320162&amp;width=300&amp;colorscheme=light&amp;show_face s=true&amp;border_color=%23ffffff&amp;stream=false &amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
</div>
</div>

Lo que está en Azul, reemplazar por el html de una Caja de Facebok.

¿Como consigo el HTML de una Caja de facebook?

 1. Ir al siguiente Link: https://developers.facebook.com/docs/reference/plugins/like-box/

 2. Poner el link de tu pagina de facebook y Desmarcar los casilleros

3. Das click en Get Code

4. Después les saldrá una ventada en donde tienen que hacer click en Iframe

Les saldrá un cuadro con el codigo HTML de tu pagina de facebook.