Ya he publicado otras entradas donde muestro varias opciones para agregar el fanbox de Twitter pero el de hoy tiene varias opciones que pueden resultar interesante y es que es flotante y que baja con la pagina con efecto
deslizante ademas de tener un boton de
cerrar.
Puedes ver el truco en accion en el siguiente
blog de pruebas.
Para agregar este truco ve a
Edición de HTML y pega antes de
</head> lo siguiente:
<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #F1F8E0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlfOsxYGfIBBHC3QVX9ND1pjLFyvMzj4pTaFzR5EIXN-37QJTNXPqfkZSNkc5dQDGpY0kHrH6GDh104Z3_847ENi1jZQN4HSgTn6iKelOg-U7A0TfvIeBLBs-K0UGwWATLnNC2G6yUwXwJ/s0/z-bg.png);
border:2px solid #81BEF7; /* borde */
height:345px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>
Ahora antes de
</body> pega lo siguiente:
<div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMapB5r1y28Wt7z6fZR6_9_VNqw8KShRVtQfxBLB7_39FDm_txX5oZsihqvssz23futcrINAOQU8RqJzmJr70w_nbzk_Ty24Uuql0ypRJXzWWCUPRE7f5quOJEATfm-t-pk6hksxIJ5XI/s320/cerrar.png'/></a>
<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("@TU USUARIO DE TWITTER");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 270px !important; /* Ancho del gadget */
height: 320px !important; /* Alto del gadget */
}
</style>
</div></div>
Para finalizar cambia la parte que dice
TU USUARIO DE TWITTER por lo que se indica.