Tips para nuevos bloggers

Viendo el interés con el que andamos en estos días por "enchular" los blogs, quiero enseñarles algo que aprendí en la noche de ayer: Cómo poner el Fan Box flotante y con efecto deslizante de Facebook en el blog, tal como lo ven a los lados.

Pues bien, hay que seguir varios pasos, pero si lo hacen bien a la primera les sale.

Lo primero es que su blog tenga portal en Facebook y cuenta en Twitter...quien no sepa me lo dice en un comentario y lo explico.

Si ya lo tienen, viene lo siguiente...

En la página de edición de su blog, buscan el apartado que dice plantilla y les aparecerá algo así:

Luego deberán dar clic al botón que dice Edición de HTML y aparecerá lo siguiente:

Le dan clic en CONTINUAR y aparecerá el código HTML de la plantilla de su blog, tal como la tienen.

Entonces procedemos a insertar el código:

Buscamos la etiqueta </head> (oprimiendo Ctrl F y luego escribiendo </head>) y justo antes de esto pegamos el siguiente script:

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

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Luego buscamos la siguiente etiqueta ]]></b:skin> y antes de ella agregamos lo siguiente:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwGtDkOF3w_da_dENUxsvSCDXLMm1Pv75cHFcxqPGl8c57CpBlYwegUndjP7iVyWLY6aQSAG5XaIGfnvbqafo2netOxhk3k6lSXpC-8hQvwLIEy0rjHPV33jWE4ETst63KK9m_TPY6zA/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Luego le dan Guardar plantilla. (Si dan clic a vista previa y se ve mal, no se preocupen)

Ahora vamos al apartado diseño

Allí le dan clic a añadir un gadget, buscan HTML/Javascript, pegán lo siguiente y cambian las letras rojas por su dirección de su página en Facebook:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdirección-de-la-página-de-facebook&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Con esto, ya tendrán su fanbox flotante de Facebook en su página.

Para Twitter, pegan el siguiente codigo antes de </head>

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

<script type='text/javascript'>
//<![CDATA[
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
//]]>
</script>

<script type='text/javascript'>
jQuery.noConflict();
jQuery(function (){
jQuery(&quot;.slide_likebox_t&quot;).hover(function(){
jQuery(&quot;.slide_likebox_t&quot;).stop(true, false).animate({left:&quot;0&quot;},&quot;medium&quot;);
},function(){
jQuery(&quot;.slide_likebox_t&quot;).stop(true, false).animate({left:&quot;-250&quot;},&quot;medium&quot;);
},500);
return false;
});
</script>

Luego, antes de ]]></b:skin> pegas:

.slide_likebox_t {
float:right;
width:288px;
height:345px;
background: url(http://3.bp.blogspot.com/-QXRO7hJ8j5I/TmF7Wg1GEPI/AAAAAAAAACY/3kN8pabukgg/s1600/twit.png) no-repeat !important;
display:block;
left:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap_t {
margin-top:2px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap_t iframe {margin:-1px}


 Y en diseño abren un nuevo gadget HTML/Javascript y pegán:

<div class='slide_likebox_t'> <div style='color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;'><span><div class='likeboxwrap_t'>
<div id='twitterfanbox'>
<script type="text/javascript">fanbox_init("usuario");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 240px !important; /* Ancho */
height: 350px !important; /* Alto */
}
</style>
</span></div></div>