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(http://lh5.googleusercontent.com/-TrTaWL7moiE/TtK640CncWI/AAAAAAAAGe4/bBgX4hEPjQQ/s000/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='http://2.bp.blogspot.com/_dsEG33PDaHw/S89KvNhAxNI/AAAAAAAAAQM/YY86PjAxYG0/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.


12 commentarios

Juan · agosto 6, 2012 a las 7:50 pm

Excelente truco Juvinao XD! te sigo en Twitter.

    Juvinao · agosto 6, 2012 a las 8:23 pm

    Gracias por Comentar y gracias por segiuirme en Twitter Juan :]

Chavo · agosto 7, 2012 a las 12:03 pm

Hola genial los aportes quería preguntarte si existe algún JavaScript que haga que al entrar en nuestros blog te abra una pestaña (o pagina) aparte para mostrar otras cosas. gracias

    Juvinao · agosto 8, 2012 a las 8:30 pm

    Exactamente que quieres mostrar. :man:

Chavo · agosto 9, 2012 a las 7:41 pm

Otra pagina de peliculas, tengo una de anime que va bien, pero asi los que entran a la de anime tambien les abre la de pelicuas

Paula Linares · agosto 10, 2012 a las 9:30 am

donde esta el «body»

Paula Linares · agosto 10, 2012 a las 9:43 am

donde esta el «body»

    Juvinao · agosto 10, 2012 a las 7:30 pm

    Paula el body se ubica casi al final de la plantilla buscalo con control + F y pega alli el codigo a buscar.

    Paula Linares · agosto 12, 2012 a las 8:37 pm

    Gracias, ya lo tengo pero no me baja

Cristian Bravo · agosto 10, 2012 a las 2:36 pm

UNA PASADAAA ME GUSTA, GRACIAS POR EL TRUCO, ERES UN CRACK

    Juvinao · agosto 10, 2012 a las 7:31 pm

    Cristian gracias por el titulo de «Crack», saludos amigo :man:

Edinson Rodriguez · agosto 13, 2012 a las 7:30 pm

Juvinao No Entiendo Cuando Dices Que Pegar eLCodigo Antes De /head Si Yo En El Codigo y En La Ventana No Veo Nada De Eso Explicame Por Favor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *