Pasang Info Melayang Yang Dapat Ditutup

Skrip di bawah ini akan membantu Anda untuk menampilkan informasi melayang pada bagian atas blog yang dapat ditutup setiap saat. Dengan menggunakan skrip ini, informasi yang Anda sajikan juga akan mengikuti pergerakan user ketika menggulung ke bawah.

Ada dua langkah untuk memasang skrip ini, yaitu:

  1. Copy skrip di bawah ini dan paste di antara kode skrip dan .
    Kode skrip:

    #topbar{
    position:absolute;
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    width: 620px;
    visibility: hidden;
    z-index: 100;
    }

    /***********************************************
    * 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

  2. Copy skrip di bawah ini dan paste di antara kode skrip dan .
    Kode skrip:

    Your content here.

Silakan melakukan modifikasi terhadap kode skrip yang ada agar sesuai dengan keinginan Anda.

Selamat mencoba!

Referensi: http://www.dynamicdrive.com/dynamicindex17/floatbar.htm

Perihal justdwijaya
Seorang blogger dari Jakarta yang ingin mencari teman dan peluang bisnis.

Apa Pendapat Kamu?

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: