Barra flotante o top bar que se desliza sobre tu web

contenido dinamico
Barra flotante deslizante

Buenas tardes estimados visitantes, comparto este script, lo han solicitado varias veces. Este JavaScript nos permite visualizar una barra flotante que se desliza a medida que tu web avanza. Dentro de este script podemos incluir contenido Html con una opción de cerrar (X). En nuestra página web la usamos para mostrar los últimos artículos que publicamos. Tu puedes usar este código para agregar imágenes, links, códigos HTML, pruébalo espero les guste.

Saludos.

Copia este script y ègalo en el head de tu web



<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

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 = 5 //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("topbar").style.visibility="hidden"
}

function staticbar(){
    barheight=document.getElementById("topbar").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("topbar");
    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>

smiley

Copia este estilo css

Agregue en el < HEAD> de su pagina web

 <style type="text/css">
/*<![CDATA[*/
#ontopbar{
overflow:hidden;
position:absolute;
border: 1px solid gray;
padding: 10px;
background-color: #fefcd6;
width: auto;
visibility: hidden;
color: #f00;
z-index:1000000000000;

}
a:link, a:visited { color: #000; text-decoration: none !important;}
a.BackToTop {
border: 1px solid #f00;
color: #000;
display: block;
font-weight: bold;
height: 30px;
line-height: 29px;
margin-bottom: 14px;
text-decoration: none;
}
/*]]>*/
</style>
smiley

Copia este Html en un div o en un widget/html

         Reemplaza los # por tus link o direcciones web. Reemplaza Tu texto por tus propias palabras, todo lo que este marcado en color rojo.Si deseas que la barra sea lateral eliminale los <br/>

 <p id="ontopbar">
<a class="BackToTop" style="cursor: pointer;" title="HTML" onclick="goto_top()">Titulo</a><br />
<a class="outlink" href="#" target="_blank">Tu texto</a><br />
<br />
<a class="outlink" href="#" target="_blank">Tu texto</a><br />
<br />
<a class="outlink" href="#" target="_blank">Tu texto</a><br />
<br />
<a class="outlink" href="#" target="_blank">Tu texto</a><br />
<br />
<strong style="cursor: pointer;" onclick="closebar(); return false">Cerrar[X]</strong>
</p>

Asi copia el codigo al portapapeles

Comentarios: 13
  • #13

    Eduardo Hernández (viernes, 16 junio 2017 00:29)

    Disfruta del gran contenido
    Diferente temáticas distribuido por categorías.

  • #12

    Flor (miércoles, 05 noviembre 2014 09:50)

    Hola Estela! Como se podría hacer esto en blogspot?

  • #11

    cumbiaactual (viernes, 03 octubre 2014 14:34)

    ps no me sale el portapapel

  • #10

    EuroservicesBCN (jueves, 25 septiembre 2014 08:22)

    Buenos aportes! Sigan así.

  • #9

    EnderfansZ (lunes, 08 septiembre 2014 04:02)

    Saludos, buen aporte Esthela.
    El footer que se encuentra debajo del contenido, me refiero el "noticias rapidas"
    Pues me preguntaba si no me la podías pasar..
    Parece demasiado útil para mi sitio jimdo. :P

  • #8

    programasyiyopc (martes, 02 septiembre 2014 15:37)

    Graaaaaaaaaacias ! Esthela un saludo especial desde España siempre visito tu página y siempre encuentro algo nuevo.

  • #7

    Esthela Duche (lunes, 01 septiembre 2014 21:50)

    Hola noticentroorizaba asi puedes copiar el codigo al portapapeles http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i44e94ddefb34625d/1409625965/std/image.gif puse la imagen arriba en el tutorial

  • #6

    noticentroorizaba (lunes, 01 septiembre 2014 18:06)

    gracias por el aporte y perdón por mi ignorancia donde puedo ver las descargas no encuentro el portapapeles de antemano gracias

  • #5

    compraventabrindisytododo (domingo, 31 agosto 2014 07:23)

    Para que funciona target="_blank última parte debe ser:

    <p id="ontopbar">
    <a class="BackToTop" style="cursor: pointer;" title="HTML" onclick="goto_top()">Novedades</a><br />
    <a class="outlink" href="http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/" target="_blank">Tutoril.<br />
    Texto con fondo</a><br />
    <br />
    <a class="outlink" href="http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/1/" target="_blank">Texto con fondo 1</a><br />
    <a class="outlink" href="http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/con-esquinas-originales/" target="_blank">Con esquinas originales</a><br />
    <a class="outlink" href="http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/con-flash/" target="_blank">Fondo con flash</a><br />
    <strong style="cursor: pointer;" onclick="closebar(); return false">Cerrar[X]
    </p>

  • #4

    cosasdepareja (lunes, 25 agosto 2014 15:33)

    Gracias por este código estela me sirvió de mucho y ya lo estoy implementando en mi web.Gracias una vez mas...

  • #3

    cosasdepareja (lunes, 25 agosto 2014 15:15)

    Excelente código lo implementare en mi web.Gracias Esthela, tu amigo pastor Juan Carlos

  • #2

    Esthela Duche (miércoles, 20 agosto 2014 17:30)

    hola yiyo copia desde las hoja que sale encima y te debe salir copiado en el portapapeles veo en su codigo fuente que a usted le sale los numero de la hoja y ese codigo esta incorrecto, 02,03,04 las lineas no deben salir tiene que copiarlo desde las opciones que salen en el cuadro de codigo.

  • #1

    programasyiyopc (miércoles, 20 agosto 2014 16:34)

    Gracias por el pedido ... solo que lo probé y no me funciona, o no lo hice bien o no se, si bien entiendo hay que copiar los dos primeros códigos y pegarlos en ¡HEAD! y el ultimo pegarlo en widget/html ? gracias Esthela por la ayuda, saludos!