Tutorial el Fanbox de facebook Flotante en blogger

La caja de Fanbox de Facebook flotante en blogger con efecto deslizante Seguimos con los tutoriales en esta ocación vamos hacer que el fanbok de facebook sea flotante en nuestro blog de blogger
 

Verlo Funcionado LIVE DEMO

Tutorial fanbox de Facebook con un efecto deslizante en blog de Blogger

• Vamos A Diseño
• luego Edición de HTML

Busca lo siguiente


</head>


Justo Antes del código anterior pegamos este otro código.


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

</script>


Le damos Gurdar planilla.

• De nuevo Vamos a Diseño
• Después Añadir un Gadget
• seleccionamos donde dice HTML/JavaScript

Copia y pega esto código dentro del cuadro.


<script type="text/javascript">

//<!--

$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJg5obLmFFFRZK6Ux8zBb0OUcWg2sNxWatJl_kcDhFzHn9148KJdXgqBffp2UXBjCf5a7ZHOA2qixxf1SB-lR_F-ofXBorwRCSqRXrXorSR06MnFMjzgbiR_VdfzCt_xEf9x3j_wmyzYA/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Djdionicio.tk&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://besttricksblogger.blogspot.com/" target="_blank">+Creado por!</a></span></div></div>


Reemplaza donde dice http://www.facebook.com/Djdionicio.tk por la URL de tu página facebook y por ultimo le damos Guardar y listo verás una pestaña en un extremo del blog, eso seria todo si tienen alguna duda háganla saber con gusto les ayudaré ok.