Poner un Fanbox en tú blog de Blogger

En esta entrada les enseñaré a poner un fanbox de Facebook, que sirve para que los usuarios al ingresar a nuestro blog les aparezca el fanbox y así vean que el Blog tiene una fanpage, y así más posibilidades de que le den like, en este fanbox usaremos javascript (jQuery), CSS y obvio HTML, ya saben para que, el HTML y CSS para la estructura y el diseño, y el Javascript tendrá dos funciones, una es para poner el botón cerrar, y la otra es para las cookies, más adelante hablaré para que sirve.

Demo en esta misma entrada, si ya lo ocultaste vuelve a mostrarlo, Click aquí

Y así empezamos con el tutorial :D

Primero y como siempre nos vamos a ir a Nuestro blog -> Plantilla -> Editar HTML, una vez ahí vamos a abrir el buscador, esto lo hacemos presionando CTRL + F y enseguida buscamos ]]></b:skin> y justo arriba de esa línea agregamos los siguientes estilos:

#fanbox {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, .7);
z-index: 9999;
display: none;
}
#fanbox .botoncerrar {
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
z-index: 9999;
}
#fanbox .contenido {
background: #FFF;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin: -153px 0 0 -250px;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 3px 5px 9px #333;
-o-box-shadow: 3px 5px 9px #333;
-ms-box-shadow: 3px 5px 9px #333;
-moz-box-shadow: 3px 5px 9px #333;
-webkit-box-shadow: 3px 5px 9px #333;
}
#fanbox .contenido h3 {
display: block;
background: #3b5998;
color: #FFF;
font-family: sans-serif;
padding: 12px 10px 11px 10px;
margin: 0;
}

Y listo, ya tendremos los estilos, ahora lo que vamos a hacer es agregar el javascript, que es necesario para poder cerrar el fanbox y también para usar las cookies, ¿Para que usamos la cookie? bueno, es fácil la cookie la vamos a usar para no mostrar siempre el fanbox, osea que cuando se presione el botón de cerrar vamos a crear la cookie, y cuando la cookie exista no lo mostraos, pero cuando no exista si lo vamos a mostrar, y para eso eso, espero que me hayan entendido :D
Bueno, ahora si agregar el javascript, para esto buscamos </body> y justo arriba agregamos:
Y listo, ya tenemos también el javascript xD, ya arriba expliqué que es lo que hace.

<script type="text/javascript">
$(document).ready(function() {
var cookie = document.cookie.indexOf('fanbox');
if (cookie != -1) {
return;
} else {
$('#fanbox').css('display','block');
}
$('.botoncerrar').click(function() {
$('#fanbox').fadeOut();
document.cookie = 'fanbox=desactivado';
});
});
</script>

Y por último vamos a agregar el HTML, abajo del código javascript que pusimos lo vamos a poner, es el siguiente código:

<div id="fanbox">
  <div class="contenido">
   <img class="botoncerrar" alt="Cerrar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpQN2mMdNloRELR6KUaOUTz-93HSWC-9E5tj_OKe0yznlRgyPXRytF2bdNgKUxShhlYRAkUfI8ukPSg1wnV1b7x605Fr1d_eFdv9ZJbia9MAZgPKFyZn_yLdJl4RAmhqMqmFqqgKQZlvT/s1600/close.png" title="Cerrar" onclick="$('#fanbox').fadeOut()" />
   <h3>Únete a la página de Facebook</h3>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width=500&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:258px;" allowTransparency="true"></iframe>
  </div>
 </div>
<b:if cond="data:blog.isMobile">
  <style type="text/css">
#fanbox {
  display: none !important;
}
  </style>
</b:if>

 Y listo :D ahora si ya tenemos todo, para agregar nuestra fanpage solo editamos FacebookDevelopers y en vez de eso ponemos nuestra fanpage, ejemplo, si mi página es https://www.facebook.com/ayudarbloggers lo que tendría que agregar es solo ayudarbloggers.
Y eso es todo :D espero que les guste y que les haya servido.