Mil Trucos Blogger

FanBox de Twitter flotante que baja con la página

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. Juan Juan
    Agosto 6, 2012    

    Excelente truco Juvinao XD! te sigo en Twitter.

    • Agosto 6, 2012    

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

  2. Agosto 7, 2012    

    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

    • Agosto 8, 2012    

      Exactamente que quieres mostrar. :man:

  3. Agosto 9, 2012    

    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

  4. Agosto 10, 2012    

    donde esta el “body”

  5. Agosto 10, 2012    

    donde esta el “body”

    • Agosto 10, 2012    

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

    • Agosto 12, 2012    

      Gracias, ya lo tengo pero no me baja

  6. Agosto 10, 2012    

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

    • Agosto 10, 2012    

      Cristian gracias por el titulo de “Crack”, saludos amigo :man:

  7. Agosto 13, 2012    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo